refactor: new settings components

src/components/modals/main/settings/Text.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { toast } from 'react-toastify';
+
+export default class Text extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || ''
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  handleChange(value) {
+    // Alex wanted font to work with montserrat and Montserrat, so I made it work
+    if (this.props.upperCaseFirst === true) {
+      value = value.charAt(0).toUpperCase() + value.slice(1);
+    }
+
+    localStorage.setItem(this.props.name, value);
+    this.setState({
+      value: value
+    });
+  }
+
+  resetItem() {
+    localStorage.setItem(this.props.name, this.props.default || '');
+    this.setState({
+      value: this.props.default || ''
+    });
+
+    toast(this.language.toasts.reset);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
+        {(this.props.textarea === true) ? 
+           <textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
+          :<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
+        }
+      </React.Fragment>
+    );
+  }
+}