refactor(button): Create button component

src/components/modals/ErrorBoundary.jsx

@@ -4,6 +4,8 @@ import { PureComponent } from 'react';
 import { MdErrorOutline, MdRefresh } from 'react-icons/md';
 import { captureException } from '@sentry/react';
 
+import Button from './main/settings/Button';
+
 class ErrorBoundary extends PureComponent {
   constructor(props) {
     super(props);
@@ -49,19 +51,23 @@ class ErrorBoundary extends PureComponent {
             </span>
             <div className="buttonsRow">
               {this.state.showReport ? (
-                <button className="sideload" onClick={() => this.reportError()}>
+                <Button
-                  {variables.getMessage('modals.main.error_boundary.report_error')}
+                  type="settings"
-                  <MdErrorOutline />
+                  icon={<MdErrorOutline />}
-                </button>
+                  label={variables.getMessage('modals.main.error_boundary.report_error')}
+                  onClick={() => this.reportError()}
+                />
               ) : (
                 <span className="subtitle">
                   {variables.getMessage('modals.main.error_boundary.sent')}
                 </span>
               )}
-              <button className="sideload" onClick={() => window.location.reload()}>
+              <Button
-                {variables.getMessage('modals.main.error_boundary.refresh')}
+                type="settings"
-                <MdRefresh />
+                icon={<MdRefresh />}
-              </button>
+                label={variables.getMessage('modals.main.error_boundary.refresh')}
+                onClick={() => window.location.reload()}
+              />
             </div>
           </div>
         </div>

src/components/modals/main/marketplace/sections/Added.jsx

@@ -10,6 +10,7 @@ import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 import Header from '../../settings/Header';
+import Button from '../../settings/Button';
 
 import { install, uninstall, urlParser } from 'modules/helpers/marketplace';
 
@@ -73,14 +74,13 @@ export default class Added extends PureComponent {
 
   getSideloadButton() {
     return (
-      <button
+      <Button
-        className="sideload"
+        type="settings"
         onClick={() => document.getElementById('file-input').click()}
         ref={this.customDnd}
-      >
+        icon={<MdCode />}
-        {variables.getMessage('modals.main.addons.sideload.title')}
+        label={variables.getMessage('modals.main.addons.sideload.title')}
-        <MdCode />
+      />
-      </button>
     );
   }
 
@@ -242,17 +242,18 @@ export default class Added extends PureComponent {
           <div className="filter">
             {sideLoadBackendElements()}
             <div className="buttonSection">
-              <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
+              <Button
-                <MdUpdate />
+                type="settings"
-                {variables.getMessage('modals.main.addons.check_updates')}
+                onClick={() => this.updateCheck()}
-              </button>
+                icon={<MdUpdate />}
-              <button
+                label={variables.getMessage('modals.main.addons.check_updates')}
-                className="sideload"
+              />
+              <Button
+                type="settings"
                 onClick={() => document.getElementById('file-input').click()}
-              >
+                icon={<MdCode />}
-                {variables.getMessage('modals.main.addons.sideload.title')}
+                label={variables.getMessage('modals.main.addons.sideload.title')}
-                <MdCode />
+              />
-              </button>
             </div>
           </div>
         </div>

src/components/modals/main/scss/marketplace/modules/_buttons.scss

@@ -24,15 +24,21 @@
   }
 }
 
-.sideload {
+.updateCheck {
+  flex-flow: row !important;
+}
+
+.btn-settings {
+  @include modal-button(standard);
   display: inline;
   margin-top: 0;
   float: none !important;
   padding: 0 20px;
-
-  // width: 200px;
 }
 
-.updateCheck {
+.btn-navigation {
-  flex-flow: row !important;
+}
+
+.flowReverse {
+  flex-flow: row-reverse !important;
 }

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

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+import Tooltip from '../../../helpers/tooltip/Tooltip';
+
+const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => {
+  let className;
+
+  switch (type) {
+    case 'settings':
+      className = 'btn-settings';
+      break;
+    case 'icon':
+      className = 'btn-icon';
+      break;
+    case 'navigation':
+      className = 'btn-navigation';
+      break;
+    default:
+      className = 'btn-default';
+  }
+
+  if (iconPlacement === 'right') {
+    className += ' flowReverse';
+  }
+
+  const button = (
+    <button className={className} onClick={onClick} ref={ref}>
+      {icon}
+      {label}
+    </button>
+  );
+
+  return type === 'icon' ? <Tooltip>{button}</Tooltip> : button;
+});
+
+export default Button;

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

@@ -7,6 +7,7 @@ import {
   MdOutlineKeyboardArrowRight,
 } from 'react-icons/md';
 import EventBus from 'modules/helpers/eventbus';
+import Button from './Button';
 
 const Header = (props) => {
   const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
@@ -38,31 +39,24 @@ const Header = (props) => {
   };
 
   const VisibilityToggle = () => (
-    <button className="sideload" onClick={changeSetting}>
+    <Button
-      {setting ? (
+      type="settings"
-        <>
+      onClick={changeSetting}
-          Hide
+      icon={setting ? <MdOutlineVisibilityOff /> : <MdOutlineVisibility />}
-          <MdOutlineVisibilityOff />
+      label={setting ? 'Hide' : 'Show'}
-        </>
+    />
-      ) : (
-        <>
-          Show
-          <MdOutlineVisibility />
-        </>
-      )}
-    </button>
   );
 
   const ReportButton = () => {
     return (
-      <button
+      <Button
-        className="sideload"
+        type="settings"
         onClick={() =>
           window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
         }
-      >
+        icon={<MdFlag />}
-        {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
+        label={variables.getMessage('modals.main.settings.sections.header.report_issue')}
-      </button>
+      />
     );
   };
 
@@ -70,20 +64,18 @@ const Header = (props) => {
     <>
       <div className="modalHeader">
         <span className="mainTitle">
-          {props.secondaryTitle ? (
+          {props.secondaryTitle && (
             <>
               <span className="backTitle" onClick={props.goBack}>
                 {props.title}
               </span>
               <MdOutlineKeyboardArrowRight />
-              {props.secondaryTitle}
             </>
-          ) : (
-            <>{props.title}</>
           )}
+          {props.secondaryTitle || props.title}
         </span>
         <div className="headerActions">
-          {props.switch && <VisibilityToggle />}
+          {props.visibilityToggle && <VisibilityToggle />}
           {props.report !== false && <ReportButton />}
           {props.children}
         </div>

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

@@ -1,15 +0,0 @@
-import { memo } from 'react';
-
-function SettingsRow({ final, title, subtitle, children }) {
-  return (
-    <div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
-      <div className="content">
-        <span className="title">{title}</span>
-        <span className="subtitle">{subtitle}</span>
-      </div>
-      <div className="action">{children}</div>
-    </div>
-  );
-}
-
-export default memo(SettingsRow);

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

@@ -75,9 +75,9 @@ export default function Date() {
         category="date"
         element=".date"
         zoomSetting="zoomDate"
-        switch={true}
+        visibilityToggle={true}
       />
-      <PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
+      <PreferencesWrapper setting="date" visibilityToggle={true} zoomSetting="zoomDate">
         <Row>
           <Content
             title={variables.getMessage('modals.main.settings.sections.time.type')}

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

@@ -92,9 +92,9 @@ const GreetingSettings = () => {
         category="greeting"
         element=".greeting"
         zoomSetting="zoomGreeting"
-        switch={true}
+        visibilityToggle={true}
       />
-      <PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" switch={true}>
+      <PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
         <AdditionalOptions />
         {BirthdayOptions()}
       </PreferencesWrapper>

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

@@ -69,9 +69,9 @@ export default class Message extends PureComponent {
           category="message"
           element=".message"
           zoomSetting="zoomMessage"
-          switch={true}
+          visibilityToggle={true}
         />
-        <PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
+        <PreferencesWrapper setting="message" visibilityToggle={true} zoomSetting="zoomMessage">
           <Row final={true}>
             <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
             <Action>

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

@@ -135,9 +135,13 @@ export default class QuickLinks extends PureComponent {
           category="quicklinks"
           element=".quicklinks-container"
           zoomSetting="zoomQuicklinks"
-          switch={true}
+          visibilityToggle={true}
         />
-        <PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
+        <PreferencesWrapper
+          setting="quicklinksenabled"
+          visibilityToggle={true}
+          zoomSetting="zoomQuicklinks"
+        >
           <Row>
             <Content
               title={variables.getMessage('modals.main.settings.additional_settings')}

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

@@ -262,7 +262,7 @@ export default class QuoteSettings extends PureComponent {
             category="quote"
             element=".quotediv"
             zoomSetting="zoomQuote"
-            switch={true}
+            visibilityToggle={true}
           />
         )}
         {this.state.sourceSection && (
@@ -277,7 +277,7 @@ export default class QuoteSettings extends PureComponent {
           </Row>
         )}
         {!this.state.sourceSection && (
-          <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
+          <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" visibilityToggle={true}>
             <Section
               icon={<MdSource />}
               title={variables.getMessage('modals.main.settings.sections.background.source.title')}

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

@@ -141,9 +141,9 @@ export default class SearchSettings extends PureComponent {
           title={variables.getMessage(`${SEARCH_SECTION}.title`)}
           setting="searchBar"
           category="widgets"
-          switch={true}
+          visibilityToggle={true}
         />
-        <PreferencesWrapper setting="searchBar" category="widgets" switch={true}>
+        <PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
           <AdditionalOptions />
           <SearchEngineSelection />
           {this.state.customEnabled && (

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

@@ -212,9 +212,9 @@ const TimeSettings = () => {
         category="clock"
         element=".clock-container"
         zoomSetting="zoomClock"
-        switch={true}
+        visibilityToggle={true}
       />
-      <PreferencesWrapper setting="time" zoomSetting="zoomClock" switch={true}>
+      <PreferencesWrapper setting="time" zoomSetting="zoomClock" visibilityToggle={true}>
         <WidgetType />
         {timeSettings}
       </PreferencesWrapper>

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

@@ -205,13 +205,13 @@ export default class WeatherSettings extends PureComponent {
           category="widgets"
           zoomSetting="zoomWeather"
           zoomCategory="weather"
-          switch={true}
+          visibilityToggle={true}
         />
         <PreferencesWrapper
           setting="weatherEnabled"
           zoomSetting="zoomWeather"
           zoomCategory="weather"
-          switch={true}
+          visibilityToggle={true}
         >
           <WidgetType />
           {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}

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

@@ -66,7 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
               height: '16px',
               fontSize: '15px',
             }}
-            className="sideload"
+            className="btn-settings"
             onClick={() => addLink(name, url, icon)}
           >
             <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}

src/components/modals/welcome/Welcome.jsx

@@ -6,6 +6,7 @@ import EventBus from 'modules/helpers/eventbus';
 
 import WelcomeSections from './WelcomeSections';
 import ProgressBar from './ProgressBar';
+import Button from '../main/settings/Button';
 
 import './welcome.scss';
 
@@ -121,28 +122,27 @@ class WelcomeModal extends PureComponent {
           </div>
           <div className="welcomeButtons">
             {this.state.currentTab !== 0 ? (
-              <button
+              <Button
-                className="sideload"
+                type="settings"
-                style={{ marginRight: '20px' }}
                 onClick={() => this.changeTab(true)}
-              >
+                icon={<MdArrowBackIosNew />}
-                {variables.getMessage('modals.welcome.buttons.previous')}
+                label={variables.getMessage('modals.welcome.buttons.previous')}
-                <MdArrowBackIosNew />
+              />
-              </button>
             ) : (
-              <button
+              <Button
-                className="sideload"
+                type="settings"
-                style={{ marginRight: '20px' }}
                 onClick={() => this.props.modalSkip()}
-              >
+                icon={<MdOutlinePreview />}
-                {variables.getMessage('modals.welcome.buttons.preview')}
+                label={variables.getMessage('modals.welcome.buttons.preview')}
-                <MdOutlinePreview />
+              />
-              </button>
             )}
-            <button className="sideload" onClick={() => this.changeTab()}>
+            <Button
-              <MdArrowForwardIos />
+              type="settings"
-              {this.state.buttonText}
+              onClick={() => this.changeTab()}
-            </button>
+              icon={<MdArrowForwardIos />}
+              label={this.state.buttonText}
+              iconPlacement={'right'}
+            />
           </div>
         </section>
       </div>

src/components/modals/welcome/welcome.scss

@@ -311,6 +311,7 @@ a.privacy {
   padding: 25px;
   display: flex;
   justify-content: flex-end;
+  gap: 20px;
 
   button {
     @include modal-button(standard);

src/scss/_variables.scss

@@ -192,7 +192,7 @@ $themes: (
     font-size: 1rem;
     display: flex;
     align-items: center;
-    flex-flow: row-reverse;
+    flex-flow: row;
     justify-content: center;
     gap: 20px;
     transition: 0.5s;