refactor(settings): Further implementation of "button" component

src/components/modals/main/Main.jsx

@@ -14,7 +14,7 @@ const renderLoader = () => (
     <ul className="sidebar">
       <span className="mainTitle">Mue</span>
     </ul>
-    <div className="tab-content" style={{ width: '100%' }}>
+    <div className="tab-content">
       <div className="emptyItems">
         <div className="emptyMessage">
           <div className="loaderHolder">

src/components/modals/main/marketplace/Items.jsx

@@ -2,6 +2,8 @@ import variables from 'modules/variables';
 import React, { memo } from 'react';
 import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
 
+import Button from '../settings/Button';
+
 function Items({
   type,
   items,
@@ -32,7 +34,7 @@ function Items({
             </div>
             {collection.news === true ? (
               <a
-                className="collectionButton"
+                className="btn-collection"
                 href={collection.news_link}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -40,13 +42,13 @@ function Items({
                 {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
               </a>
             ) : (
-              <button
+              <Button
-                className="collectionButton"
+                type="collection"
                 onClick={() => collectionFunction(collection.name)}
-              >
+                icon={<MdOutlineArrowForward />}
-                <MdOutlineArrowForward />
+                label={variables.getMessage('modals.main.marketplace.explore_collection')}
-                {variables.getMessage('modals.main.marketplace.explore_collection')}
+                iconPlacement={'right'}
-              </button>
+              />
             )}
           </div>
         </>

src/components/modals/main/scss/marketplace/_main.scss

@@ -412,33 +412,6 @@ p.author {
   .items {
     justify-content: center;
   }
-
-  button.collectionButton,
-  a.collectionButton {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    padding: 1px 12px;
-    backdrop-filter: blur(16px) saturate(180%);
-    background-color: rgb(255 255 255 / 10%);
-    border: 1px solid rgb(209 213 219 / 30%);
-    color: #fff;
-
-    &:hover {
-      backdrop-filter: blur(16px) saturate(180%);
-      background-color: rgb(17 25 40 / 20%);
-      border: 1px solid rgb(255 255 255 / 12.5%);
-    }
-  }
-}
-
-a.collectionButton {
-  height: 40px;
-  text-decoration: none;
-
-  @include themed {
-    border-radius: t($borderRadius);
-  }
 }
 
 .marketplaceRefresh {

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

@@ -37,6 +37,76 @@
 }
 
 .btn-navigation {
+  @include modal-button(standard);
+  padding: 0 15px;
+
+  @include themed {
+    background: t($modal-secondaryColour) !important;
+    border-radius: t($borderRadius) !important;
+    box-shadow: t($boxShadow) !important;
+    border: 0 !important;
+
+    &:hover {
+      background: t($modal-sidebarActive) !important;
+    }
+  }
+
+  &:hover {
+    svg {
+      background: var(--tab-active);
+    }
+
+    color: var(--modal-text);
+  }
+
+  span,
+  svg {
+    font-size: 1.1em !important;
+  }
+
+  svg {
+    font-size: 1.2em !important;
+    color: var(--photo-info);
+  }
+}
+
+/* safari fix */
+@supports (-webkit-hyphens: none) {
+  .btn-navigation {
+    display: inline-block !important;
+  }
+}
+
+.btn-navigation-active {
+  @include themed {
+    background: t($modal-sidebarActive) !important;
+  }
+}
+
+.btn-collection {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 1px 12px;
+  backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgb(255 255 255 / 10%);
+  border: 1px solid rgb(209 213 219 / 30%);
+  color: #fff;
+
+  &:hover {
+    backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgb(17 25 40 / 20%);
+    border: 1px solid rgb(255 255 255 / 12.5%);
+  }
+}
+
+a.btn-collection {
+  height: 40px;
+  text-decoration: none;
+
+  @include themed {
+    border-radius: t($borderRadius);
+  }
 }
 
 .flowReverse {

src/components/modals/main/scss/modules/_navbar.scss

@@ -1,44 +1,3 @@
-.navbar-item {
-  flex-flow: row !important;
-  padding: 0 15px;
-
-  @include themed {
-    background: t($modal-secondaryColour) !important;
-    border-radius: t($borderRadius) !important;
-    box-shadow: t($boxShadow) !important;
-    border: 0 !important;
-
-    &:hover {
-      background: t($modal-sidebarActive) !important;
-    }
-  }
-
-  &:hover {
-    svg {
-      background: var(--tab-active);
-    }
-
-    color: var(--modal-text);
-  }
-
-  span,
-  svg {
-    font-size: 1.1em !important;
-  }
-
-  svg {
-    font-size: 1.2em !important;
-    color: var(--photo-info);
-  }
-}
-
-/* safari fix */
-@supports (-webkit-hyphens: none) {
-  .navbar-item {
-    display: inline-block !important;
-  }
-}
-
 #modal {
   display: flex;
   align-items: flex-start;
@@ -51,9 +10,3 @@
   gap: 25px;
   margin-bottom: 1rem;
 }
-
-.navbar-item-active {
-  @include themed {
-    background: t($modal-sidebarActive) !important;
-  }
-}

src/components/modals/main/scss/modules/_tab-content.scss

@@ -1,6 +1,8 @@
 @import 'scss/variables';
 
 .tab-content {
+  width: 100% !important;
+
   button {
     @include modal-button(standard);
   }

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import Tooltip from '../../../helpers/tooltip/Tooltip';
 
-const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => {
+const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, active }, ref) => {
   let className;
 
   switch (type) {
@@ -14,6 +14,9 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
     case 'navigation':
       className = 'btn-navigation';
       break;
+    case 'collection':
+      className = 'btn-collection';
+      break;
     default:
       className = 'btn-default';
   }
@@ -22,6 +25,10 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
     className += ' flowReverse';
   }
 
+  if (active) {
+    className += ` ${className}-active`;
+  }
+
   const button = (
     <button className={className} onClick={onClick} ref={ref}>
       {icon}

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

@@ -135,6 +135,28 @@ export default class SearchSettings extends PureComponent {
       );
     };
 
+    const CustomOptions = () => {
+      return (
+        <Row final={true}>
+          <Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
+          <Action>
+            <TextField
+              label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
+              value={this.state.customValue}
+              onInput={(e) => this.setState({ customValue: e.target.value })}
+              varient="outlined"
+              InputLabelProps={{ shrink: true }}
+            />
+            <p style={{ marginTop: '0px' }}>
+              <span className="link" onClick={() => this.resetSearch()}>
+                {variables.getMessage('modals.main.settings.buttons.reset')}
+              </span>
+            </p>
+          </Action>
+        </Row>
+      );
+    };
+
     return (
       <>
         <Header
@@ -146,25 +168,7 @@ export default class SearchSettings extends PureComponent {
         <PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
           <AdditionalOptions />
           <SearchEngineSelection />
-          {this.state.customEnabled && (
+          {this.state.customEnabled && CustomOptions()}
-            <Row final={true}>
-              <Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
-              <Action>
-                <TextField
-                  label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
-                  value={this.state.customValue}
-                  onInput={(e) => this.setState({ customValue: e.target.value })}
-                  varient="outlined"
-                  InputLabelProps={{ shrink: true }}
-                />
-                <p style={{ marginTop: '0px' }}>
-                  <span className="link" onClick={() => this.resetSearch()}>
-                    {variables.getMessage('modals.main.settings.buttons.reset')}
-                  </span>
-                </p>
-              </Action>
-            </Row>
-          )}
         </PreferencesWrapper>
       </>
     );

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -8,6 +8,7 @@ import {
   MdClose,
 } from 'react-icons/md';
 import Tab from './Tab';
+import Button from '../../settings/Button';
 import ErrorBoundary from '../../../ErrorBoundary';
 
 class Tabs extends PureComponent {
@@ -37,6 +38,21 @@ class Tabs extends PureComponent {
   }
 
   render() {
+    const navbarButtons = [
+      {
+        tab: 'settings',
+        icon: <MdSettings />,
+      },
+      {
+        tab: 'addons',
+        icon: <MdOutlineExtension />,
+      },
+      {
+        tab: 'marketplace',
+        icon: <MdOutlineShoppingBasket />,
+      },
+    ];
+
     const reminderInfo = (
       <div
         className="reminder-info"
@@ -74,37 +90,17 @@ class Tabs extends PureComponent {
           ))}
           {reminderInfo}
         </ul>
-        <div className="tab-content" style={{ width: '100%' }}>
+        <div className="tab-content">
           <div className="modalNavbar">
-            <button
+            {navbarButtons.map(({ tab, icon }) => (
-              className={
+              <Button
-                this.props.current === 'settings' ? 'navbar-item navbar-item-active' : 'navbar-item'
+                type="navigation"
-              }
+                onClick={() => this.props.changeTab(tab)}
-              onClick={() => this.props.changeTab('settings')}
+                icon={icon}
-            >
+                label={variables.getMessage(`modals.main.navbar.${tab}`)}
-              <MdSettings />
+                active={this.props.current === tab}
-              <span>{variables.getMessage('modals.main.navbar.settings')}</span>
+              />
-            </button>
+            ))}
-            <button
-              className={
-                this.props.current === 'addons' ? 'navbar-item navbar-item-active' : 'navbar-item'
-              }
-              onClick={() => this.props.changeTab('addons')}
-            >
-              <MdOutlineExtension />
-              <span>{variables.getMessage('modals.main.navbar.addons')}</span>
-            </button>
-            <button
-              className={
-                this.props.current === 'marketplace'
-                  ? 'navbar-item navbar-item-active'
-                  : 'navbar-item'
-              }
-              onClick={() => this.props.changeTab('marketplace')}
-            >
-              <MdOutlineShoppingBasket />
-              <span>{variables.getMessage('modals.main.navbar.marketplace')}</span>
-            </button>
           </div>
           {this.props.children.map((tab) => {
             if (tab.props.label !== this.state.currentTab) {