feat: update slider + create

- got rid of commented out css
- update about tab UI
- add reset icon to reset text
- change link colour
- add number to show value on slider
- reorder greeting settings to make a bit more sense

prettierrc

@@ -0,0 +1,7 @@
+{ 
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2, 
+  "semi": true, 
+  "singleQuote": true
+ }

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

@@ -1,5 +1,5 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import variables from "modules/variables";
+import { PureComponent } from "react";
 import {
   MdSettings as Settings,
   MdOutlineInsertPhoto as Photos,
@@ -9,18 +9,18 @@ import {
   MdArrowBack,
   MdDownload,
   MdOpenInNew,
-} from 'react-icons/md';
-import { TextField } from '@mui/material';
-import { toast } from 'react-toastify';
-import SettingsItem from '../../../main/settings/SettingsItem';
+} from "react-icons/md";
+import { TextField } from "@mui/material";
+import { toast } from "react-toastify";
+import SettingsItem from "../../../main/settings/SettingsItem";
 
-import { saveFile } from 'modules/helpers/settings/modals';
-import Tooltip from '../../../../helpers/tooltip/Tooltip';
+import { saveFile } from "modules/helpers/settings/modals";
+import Tooltip from "../../../../helpers/tooltip/Tooltip";
 
-import FileUpload from '../../settings/FileUpload';
-import Dropdown from '../../settings/Dropdown';
+import FileUpload from "../../settings/FileUpload";
+import Dropdown from "../../settings/Dropdown";
 
-import '../../../welcome/welcome.scss';
+import "../../../welcome/welcome.scss";
 
 export default class Create extends PureComponent {
   constructor() {
@@ -28,18 +28,18 @@ export default class Create extends PureComponent {
     this.state = {
       currentTab: 1,
       addonMetadata: {
-        name: '',
-        description: '',
-        type: '',
-        version: '',
-        author: '',
-        icon_url: '',
-        screenshot_url: '',
+        name: "",
+        description: "",
+        type: "",
+        version: "",
+        author: "",
+        icon_url: "",
+        screenshot_url: "",
       },
-      addonData: '',
+      addonData: "",
       settingsClasses: {
-        current: 'toggle lightTheme',
-        json: 'toggle lightTheme',
+        current: "toggle lightTheme",
+        json: "toggle lightTheme",
       },
     };
   }
@@ -64,17 +64,17 @@ export default class Create extends PureComponent {
     let settings = {};
     Object.keys(data).forEach((key) => {
       if (
-        key === 'statsData' ||
-        key === 'firstRun' ||
-        key === 'showWelcome' ||
-        key === 'language' ||
-        key === 'installed' ||
-        key === 'stats' ||
-        key === 'backup_settings' ||
-        key === 'showReminder' ||
-        key === 'experimental' ||
-        key === 'debugtimeout' ||
-        key === 'quotelanguage'
+        key === "statsData" ||
+        key === "firstRun" ||
+        key === "showWelcome" ||
+        key === "language" ||
+        key === "installed" ||
+        key === "stats" ||
+        key === "backup_settings" ||
+        key === "showReminder" ||
+        key === "experimental" ||
+        key === "debugtimeout" ||
+        key === "quotelanguage"
       ) {
         return;
       }
@@ -84,12 +84,14 @@ export default class Create extends PureComponent {
     this.setState({
       addonData: settings,
       settingsClasses: {
-        current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
-        json: input ? 'toggle lightTheme active' : 'toggle lightTheme',
+        current: input ? "toggle lightTheme active" : "toggle lightTheme",
+        json: input ? "toggle lightTheme active" : "toggle lightTheme",
       },
     });
 
-    toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
+    toast(
+      variables.language.getMessage(variables.languagecode, "toasts.imported")
+    );
   }
 
   updateQuotePackType(type) {
@@ -102,7 +104,7 @@ export default class Create extends PureComponent {
       icon_url: this.state.addonMetadata.icon_url,
       screenshot_url: this.state.addonMetadata.screenshot_url,
     };
-    if (type === 'quotePack') {
+    if (type === "quotePack") {
       this.setState({
         addonMetadata: {
           addonMetadata,
@@ -115,9 +117,9 @@ export default class Create extends PureComponent {
           addonMetadata,
         },
         addonData: {
-          url: '',
-          name: '',
-          author: '',
+          url: "",
+          name: "",
+          author: "",
         },
       });
     }
@@ -126,38 +128,45 @@ export default class Create extends PureComponent {
   updateQuotePackAPI(type, data) {
     this.setState({
       addonData: {
-        url: type === 'url' ? data : this.state.addonData.url || '',
-        name: type === 'name' ? data : this.state.addonData.name || '',
-        author: type === 'author' ? data : this.state.addonData.author || '',
+        url: type === "url" ? data : this.state.addonData.url || "",
+        name: type === "name" ? data : this.state.addonData.name || "",
+        author: type === "author" ? data : this.state.addonData.author || "",
       },
     });
   }
 
   importQuotes() {
     this.setState({
-      addonData: JSON.parse(localStorage.getItem('customQuote')) || [],
+      addonData: JSON.parse(localStorage.getItem("customQuote")) || [],
     });
 
-    toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
+    toast(
+      variables.language.getMessage(variables.languagecode, "toasts.imported")
+    );
   }
 
   importPhotos() {
     let data = [];
     try {
-      const current = JSON.parse(localStorage.getItem('customBackground')) || [];
+      const current =
+        JSON.parse(localStorage.getItem("customBackground")) || [];
       data = current.map((item) => {
         return {
-          photographer: '???',
-          location: '???',
+          photographer: "???",
+          location: "???",
           url: {
             default: item,
           },
         };
       });
-      toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
+      toast(
+        variables.language.getMessage(variables.languagecode, "toasts.imported")
+      );
     } catch (e) {
       console.log(e);
-      toast(variables.language.getMessage(variables.languagecode, 'toasts.error'));
+      toast(
+        variables.language.getMessage(variables.languagecode, "toasts.error")
+      );
     }
 
     this.setState({
@@ -171,20 +180,23 @@ export default class Create extends PureComponent {
         name: this.state.addonMetadata.name,
         description: this.state.addonMetadata.description,
         type:
-          this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type,
+          this.state.addonMetadata.type === "quote_api"
+            ? "quotes"
+            : this.state.addonMetadata.type,
         version: this.state.addonMetadata.version,
         author: this.state.addonMetadata.author,
         icon_url: this.state.addonMetadata.icon_url,
         screenshot_url: this.state.addonMetadata.screenshot_url,
         [this.state.addonMetadata.type]: this.state.addonData,
       },
-      this.state.addonMetadata.name + '.json',
+      this.state.addonMetadata.name + ".json"
     );
   }
 
   render() {
     let tabContent;
-    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+    const getMessage = (text) =>
+      variables.language.getMessage(variables.languagecode, text);
 
     const chooseType = (
       <>
@@ -192,7 +204,8 @@ export default class Create extends PureComponent {
           <div className="content">
             <span className="title">Help Centre</span>
             <span className="subtitle">
-              Home of all docs and guides on creating addons for Mue's marketplace
+              Home of all docs and guides on creating addons for Mue's
+              marketplace
             </span>
           </div>
           <button>
@@ -202,17 +215,28 @@ export default class Create extends PureComponent {
         </div>
         <div className="themesToggleArea">
           <div className="options">
-            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}>
+            <div
+              className="toggle lightTheme"
+              onClick={() => this.changeTab(2, "photos")}
+            >
               <Photos />
-              <span>{getMessage('modals.main.marketplace.photo_packs')}</span>
+              <span>{getMessage("modals.main.marketplace.photo_packs")}</span>
             </div>
-            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'quotes')}>
+            <div
+              className="toggle lightTheme"
+              onClick={() => this.changeTab(2, "quotes")}
+            >
               <Quotes />
-              <span>{getMessage('modals.main.marketplace.quote_packs')}</span>
+              <span>{getMessage("modals.main.marketplace.quote_packs")}</span>
             </div>
-            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'settings')}>
+            <div
+              className="toggle lightTheme"
+              onClick={() => this.changeTab(2, "settings")}
+            >
               <Settings />
-              <span>{getMessage('modals.main.marketplace.preset_settings')}</span>
+              <span>
+                {getMessage("modals.main.marketplace.preset_settings")}
+              </span>
             </div>
           </div>
         </div>
@@ -232,13 +256,19 @@ export default class Create extends PureComponent {
     const setMetadata = (data, type) => {
       this.setState({
         addonMetadata: {
-          name: type === 'name' ? data : this.state.addonMetadata.name,
-          description: type === 'description' ? data : this.state.addonMetadata.description,
-          version: type === 'version' ? data : this.state.addonMetadata.version,
-          author: type === 'author' ? data : this.state.addonMetadata.author,
-          icon_url: type === 'icon_url' ? data : this.state.addonMetadata.icon_url,
+          name: type === "name" ? data : this.state.addonMetadata.name,
+          description:
+            type === "description"
+              ? data
+              : this.state.addonMetadata.description,
+          version: type === "version" ? data : this.state.addonMetadata.version,
+          author: type === "author" ? data : this.state.addonMetadata.author,
+          icon_url:
+            type === "icon_url" ? data : this.state.addonMetadata.icon_url,
           screenshot_url:
-            type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url,
+            type === "screenshot_url"
+              ? data
+              : this.state.addonMetadata.screenshot_url,
           type: this.state.addonMetadata.type,
         },
       });
@@ -248,7 +278,7 @@ export default class Create extends PureComponent {
       <>
         <div className="smallBanner">
           <div className="content">
-            <span className="title" style={{ textTransform: 'capitalize' }}>
+            <span className="title" style={{ textTransform: "capitalize" }}>
               Create {this.state.addonMetadata.type} Pack
             </span>
             <span className="subtitle">Description of what is being made</span>
@@ -258,234 +288,269 @@ export default class Create extends PureComponent {
             <MdDownload />
           </button>
         </div>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.name')}>
+        <SettingsItem
+          title={getMessage("modals.main.addons.create.metadata.name")}
+        >
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.name')}
+            label={getMessage("modals.main.addons.create.metadata.name")}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.name}
-            onInput={(e) => setMetadata(e.target.value, 'name')}
+            onInput={(e) => setMetadata(e.target.value, "name")}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
+        <SettingsItem
+          title={getMessage("modals.main.marketplace.product.version")}
+        >
           <TextField
-            label={getMessage('modals.main.marketplace.product.version')}
+            label={getMessage("modals.main.marketplace.product.version")}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.version}
-            onInput={(e) => setMetadata(e.target.value, 'version')}
+            onInput={(e) => setMetadata(e.target.value, "version")}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.marketplace.product.author')}>
+        <SettingsItem
+          title={getMessage("modals.main.marketplace.product.author")}
+        >
           <TextField
-            label={getMessage('modals.main.marketplace.product.author')}
+            label={getMessage("modals.main.marketplace.product.author")}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.author}
-            onInput={(e) => setMetadata(e.target.value, 'author')}
+            onInput={(e) => setMetadata(e.target.value, "author")}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.icon_url')}>
+        <SettingsItem
+          title={getMessage("modals.main.addons.create.metadata.icon_url")}
+        >
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.icon_url')}
+            label={getMessage("modals.main.addons.create.metadata.icon_url")}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.icon_url}
-            onInput={(e) => setMetadata(e.target.value, 'icon_url')}
+            onInput={(e) => setMetadata(e.target.value, "icon_url")}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.screenshot_url')}>
+        <SettingsItem
+          title={getMessage(
+            "modals.main.addons.create.metadata.screenshot_url"
+          )}
+        >
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.screenshot_url')}
+            label={getMessage(
+              "modals.main.addons.create.metadata.screenshot_url"
+            )}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.screenshot_url}
-            onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
+            onInput={(e) => setMetadata(e.target.value, "screenshot_url")}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.description')}>
+        <SettingsItem
+          title={getMessage("modals.main.addons.create.metadata.description")}
+        >
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.description')}
+            label={getMessage("modals.main.addons.create.metadata.description")}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             multiline
             spellCheck={false}
             rows={4}
             value={this.state.addonMetadata.description}
-            onInput={(e) => setMetadata(e.target.value, 'description')}
+            onInput={(e) => setMetadata(e.target.value, "description")}
           />
         </SettingsItem>
         <div className="createButtons">
-          <button onClick={() => this.changeTab(1)} className="uploadbg">
-            {getMessage('modals.welcome.buttons.previous')}
+          <button onClick={() => this.changeTab(1)}>
+            {getMessage("modals.welcome.buttons.previous")}
           </button>
           <button
             onClick={() => this.changeTab(this.state.addonMetadata.type)}
-            className="uploadbg"
             disabled={nextDescriptionDisabled}
           >
-            {getMessage('modals.welcome.buttons.next')}
+            {getMessage("modals.welcome.buttons.next")}
           </button>
         </div>
       </>
     );
 
     // settings
-    const nextSettingsDisabled = this.state.addonData === '';
+    const nextSettingsDisabled = this.state.addonData === "";
     const importSettings = (
       <>
-        <h3>{getMessage('modals.welcome.sections.settings.title')}</h3>
-        <div className="themesToggleArea">
-          <div className="options" style={{ maxWidth: '512px' }}>
-            <div
-              className={this.state.settingsClasses.current}
-              onClick={() => this.importSettings()}
-            >
-              <ExportIcon />
-              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
-            </div>
-            <div
-              className={this.state.settingsClasses.json}
-              onClick={() => document.getElementById('file-input').click()}
-            >
-              <ImportIcon />
-              <span>{getMessage('modals.main.addons.create.settings.json')}</span>
+        <SettingsItem
+          final={true}
+          title={getMessage("modals.welcome.sections.settings.title")}
+        >
+          <div className="themesToggleArea">
+            <div className="options" style={{ maxWidth: "512px" }}>
+              <div
+                className={this.state.settingsClasses.current}
+                onClick={() => this.importSettings()}
+              >
+                <ExportIcon />
+                <span>
+                  {getMessage("modals.main.addons.create.settings.current")}
+                </span>
+              </div>
+              <div
+                className={this.state.settingsClasses.json}
+                onClick={() => document.getElementById("file-input").click()}
+              >
+                <ImportIcon />
+                <span>
+                  {getMessage("modals.main.addons.create.settings.json")}
+                </span>
+              </div>
             </div>
           </div>
+        </SettingsItem>
+        <SettingsItem final={true}>
+          <FileUpload
+            id="file-input"
+            type="settings"
+            accept="application/json"
+            loadFunction={(e) =>
+              this.importSettings(JSON.parse(e.target.result))
+            }
+          />
+        </SettingsItem>
+        <div className="createButtons">
+          <button onClick={() => this.changeTab(2)}>
+            {getMessage("modals.welcome.buttons.previous")}
+          </button>
+          <button
+            onClick={() => this.changeTab(3)}
+            disabled={nextSettingsDisabled}
+          >
+            {getMessage("modals.welcome.buttons.next")}
+          </button>
         </div>
-        <FileUpload
-          id="file-input"
-          type="settings"
-          accept="application/json"
-          loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))}
-        />
-        <br />
-        <br />
-        <button onClick={() => this.changeTab(2)} className="uploadbg" style={{ margin: '10px' }}>
-          {getMessage('modals.welcome.buttons.previous')}
-        </button>
-        <button
-          onClick={() => this.changeTab(3)}
-          className="uploadbg"
-          style={{ margin: '10px' }}
-          disabled={nextSettingsDisabled}
-        >
-          {getMessage('modals.welcome.buttons.next')}
-        </button>
       </>
     );
 
     // quotes
     const nextQuotesDisabled = !(
-      (this.state.addonMetadata.type === 'quote_api' &&
-        this.state.addonData.url !== '' &&
-        this.state.addonData.name !== '' &&
-        this.state.addonData.author !== '') ||
-      (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')
+      (this.state.addonMetadata.type === "quote_api" &&
+        this.state.addonData.url !== "" &&
+        this.state.addonData.name !== "" &&
+        this.state.addonData.author !== "") ||
+      (this.state.addonMetadata.type === "quotes" &&
+        this.state.addonData.quotes !== "")
     );
     const addQuotes = (
       <>
-        <h3>{getMessage('modals.main.addons.create.quotes.title')}</h3>
-        <Dropdown
-          label={getMessage('modals.main.settings.sections.time.type')}
-          noSetting
-          onChange={(e) => this.updateQuotePackType(e)}
-        >
-          <option value="quotes">
-            {getMessage('modals.main.addons.create.quotes.local.title')}
-          </option>
-          <option value="quote_api">
-            {getMessage('modals.main.addons.create.quotes.api.title')}
-          </option>
-        </Dropdown>
-        {this.state.addonMetadata.type === 'quote_api' ? (
+        <SettingsItem final={true} title={getMessage("modals.main.addons.create.quotes.title")}>
+          <Dropdown
+            label={getMessage("modals.main.settings.sections.time.type")}
+            noSetting
+            onChange={(e) => this.updateQuotePackType(e)}
+          >
+            <option value="quotes">
+              {getMessage("modals.main.addons.create.quotes.local.title")}
+            </option>
+            <option value="quote_api">
+              {getMessage("modals.main.addons.create.quotes.api.title")}
+            </option>
+          </Dropdown>
+        </SettingsItem>
+        {this.state.addonMetadata.type === "quote_api" ? (
           <>
             <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.url')}
+              label={getMessage("modals.main.addons.create.quotes.api.url")}
               varient="outlined"
               InputLabelProps={{ shrink: true }}
               value={this.state.addonData.url}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'url')}
+              onInput={(e) => this.updateQuotePack(e.target.value, "url")}
             />
             <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.name')}
+              label={getMessage("modals.main.addons.create.quotes.api.name")}
               varient="outlined"
               InputLabelProps={{ shrink: true }}
               value={this.state.addonData.name}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'name')}
+              onInput={(e) => this.updateQuotePack(e.target.value, "name")}
             />
             <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.author')}
+              label={getMessage("modals.main.addons.create.quotes.api.author")}
               varient="outlined"
               InputLabelProps={{ shrink: true }}
               value={this.state.addonData.author}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'author')}
+              onInput={(e) => this.updateQuotePack(e.target.value, "author")}
             />
             <br />
             <br />
           </>
         ) : (
-          <>
+          <SettingsItem final={true} title={getMessage("modals.main.addons.create.settings.current")} >
             <div className="themesToggleArea">
               <div className="options">
                 <div
                   onClick={() => this.importQuotes()}
                   className="toggle lightTheme"
-                  style={{ width: '60%', margin: '10px 0 10px 0' }}
+                  style={{ width: "60%", margin: "10px 0 10px 0" }}
                 >
                   <ExportIcon />
-                  <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+                  <span>
+                    {getMessage("modals.main.addons.create.settings.current")}
+                  </span>
                 </div>
               </div>
             </div>
-            <br />
-          </>
+          </SettingsItem>
         )}
-        <button onClick={() => this.changeTab(2)} className="uploadbg">
-          {getMessage('modals.welcome.buttons.previous')}
-        </button>
-        <button
-          onClick={() => this.changeTab(3)}
-          className="uploadbg"
-          style={{ margin: '10px' }}
-          disabled={nextQuotesDisabled}
-        >
-          {getMessage('modals.welcome.buttons.next')}
-        </button>
+        <div className="createButtons">
+          <button onClick={() => this.changeTab(2)}>
+            {getMessage("modals.welcome.buttons.previous")}
+          </button>
+          <button
+            onClick={() => this.changeTab(3)}
+            disabled={nextQuotesDisabled}
+          >
+            {getMessage("modals.welcome.buttons.next")}
+          </button>
+        </div>
       </>
     );
 
     // photos
     const nextPhotosDisabled = !(
-      this.state.addonData.photos !== '' && this.state.addonData.photos !== []
+      this.state.addonData.photos !== "" && this.state.addonData.photos !== []
     );
     const addPhotos = (
       <>
-        <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <div className="themesToggleArea">
-          <div className="options">
-            <div
-              onClick={() => this.importPhotos()}
-              className="toggle lightTheme"
-              style={{ width: '60%', margin: '10px 0 10px 0' }}
-            >
-              <ExportIcon />
-              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+        <SettingsItem
+          final={true}
+          title={getMessage("modals.main.addons.create.photos.title")}
+          subtitle={"Import from custom settings."}
+        >
+          <div className="themesToggleArea">
+            <div className="options">
+              <div
+                onClick={() => this.importPhotos()}
+                className="toggle lightTheme"
+                style={{ width: "60%", margin: "10px 0 10px 0" }}
+              >
+                <ExportIcon />
+                <span>
+                  {getMessage("modals.main.addons.create.settings.current")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
+        </SettingsItem>
         <br />
-        <button onClick={() => this.changeTab(2)} className="uploadbg">
-          {getMessage('modals.welcome.buttons.previous')}
-        </button>
-        <button
-          onClick={() => this.changeTab(3)}
-          className="uploadbg"
-          style={{ margin: '10px' }}
-          disabled={nextPhotosDisabled}
-        >
-          {getMessage('modals.welcome.buttons.next')}
-        </button>
+        <div className="createButtons">
+          <button onClick={() => this.changeTab(2)}>
+            {getMessage("modals.welcome.buttons.previous")}
+          </button>
+          <button
+            onClick={() => this.changeTab(3)}
+            disabled={nextPhotosDisabled}
+          >
+            {getMessage("modals.welcome.buttons.next")}
+          </button>
+        </div>
       </>
     );
 
@@ -493,11 +558,12 @@ export default class Create extends PureComponent {
       <>
         <div className="smallBanner">
           <div className="content">
-            <span className="title" style={{ textTransform: 'capitalize' }}>
+            <span className="title" style={{ textTransform: "capitalize" }}>
               Next step, Publishing...
             </span>
             <span className="subtitle">
-              Visit the Mue Knowledgebase on information on how to publish your newly created addon.
+              Visit the Mue Knowledgebase on information on how to publish your
+              newly created addon.
             </span>
           </div>
           <button>
@@ -511,10 +577,12 @@ export default class Create extends PureComponent {
               <div
                 onClick={() => this.downloadAddon()}
                 className="toggle lightTheme"
-                style={{ width: '60%', margin: '10px 0 10px 0' }}
+                style={{ width: "60%", margin: "10px 0 10px 0" }}
               >
                 <ExportIcon />
-                <span>{getMessage('modals.main.addons.create.finish.download')}</span>
+                <span>
+                  {getMessage("modals.main.addons.create.finish.download")}
+                </span>
               </div>
             </div>
           </div>
@@ -523,15 +591,14 @@ export default class Create extends PureComponent {
           <button
             onClick={() =>
               this.changeTab(
-                this.state.addonMetadata.type === 'quote_api'
-                  ? 'quotes'
-                  : this.state.addonMetadata.type,
+                this.state.addonMetadata.type === "quote_api"
+                  ? "quotes"
+                  : this.state.addonMetadata.type
               )
             }
-            className="uploadbg"
             disabled={nextDescriptionDisabled}
           >
-            {getMessage('modals.welcome.buttons.previous')}
+            {getMessage("modals.welcome.buttons.previous")}
           </button>
         </div>
         {/*<button
@@ -542,8 +609,6 @@ export default class Create extends PureComponent {
                 : this.state.addonMetadata.type,
             )
           }
-          className="uploadbg"
-          style={{ marginRight: '10px' }}
         >
           {getMessage('modals.welcome.buttons.previous')}
         </button>*/}
@@ -554,13 +619,13 @@ export default class Create extends PureComponent {
       case 2:
         tabContent = writeDescription;
         break;
-      case 'settings':
+      case "settings":
         tabContent = importSettings;
         break;
-      case 'quotes':
+      case "quotes":
         tabContent = addQuotes;
         break;
-      case 'photos':
+      case "photos":
         tabContent = addPhotos;
         break;
       case 3:
@@ -583,7 +648,9 @@ export default class Create extends PureComponent {
               </Tooltip>
             </div>
           )}
-          <span className="mainTitle">{getMessage('modals.main.addons.create.other_title')}</span>
+          <span className="mainTitle">
+            {getMessage("modals.main.addons.create.other_title")}
+          </span>
         </div>
         {tabContent}
       </>

src/components/modals/main/scss/settings/_buttons.scss

@@ -1,113 +1 @@
 @import 'scss/modules/buttons';
-/*
-.refresh {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'confirm');
-    color: map-get($button-colours, 'confirm');
-  }
-}
-
-.reset {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'reset');
-  border: 2px solid map-get($button-colours, 'reset');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'reset');
-    color: map-get($button-colours, 'reset');
-  }
-}
-
-.add,
-.close {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'other');
-  border: 2px solid map-get($button-colours, 'other');
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-  }
-}
-
-.close {
-  padding: 10px 50px 10px 50px;
-}
-
-.export,
-.uploadbg,
-.import {
-  width: 440px;
-  height: 60px;
-  background-color: var(--sidebar);
-  border: none;
-  outline: none;
-  color: var(--modal-text);
-  border-radius: 12px;
-  margin-right: 25px;
-  width: 220px;
-  cursor: pointer;
-  border-radius: 24px;
-  border: 3px solid var(--tab-active);
-  font-size: 1rem;
-
-  &:hover {
-    background-color: var(--tab-active);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: none;
-    border: 1px solid var(--tab-active);
-
-    &:hover {
-      background: none;
-      border: 1px solid var(--tab-active);
-    }
-  }
-}
-
-.export,
-.import {
-  margin-left: 20px;
-}
-
-.round-small {
-  height: 10px !important;
-  width: 10px !important;
-}
-
-
-/*  button {
-    background: var(--sidebar);
-    text-align: center;
-    border-radius: 20px;
-    padding: 20px;
-    border: 3px solid var(--tab-active);
-    height: 40px;
-    font-size: 1rem;
-    margin: 0 10px 10px 0;
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: center;
-    color: var(--modal-text);
-    transition: 0.5s;
-
-    &:hover {
-      background: var(--tab-active);
-      cursor: pointer;
-    }
-
-.customvideoicon {
-  position: absolute;
-  margin-bottom: 45px;
-  font-size: 3em !important;
-}
-*/

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

@@ -63,6 +63,7 @@ export default class SliderComponent extends PureComponent {
       <>
         <span className={'sliderTitle'}>
           {this.props.title}
+          {Number(this.state.value / 100)}x
           <span className="link" onClick={this.resetItem}>
             <MdRefresh />
             {variables.language.getMessage(

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

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdEmail } from 'react-icons/md';
+import { MdEmail, MdContactPage } from 'react-icons/md';
 import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
 import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
 import { BiDonateHeart } from 'react-icons/bi';
@@ -179,6 +179,10 @@ export default class About extends PureComponent {
             {this.getMessage('modals.main.settings.sections.about.contact_us')}
           </span>
           <div className="aboutContact">
+              <a class='donateButton' href='https://muetab.com/contact'>
+                <MdContactPage />
+                Form
+              </a>
             <Tooltip title={'Email'}>
               <a
                 href={'mailto:' + variables.constants.EMAIL}

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

@@ -29,17 +29,17 @@ export default class GreetingSettings extends PureComponent {
     return (
       <>
         <Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting' switch={true}/>
+        <SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
+        <Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
+        <Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
+        <Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
+        </SettingsItem>
         <SettingsItem title={getMessage('modals.main.settings.sections.greeting.birthday')} subtitle={getMessage('modals.main.settings.enabled')}>
         <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
         <Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
         <p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
         <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>
         </SettingsItem>
-        <SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
-        <Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
-        <Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
-        <Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
-        </SettingsItem>
         {/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
         <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
         <br/>

src/components/widgets/navbar/Navbar.jsx

@@ -63,8 +63,8 @@ export default class Navbar extends PureComponent {
     const backgroundEnabled = localStorage.getItem('background') === 'true';
 
     const navbar = (
-      <div className="navbar-container">
-        <div className={this.state.classList} ref={this.navbarContainer}>
+      <div className="navbar-container" ref={this.navbarContainer}>
+        <div className={this.state.classList}>
           {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null}
           {localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null}
           {localStorage.getItem('todo') === 'true' ? <Todo /> : null}
@@ -94,7 +94,7 @@ export default class Navbar extends PureComponent {
                 variables.languagecode,
                 'modals.main.navbar.settings',
               )}
-            >            <button onClick={() => this.props.openModal('mainModal')}>
+            ><button onClick={() => this.props.openModal('mainModal')}>
             <MdSettings className="settings-icon topicons" />
           </button></Tooltip>
         </div>

src/scss/_variables.scss

@@ -82,7 +82,7 @@ $themes: (
     'modal-background': #2f3542,
     'modal-sidebar': #353b48,
     'modal-sidebarActive': rgba(65, 71, 84, 0.9),
-    'link': rgba(83, 82, 237, 1),
+    'link': rgb(108, 108, 238),
   ),
 );