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 }))}>
+          <Button
-            {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
+            type="settings"
-            <MdAddLink />
+            onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}
-          </button>
+            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,6 +128,75 @@ export default class QuickLinks extends PureComponent {
   render() {
     const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks';
 
+    const AdditionalSettings = () => {
+      return (
+        <Row>
+          <Content
+            title={variables.getMessage('modals.main.settings.additional_settings')}
+            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
+          />
+          <Action>
+            <Checkbox
+              name="quicklinksnewtab"
+              text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
+              category="quicklinks"
+            />
+            <Checkbox
+              name="quicklinkstooltip"
+              text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
+              category="quicklinks"
+            />
+          </Action>
+        </Row>
+      );
+    };
+
+    const StylingOptions = () => {
+      return (
+        <Row>
+          <Content
+            title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.quicklinks.styling_description',
+            )}
+          />
+          <Action>
+            <Dropdown
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
+              name="quickLinksStyle"
+              category="quicklinks"
+            >
+              <option value="icon">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
+              </option>
+              <option value="text">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
+              </option>
+              <option value="metro">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
+              </option>
+            </Dropdown>
+          </Action>
+        </Row>
+      );
+    };
+
+    const AddLink = () => {
+      return (
+        <Row final={true}>
+          <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
+          <Action>
+            <Button
+              type="settings"
+              onClick={() => this.setState({ showAddModal: true })}
+              icon={<MdAddLink />}
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+            />
+          </Action>
+        </Row>
+      );
+    };
+
     return (
       <>
         <Header
@@ -142,58 +212,9 @@ export default class QuickLinks extends PureComponent {
           visibilityToggle={true}
           zoomSetting="zoomQuicklinks"
         >
-          <Row>
+          <AdditionalSettings />
-            <Content
+          <StylingOptions />
-              title={variables.getMessage('modals.main.settings.additional_settings')}
+          <AddLink />
-              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
-            />
-            <Action>
-              <Checkbox
-                name="quicklinksnewtab"
-                text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
-                category="quicklinks"
-              />
-              <Checkbox
-                name="quicklinkstooltip"
-                text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
-                category="quicklinks"
-              />
-            </Action>
-          </Row>
-          <Row>
-            <Content
-              title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.quicklinks.styling_description',
-              )}
-            />
-            <Action>
-              <Dropdown
-                label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
-                name="quickLinksStyle"
-                category="quicklinks"
-              >
-                <option value="icon">
-                  {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
-                </option>
-                <option value="text">
-                  {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
-                </option>
-                <option value="metro">
-                  {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
-                </option>
-              </Dropdown>
-            </Action>
-          </Row>
-
-          <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>
-            </Action>
-          </Row>
 
           {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 })}>
+                <Button
-                  {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+                  type="settings"
-                  <MdAddLink />
+                  onClick={() => this.setState({ showAddModal: true })}
-                </button>
+                  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>