feat: add work in progress 7.0 code

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/welcome/ProgressBar.jsx

@@ -1,6 +1,6 @@
 export default function ProgressBar({ count, currentTab, switchTab }) {
   return (
-    <div className='progressbar'>
+    <div className="progressbar">
       {count.map((num) => {
         let className = 'step';
 
@@ -9,7 +9,7 @@ export default function ProgressBar({ count, currentTab, switchTab }) {
           className = 'step active';
         }
 
-        return <div className={className} key={index} onClick={() => switchTab(index)}></div>;
+        return <div className={className} key={index} onClick={() => switchTab(index)} />;
       })}
     </div>
   );

src/components/modals/welcome/Welcome.jsx

@@ -17,15 +17,15 @@ export default class WelcomeModal extends PureComponent {
       image: './././icons/undraw_celebration.svg',
       currentTab: 0,
       finalTab: 4,
-      buttonText: this.getMessage('modals.welcome.buttons.next')
+      buttonText: this.getMessage('modals.welcome.buttons.next'),
     };
     this.images = [
-      './././icons/undraw_celebration.svg', 
-      './././icons/undraw_around_the_world_modified.svg', 
-      './././icons/undraw_add_files_modified.svg', 
+      './././icons/undraw_celebration.svg',
+      './././icons/undraw_around_the_world_modified.svg',
+      './././icons/undraw_add_files_modified.svg',
       './././icons/undraw_dark_mode.svg',
-      './././icons/undraw_private_data_modified.svg', 
-      './././icons/undraw_upgrade_modified.svg'
+      './././icons/undraw_private_data_modified.svg',
+      './././icons/undraw_upgrade_modified.svg',
     ];
   }
 
@@ -37,7 +37,7 @@ export default class WelcomeModal extends PureComponent {
       return this.setState({
         currentTab: this.state.currentTab - 1,
         image: this.images[this.state.currentTab - 1],
-        buttonText: this.getMessage('modals.welcome.buttons.next')
+        buttonText: this.getMessage('modals.welcome.buttons.next'),
       });
     }
 
@@ -48,7 +48,10 @@ export default class WelcomeModal extends PureComponent {
     this.setState({
       currentTab: this.state.currentTab + 1,
       image: this.images[this.state.currentTab + 1],
-      buttonText: (this.state.currentTab !== this.state.finalTab) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.main.addons.create.finish.title')
+      buttonText:
+        this.state.currentTab !== this.state.finalTab
+          ? this.getMessage('modals.welcome.buttons.next')
+          : this.getMessage('modals.main.addons.create.finish.title'),
     });
   }
 
@@ -57,7 +60,10 @@ export default class WelcomeModal extends PureComponent {
     this.setState({
       currentTab: tab,
       image: this.images[tab],
-      buttonText: (tab !== this.state.finalTab + 1) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.main.addons.create.finish.title')
+      buttonText:
+        tab !== this.state.finalTab + 1
+          ? this.getMessage('modals.welcome.buttons.next')
+          : this.getMessage('modals.main.addons.create.finish.title'),
     });
 
     localStorage.setItem('bgtransition', true);
@@ -70,7 +76,10 @@ export default class WelcomeModal extends PureComponent {
       this.setState({
         currentTab: Number(welcomeTab),
         image: this.images[Number(welcomeTab)],
-        buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.main.addons.create.finish.title')
+        buttonText:
+          Number(welcomeTab) !== this.state.finalTab + 1
+            ? this.getMessage('modals.welcome.buttons.next')
+            : this.getMessage('modals.main.addons.create.finish.title'),
       });
     }
 
@@ -89,19 +98,49 @@ export default class WelcomeModal extends PureComponent {
 
   render() {
     return (
-      <div className='welcomeContent'>
+      <div className="welcomeContent">
         <section>
-          <img className='showcaseimg' alt='sidebar icon' draggable={false} src={this.state.image} />
-          <ProgressBar count={this.images} currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>  
+          <img
+            className="showcaseimg"
+            alt="sidebar icon"
+            draggable={false}
+            src={this.state.image}
+          />
+          <ProgressBar
+            count={this.images}
+            currentTab={this.state.currentTab}
+            switchTab={(tab) => this.switchTab(tab)}
+          />
         </section>
         <section>
-          <div className='content'>
-            <WelcomeSections currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
+          <div className="content">
+            <WelcomeSections
+              currentTab={this.state.currentTab}
+              switchTab={(tab) => this.switchTab(tab)}
+            />
           </div>
-          <div className='buttons'>
-            {(this.state.currentTab === 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.props.modalSkip()}>{this.getMessage('modals.welcome.buttons.preview')}</button> : null} 
-            {(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage('modals.welcome.buttons.previous')}</button> : null}
-            <button className='close' onClick={() => this.changeTab()}>{this.state.buttonText}</button>
+          <div className="buttons">
+            {this.state.currentTab === 0 ? (
+              <button
+                className="close"
+                style={{ marginRight: '20px' }}
+                onClick={() => this.props.modalSkip()}
+              >
+                {this.getMessage('modals.welcome.buttons.preview')}
+              </button>
+            ) : null}
+            {this.state.currentTab !== 0 ? (
+              <button
+                className="close"
+                style={{ marginRight: '20px' }}
+                onClick={() => this.changeTab(true)}
+              >
+                {this.getMessage('modals.welcome.buttons.previous')}
+              </button>
+            ) : null}
+            <button className="close" onClick={() => this.changeTab()}>
+              {this.state.buttonText}
+            </button>
           </div>
         </section>
       </div>

src/components/modals/welcome/WelcomeSections.jsx

@@ -1,31 +1,37 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
+import variables from "modules/variables";
+import { PureComponent } from "react";
+import {
+  MdCloudUpload,
+  MdAutoAwesome,
+  MdLightMode,
+  MdDarkMode,
+} from "react-icons/md";
 
-import Radio from '../main/settings/Radio';
-import Checkbox from '../main/settings/Checkbox';
-import FileUpload from '../main/settings/FileUpload';
+import Radio from "../main/settings/Radio";
+import Checkbox from "../main/settings/Checkbox";
+import FileUpload from "../main/settings/FileUpload";
 
-import { loadSettings } from 'modules/helpers/settings';
-import { importSettings } from 'modules/helpers/settings/modals';
+import { loadSettings } from "modules/helpers/settings";
+import { importSettings } from "modules/helpers/settings/modals";
 
-const languages = require('modules/languages.json');
-const default_settings = require('modules/default_settings.json');
+const languages = require("modules/languages.json");
+const default_settings = require("modules/default_settings.json");
 
 export default class WelcomeSections extends PureComponent {
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) =>
+    variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
       // themes
-      autoClass: 'toggle auto active',
-      lightClass: 'toggle lightTheme',
-      darkClass: 'toggle darkTheme',
+      autoClass: "toggle auto active",
+      lightClass: "toggle lightTheme",
+      darkClass: "toggle darkTheme",
       // welcome
       welcomeImage: 0,
       // final
-      importedSettings: []
+      importedSettings: [],
     };
     this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
     this.welcomeImages = 4;
@@ -33,17 +39,22 @@ export default class WelcomeSections extends PureComponent {
 
   changeTheme(type) {
     this.setState({
-      autoClass: (type === 'auto') ? 'toggle auto active' : 'toggle auto',
-      lightClass: (type === 'light') ? 'toggle lightTheme active' : 'toggle lightTheme',
-      darkClass: (type === 'dark') ? 'toggle darkTheme active': 'toggle darkTheme'
+      autoClass: type === "auto" ? "toggle auto active" : "toggle auto",
+      lightClass:
+        type === "light" ? "toggle lightTheme active" : "toggle lightTheme",
+      darkClass:
+        type === "dark" ? "toggle darkTheme active" : "toggle darkTheme",
     });
 
-    localStorage.setItem('theme', type);
+    localStorage.setItem("theme", type);
     loadSettings(true);
   }
 
   getSetting(name) {
-    const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On');
+    const value = localStorage
+      .getItem(name)
+      .replace("false", "Off")
+      .replace("true", "On");
     return value.charAt(0).toUpperCase() + value.slice(1);
   }
 
@@ -54,7 +65,13 @@ export default class WelcomeSections extends PureComponent {
     const data = JSON.parse(e.target.result);
     Object.keys(data).forEach((setting) => {
       // language and theme already shown, the others are only used internally
-      if (setting === 'language' || setting === 'theme'|| setting === 'firstRun' || setting === 'showWelcome' || setting === 'showReminder') {
+      if (
+        setting === "language" ||
+        setting === "theme" ||
+        setting === "firstRun" ||
+        setting === "showWelcome" ||
+        setting === "showReminder"
+      ) {
         return;
       }
 
@@ -67,12 +84,12 @@ export default class WelcomeSections extends PureComponent {
 
       settings.push({
         name: setting,
-        value: data[setting]
+        value: data[setting],
       });
     });
 
     this.setState({
-      importedSettings: settings
+      importedSettings: settings,
     });
 
     this.props.switchTab(5);
@@ -82,7 +99,7 @@ export default class WelcomeSections extends PureComponent {
     let welcomeImage = this.state.welcomeImage;
 
     this.setState({
-      welcomeImage: ++welcomeImage % this.welcomeImages
+      welcomeImage: ++welcomeImage % this.welcomeImages.length,
     });
 
     this.timeout = setTimeout(this.changeWelcomeImg, 3000);
@@ -111,104 +128,246 @@ export default class WelcomeSections extends PureComponent {
     }
   }
 
-  render() {  
+  render() {
     const intro = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.intro.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
-        <h3 className='quicktip'>#shareyourmue</h3>
-        <div className='examples'>
-          <img src={`./welcome-images/example${[this.state.welcomeImage + 1]}.webp`} alt='Example Mue setup' draggable={false}/>
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.intro.title")}
+        </span>
+        <p>{this.getMessage("modals.welcome.sections.intro.description")}</p>
+        <h3 className="quicktip">#shareyourmue</h3>
+        <div className="examples">
+          <img
+            src={this.welcomeImages[this.state.welcomeImage]}
+            alt="Example Mue setup"
+            draggable={false}
+          />
         </div>
       </>
     );
-  
+
     const chooseLanguage = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.language.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.language.description')} <a href={variables.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
-        <Radio name='language' options={languages} category='welcomeLanguage'/>
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.language.title")}
+        </span>
+        <p>
+          {this.getMessage("modals.welcome.sections.language.description")}{" "}
+          <a
+            href={variables.constants.TRANSLATIONS_URL}
+            className="resetLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          !
+        </p>
+        <Radio name="language" options={languages} category="welcomeLanguage" />
       </>
     );
 
     const theme = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.theme.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.theme.description')}</p>
-        <div className='themesToggleArea'>
-          <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
-            <MdAutoAwesome/>
-            <span>{this.getMessage('modals.main.settings.sections.appearance.theme.auto')}</span>
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.theme.title")}
+        </span>
+        <p>{this.getMessage("modals.welcome.sections.theme.description")}</p>
+        <div className="themesToggleArea">
+          <div
+            className={this.state.autoClass}
+            onClick={() => this.changeTheme("auto")}
+          >
+            <MdAutoAwesome />
+            <span>
+              {this.getMessage(
+                "modals.main.settings.sections.appearance.theme.auto"
+              )}
+            </span>
           </div>
-          <div className='options'>
-            <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
-              <MdLightMode/>
-              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.light')}</span>
+          <div className="options">
+            <div
+              className={this.state.lightClass}
+              onClick={() => this.changeTheme("light")}
+            >
+              <MdLightMode />
+              <span>
+                {this.getMessage(
+                  "modals.main.settings.sections.appearance.theme.light"
+                )}
+              </span>
             </div>
-            <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
-              <MdDarkMode/>
-              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.dark')}</span>
+            <div
+              className={this.state.darkClass}
+              onClick={() => this.changeTheme("dark")}
+            >
+              <MdDarkMode />
+              <span>
+                {this.getMessage(
+                  "modals.main.settings.sections.appearance.theme.dark"
+                )}
+              </span>
             </div>
           </div>
-          <h3 className='quicktip'>{this.getMessage('modals.welcome.tip')}</h3>
-          <p>{this.getMessage('modals.welcome.sections.theme.tip')}</p>
+          <h3 className="quicktip">{this.getMessage("modals.welcome.tip")}</h3>
+          <p>{this.getMessage("modals.welcome.sections.theme.tip")}</p>
         </div>
       </>
     );
-  
+
     const settings = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.settings.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.settings.description')}</p>
-        <button className='upload' onClick={() => document.getElementById('file-input').click()}>
-          <MdCloudUpload/>
-          <br/>
-          <span>{this.getMessage('modals.main.settings.buttons.import')}</span>
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.settings.title")}
+        </span>
+        <p>{this.getMessage("modals.welcome.sections.settings.description")}</p>
+        <button
+          className="upload"
+          onClick={() => document.getElementById("file-input").click()}
+        >
+          <MdCloudUpload />
+          <br />
+          <span>{this.getMessage("modals.main.settings.buttons.import")}</span>
         </button>
-        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.importSettings(e)}/>
-        <h3 className='quicktip'>{this.getMessage('modals.welcome.tip')}</h3>
-        <p>{this.getMessage('modals.welcome.sections.settings.tip')}</p>
+        <FileUpload
+          id="file-input"
+          accept="application/json"
+          type="settings"
+          loadFunction={(e) => this.importSettings(e)}
+        />
+        <h3 className="quicktip">{this.getMessage("modals.welcome.tip")}</h3>
+        <p>{this.getMessage("modals.welcome.sections.settings.tip")}</p>
       </>
     );
 
     const privacy = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.privacy.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.privacy.description')}</p>
-        <Checkbox name='offlineMode' text={this.getMessage('modals.main.settings.sections.advanced.offline_mode')} element='.other' />
-        <p>{this.getMessage('modals.welcome.sections.privacy.offline_mode_description')}</p>
-        <Checkbox name='quicklinksddgProxy' text={this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') + ' (' + this.getMessage('modals.main.settings.sections.quicklinks.title') + ')'}/>
-        <Checkbox name='ddgProxy' text={this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage('modals.main.settings.sections.background.title') + ')'}/>
-        <p>{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}</p>
-        <h3 className='quicktip'>{this.getMessage('modals.welcome.sections.privacy.links.title')}</h3>
-        <a className='privacy' href={variables.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
-        <br/><br/>
-        <a className='privacy' href={'https://github.com/' + variables.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.source_code')}</a>
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.privacy.title")}
+        </span>
+        <p>{this.getMessage("modals.welcome.sections.privacy.description")}</p>
+        <Checkbox
+          name="offlineMode"
+          text={this.getMessage(
+            "modals.main.settings.sections.advanced.offline_mode"
+          )}
+          element=".other"
+        />
+        <p>
+          {this.getMessage(
+            "modals.welcome.sections.privacy.offline_mode_description"
+          )}
+        </p>
+        <Checkbox
+          name="quicklinksddgProxy"
+          text={
+            this.getMessage(
+              "modals.main.settings.sections.background.ddg_image_proxy"
+            ) +
+            " (" +
+            this.getMessage("modals.main.settings.sections.quicklinks.title") +
+            ")"
+          }
+        />
+        <Checkbox
+          name="ddgProxy"
+          text={
+            this.getMessage(
+              "modals.main.settings.sections.background.ddg_image_proxy"
+            ) +
+            " (" +
+            this.getMessage("modals.main.settings.sections.background.title") +
+            ")"
+          }
+        />
+        <p>
+          {this.getMessage(
+            "modals.welcome.sections.privacy.ddg_proxy_description"
+          )}
+        </p>
+        <h3 className="quicktip">
+          {this.getMessage("modals.welcome.sections.privacy.links.title")}
+        </h3>
+        <a
+          className="privacy"
+          href={variables.constants.PRIVACY_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {this.getMessage(
+            "modals.welcome.sections.privacy.links.privacy_policy"
+          )}
+        </a>
+        <br />
+        <br />
+        <a
+          className="privacy"
+          href={"https://github.com/" + variables.constants.ORG_NAME}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {this.getMessage("modals.welcome.sections.privacy.links.source_code")}
+        </a>
       </>
     );
 
     const final = (
       <>
-        <h1>{this.getMessage('modals.welcome.sections.final.title')}</h1>
-        <p>{this.getMessage('modals.welcome.sections.final.description')}</p>
-        <h3 className='quicktip'>{this.getMessage('modals.welcome.sections.final.changes')}</h3>
-        <p>{this.getMessage('modals.welcome.sections.final.changes_description')}</p>
-        <div className='themesToggleArea'>
-          <div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage('modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
-          <div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage('modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
-          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{this.getMessage('modals.main.settings.sections.final.imported', { amount: this.state.importedSettings.length })} {this.state.importedSettings.length}</div> : null}
+        <span className="mainTitle">
+          {this.getMessage("modals.welcome.sections.final.title")}
+        </span>
+        <p>{this.getMessage("modals.welcome.sections.final.description")}</p>
+        <h3 className="quicktip">
+          {this.getMessage("modals.welcome.sections.final.changes")}
+        </h3>
+        <p>
+          {this.getMessage("modals.welcome.sections.final.changes_description")}
+        </p>
+        <div className="themesToggleArea">
+          <div className="toggle" onClick={() => this.props.switchTab(1)}>
+            <span>
+              {this.getMessage("modals.main.settings.sections.language.title")}:{" "}
+              {
+                languages.find(
+                  (i) => i.value === localStorage.getItem("language")
+                ).name
+              }
+            </span>
+          </div>
+          <div className="toggle" onClick={() => this.props.switchTab(3)}>
+            <span>
+              {this.getMessage(
+                "modals.main.settings.sections.appearance.theme.title"
+              )}
+              : {this.getSetting("theme")}
+            </span>
+          </div>
+          {this.state.importedSettings.length !== 0 ? (
+            <div className="toggle" onClick={() => this.props.switchTab(2)}>
+              {this.getMessage("modals.main.settings.sections.final.imported", {
+                amount: this.state.importedSettings.length,
+              })}{" "}
+              {this.state.importedSettings.length}
+            </div>
+          ) : null}
         </div>
       </>
     );
-  
+
     switch (this.props.currentTab) {
-      case 1: return chooseLanguage;
-      case 2: return settings;
-      case 3: return theme;
-      case 4: return privacy;
-      case 5: return final;
+      case 1:
+        return chooseLanguage;
+      case 2:
+        return settings;
+      case 3:
+        return theme;
+      case 4:
+        return privacy;
+      case 5:
+        return final;
       // 0
-      default: return intro;
+      default:
+        return intro;
     }
   }
 }

src/components/modals/welcome/welcome.scss

@@ -1,4 +1,5 @@
 @import '../main/scss/index.scss';
+@import 'scss/variables';
 
 .welcomemodal {
   position: absolute;
@@ -19,7 +20,9 @@
 
   section:nth-child(1) {
     float: left;
-    background: var(--sidebar);
+    @include themed() {
+      background: t($modal-sidebar);
+    }
     display: flex;
     justify-content: center;
     align-items: center;
@@ -27,15 +30,27 @@
 
   section:nth-child(2) {
     float: right;
-
+    @include themed() {
+      background: t($modal-background);
+    }
     .content {
       padding: 20px;
+      .mainTitle {
+        font-size: 38px;
+        font-weight: 600;
+        margin-bottom: 15px;
+      }
     }
 
     .buttons {
       position: absolute;
       bottom: 2rem;
       right: 2rem;
+      display: flex;
+      button {
+        @include modal-button(standard);
+        width: 150px;
+      }
     }
 
     h1 {
@@ -78,57 +93,61 @@
 }
 
 .themesToggleArea {
-  .active {
-    background: var(--tab-active);
-  }
-
-  .toggle {
-    background: var(--sidebar);
-    text-align: center;
-    border-radius: 20px;
-    padding: 20px;
-    margin: 10px;
-    border: 3px solid var(--tab-active);
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-
-    cursor: pointer;
-
-    &:hover {
-      background: var(--tab-active);
+  @include themed() {
+    .active {
+      background: t($modal-sidebarActive);
     }
 
-    span {
-      font-size: 1rem;
-    }
+    .toggle {
+      background: t($modal-sidebar);
+      text-align: center;
+      border-radius: 20px;
+      padding: 20px;
+      border: 3px solid t($modal-sidebarActive);
+      transition: 0.33s;
 
-    svg {
-      font-size: 2.5em;
-    }
-  }
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
 
-  .auto {
-    svg {
-      font-size: 12px;
-      padding-right: 5px;
-    }
-  }
+      cursor: pointer;
 
-  .options {
-    display: flex;
-    justify-content: space-between;
-
-    .lightTheme,
-    .darkTheme {
-      width: 40%;
-      padding: 50px;
+      &:hover {
+        background: t($modal-sidebarActive);
+      }
 
       span {
-        display: block;
+        font-size: 1rem;
+      }
+
+      svg {
+        font-size: 2.5em;
+      }
+    }
+
+    .auto {
+      svg {
+        font-size: 12px;
+        padding-right: 5px;
+      }
+    }
+
+    .options {
+      display: flex;
+      justify-content: space-between;
+      gap: 25px;
+      margin-top: 25px;
+
+      .lightTheme,
+      .darkTheme {
+        width: 40%;
+        padding: 50px;
+
+        span {
+          display: block;
+        }
       }
     }
   }
@@ -141,13 +160,14 @@
   border: none;
   outline: none;
   padding: 50px;
-  background: var(--sidebar);
-  color: var(--modal-text);
-  cursor: pointer;
-  border: 3px solid var(--tab-active);
-
-  &:hover {
-    background: var(--tab-active);
+  @include themed() {
+    background: t($modal-sidebar);
+    color: t($color);
+    cursor: pointer;
+    border: 3px solid t($modal-sidebarActive);
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
   }
 
   svg {
@@ -220,14 +240,14 @@ a.privacy {
   }
 }
 
-@media (max-width: 1190px) { 
+@media (max-width: 1190px) {
   .welcomemodal {
     width: 90%;
     height: 90%;
   }
 }
 
-@media (max-width: 800px) { 
+@media (max-width: 800px) {
   .welcomemodal {
     width: 100%;
     height: 100%;
@@ -241,3 +261,14 @@ a.privacy {
     height: 140vh !important;
   }
 }
+
+.createButtons {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  margin-top: 15px;
+  button {
+    width: 150px;
+    height: 40px;
+  }
+}