fix: #514, alex's button and partially #515

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

@@ -12,11 +12,43 @@ import {
 import Slider from './Slider';
 import Switch from './Switch';
 import SettingsItem from './SettingsItem';
+import EventBus from 'modules/helpers/eventbus';
 
 import { values } from 'modules/helpers/settings/modals';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 class Header extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      [this.props.setting]: localStorage.getItem(this.props.setting) === 'true',
+    };
+  }
+
+  changeSetting() {
+    if (localStorage.getItem(this.props.setting) === 'true') {
+      localStorage.setItem(this.props.setting, false);
+      this.setState({ [this.props.setting]: false });
+    } else {
+      localStorage.setItem(this.props.setting, true);
+      this.setState({ [this.props.setting]: true });
+    }
+
+    variables.stats.postEvent(
+      'setting',
+      `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
+    );
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'flex';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.emit('refresh', this.props.category);
+  }
+
   render() {
     return (
       <>
@@ -35,15 +67,9 @@ class Header extends PureComponent {
           {this.props.switch && (
             <button
               className="sideload"
-              onClick={() => {
+              onClick={() => this.changeSetting()}
-                if (localStorage.getItem(this.props.settings) === 'true') {
-                  localStorage.setItem(this.props.setting, false);
-                } else {
-                  localStorage.setItem(this.props.setting, true);
-                }
-              }}
             >
-              {localStorage.getItem(this.props.setting) === 'true' ? (
+              {this.state[this.props.setting] ? (
                 <>
                   Hide
                   <MdOutlineVisibilityOff />
@@ -83,20 +109,6 @@ class Header extends PureComponent {
             <MdFlag /> {variables.getMessage('modals.main.settings.sections.header.report_issue')}
           </span>
         </div>
-        {this.props.switch ? (
-          <SettingsItem
-            title={variables.getMessage('modals.main.settings.enabled')}
-            subtitle={variables.getMessage('modals.main.settings.sections.header.enabled')}
-          >
-            <Switch
-              name={this.props.setting}
-              text={variables.getMessage('modals.main.settings.enabled')}
-              category={this.props.category}
-              element={this.props.element || null}
-              header={true}
-            />
-          </SettingsItem>
-        ) : null}
         {this.props.zoomSetting ? (
           <SettingsItem
             title={variables.getMessage(

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -224,7 +224,7 @@ export default class QuickLinks extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={variables.getMessage('modals.main.settings.sections.quicklinks.styling')}
-          description={variables.getMessage(
+          subtitle={variables.getMessage(
             'modals.main.settings.sections.quicklinks.styling_description',
           )}
         >

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -9,12 +9,16 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');
-  const [icon, setIcon] = useState(edit ? editData.url : '');
+  const [icon, setIcon] = useState(edit ? editData.icon : '');
 
   return (
     <div className="smallModal" style={{ width: '260px' }}>
       <div className="shareHeader">
-        <span className="title">{variables.getMessage('widgets.quicklinks.new')}</span>
+        <span className="title">
+          {edit
+            ? variables.getMessage('widgets.quicklinks.edit')
+            : variables.getMessage('widgets.quicklinks.new')}
+        </span>
         <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
           <div className="close" onClick={() => closeModal()}>
             <MdClose />

src/translations/en_GB.json

@@ -30,6 +30,7 @@
     "search": "Search",
     "quicklinks": {
       "new": "New Link",
+      "edit": "Edit Link",
       "name": "Name",
       "url": "URL",
       "icon": "Icon (optional)",