refactor(quickliks): Partition file

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

@@ -9,6 +9,7 @@ import AddModal from './quicklinks/AddModal';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
+import Button from '../Button';
 
 import { Row, Content, Action } from '../SettingsItem';
 import Header from '../Header';
@@ -204,10 +205,12 @@ function Navbar() {
           )}
         />
         <Action>
-          <button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
-            {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
-            <MdAddLink />
-          </button>
+          <Button
+            type="settings"
+            onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}
+            icon={<MdAddLink />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
+          />
         </Action>
       </Row>
     );

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

@@ -4,6 +4,7 @@ import { MdAddLink, MdLinkOff } from 'react-icons/md';
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
+import Button from '../Button';
 import Modal from 'react-modal';
 
 import { Row, Content, Action } from '../SettingsItem';
@@ -127,21 +128,8 @@ export default class QuickLinks extends PureComponent {
   render() {
     const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks';
 
+    const AdditionalSettings = () => {
       return (
-      <>
-        <Header
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
-          setting="quicklinksenabled"
-          category="quicklinks"
-          element=".quicklinks-container"
-          zoomSetting="zoomQuicklinks"
-          visibilityToggle={true}
-        />
-        <PreferencesWrapper
-          setting="quicklinksenabled"
-          visibilityToggle={true}
-          zoomSetting="zoomQuicklinks"
-        >
         <Row>
           <Content
             title={variables.getMessage('modals.main.settings.additional_settings')}
@@ -160,6 +148,11 @@ export default class QuickLinks extends PureComponent {
             />
           </Action>
         </Row>
+      );
+    };
+
+    const StylingOptions = () => {
+      return (
         <Row>
           <Content
             title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
@@ -185,15 +178,43 @@ export default class QuickLinks extends PureComponent {
             </Dropdown>
           </Action>
         </Row>
+      );
+    };
 
+    const AddLink = () => {
+      return (
         <Row final={true}>
           <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
           <Action>
-              <button onClick={() => this.setState({ showAddModal: true })}>
-                {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
-              </button>
+            <Button
+              type="settings"
+              onClick={() => this.setState({ showAddModal: true })}
+              icon={<MdAddLink />}
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+            />
           </Action>
         </Row>
+      );
+    };
+
+    return (
+      <>
+        <Header
+          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+          setting="quicklinksenabled"
+          category="quicklinks"
+          element=".quicklinks-container"
+          zoomSetting="zoomQuicklinks"
+          visibilityToggle={true}
+        />
+        <PreferencesWrapper
+          setting="quicklinksenabled"
+          visibilityToggle={true}
+          zoomSetting="zoomQuicklinks"
+        >
+          <AdditionalSettings />
+          <StylingOptions />
+          <AddLink />
 
           {this.state.items.length === 0 && (
             <div className="photosEmpty">
@@ -205,10 +226,12 @@ export default class QuickLinks extends PureComponent {
                 <span className="subtitle">
                   {variables.getMessage('modals.main.settings.sections.message.add_some')}
                 </span>
-                <button onClick={() => this.setState({ showAddModal: true })}>
-                  {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
-                  <MdAddLink />
-                </button>
+                <Button
+                  type="settings"
+                  onClick={() => this.setState({ showAddModal: true })}
+                  icon={<MdAddLink />}
+                  label={variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+                />
               </div>
             </div>
           )}

src/components/modals/welcome/WelcomeSections.jsx

@@ -195,7 +195,7 @@ class WelcomeSections extends PureComponent {
             </span>
           </div>
           <a href="https://github.com/mue/mue" target="_blank" rel="noopener noreferrer">
-            <MdOpenInNew />{' '}
+            <MdOpenInNew />
             {variables.getMessage('modals.welcome.sections.intro.notices.github_open')}
           </a>
         </div>