7.x Structural Changes (#637)

* refactor(files): Initial commit on experimental file structure

* refactor(structure): New components system

* refactor(structure): Tidy settings' components

* Refactor(structure): Component exports and imports

* refactor(settings): Use new component imports

* feat: unified background.js script

* fix(build): Partially, distributions still not ready

* feat: critical error on noscript, light theme support for it

* fix(background): Critical issue of code making every background #000

* refactor(welcome): Partition into different files + shared components
- This took too long and destroyed my sanity

---------

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

src/features/modals/welcome/Sections/ChooseLanguage.jsx

@@ -0,0 +1,40 @@
+import variables from 'config/variables';
+import { MdOutlineOpenInNew } from 'react-icons/md';
+import languages from '@/i18n/languages.json';
+
+import { Radio } from 'components/Form/Settings';
+import { Header } from '../components/Layout';
+
+function ChooseLanguage() {
+  return (
+    <>
+      <Header
+        title={variables.getMessage('modals.welcome.sections.language.title')}
+        subtitle={variables.getMessage('modals.welcome.sections.language.description')}
+      />
+      <a
+        href={variables.constants.TRANSLATIONS_URL}
+        className="link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        GitHub
+        <MdOutlineOpenInNew />
+      </a>
+      <a
+        href={variables.constants.WEBLATE_URL}
+        className="link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Weblate
+        <MdOutlineOpenInNew />
+      </a>
+      <div className="languageSettings">
+        <Radio name="language" options={languages} category="welcomeLanguage" />
+      </div>
+    </>
+  );
+}
+
+export { ChooseLanguage as default, ChooseLanguage };

src/features/modals/welcome/Sections/Final.jsx

@@ -0,0 +1,45 @@
+import variables from 'config/variables';
+import languages from '@/i18n/languages.json';
+import { Header } from '../components/Layout';
+
+function Final(props) {
+  return (
+    <>
+      <Header
+        title={variables.getMessage('modals.welcome.sections.final.title')}
+        subtitle={variables.getMessage('modals.welcome.sections.final.description')}
+      />
+      <span className="title">{variables.getMessage('modals.welcome.sections.final.changes')}</span>
+      <span className="subtitle">
+        {variables.getMessage('modals.welcome.sections.final.changes_description')}
+      </span>
+      <div className="themesToggleArea themesToggleAreaWelcome">
+        <div className="toggle" onClick={() => props.switchTab(1)}>
+          <span>
+            {variables.getMessage('modals.main.settings.sections.language.title')}:{' '}
+            {languages.find((i) => i.value === localStorage.getItem('language')).name}
+          </span>
+        </div>
+        <div className="toggle" onClick={() => props.switchTab(3)}>
+          <span>
+            {variables.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
+            {variables.getMessage(
+              'modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'),
+            )}
+          </span>
+        </div>
+        {/*}
+        {this.state.importedSettings.length !== 0 && (
+          <div className="toggle" onClick={() => this.props.switchTab(2)}>
+            {variables.getMessage('modals.main.settings.sections.final.imported', {
+              amount: this.state.importedSettings.length,
+            })}{' '}
+            {this.state.importedSettings.length}
+          </div>
+        )}*/}
+      </div>
+    </>
+  );
+}
+
+export { Final as default, Final };

src/features/modals/welcome/Sections/ImportSettings.jsx

@@ -0,0 +1,69 @@
+import variables from 'config/variables';
+import { useState } from 'react';
+import { FileUpload } from 'components/Form/Settings';
+import { MdCloudUpload } from 'react-icons/md';
+import { importSettings as importSettingsFunction } from 'modules/helpers/settings/modals';
+import { Header } from '../components/Layout';
+import default_settings from 'modules/default_settings.json';
+
+function ImportSettings(props) {
+  const [importedSettings, setImportedSettings] = useState([]);
+
+  const importSettings = (e) => {
+    importSettingsFunction(e);
+
+    const settings = [];
+    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'
+      ) {
+        return;
+      }
+
+      const defaultSetting = default_settings.find((i) => i.name === setting);
+      if (defaultSetting !== undefined) {
+        if (data[setting] === String(defaultSetting.value)) {
+          return;
+        }
+      }
+
+      settings.push({
+        name: setting,
+        value: data[setting],
+      });
+    });
+
+    setImportedSettings(settings);
+    props.switchTab(5);
+  };
+  return (
+    <>
+      <Header
+        title={variables.getMessage('modals.welcome.sections.settings.title')}
+        subtitle={variables.getMessage('modals.welcome.sections.settings.description')}
+      />
+      <button className="upload" onClick={() => document.getElementById('file-input').click()}>
+        <MdCloudUpload />
+        <span>{variables.getMessage('modals.main.settings.buttons.import')}</span>
+      </button>
+      <FileUpload
+        id="file-input"
+        accept="application/json"
+        type="settings"
+        loadFunction={(e) => importSettings(e)}
+      />
+      <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
+      <span className="subtitle">
+        {variables.getMessage('modals.welcome.sections.settings.tip')}
+      </span>
+    </>
+  );
+}
+
+export { ImportSettings as default, ImportSettings };

src/features/modals/welcome/Sections/Intro.jsx

@@ -0,0 +1,82 @@
+import variables from 'config/variables';
+import { useState, useEffect } from 'react';
+
+import { Header } from '../components/Layout';
+import { MdOutlineWavingHand, MdOpenInNew } from 'react-icons/md';
+import { FaDiscord, FaGithub } from 'react-icons/fa';
+
+function Intro() {
+const [welcomeImage, setWelcomeImage] = useState(0);
+
+useEffect(() => {
+    const timer = setInterval(() => {
+      setWelcomeImage(prevWelcomeImage => prevWelcomeImage < 3 ? prevWelcomeImage + 1 : 0);
+    }, 3000);
+
+    // Cleanup function to clear the interval when the component unmounts
+    return () => clearInterval(timer);
+  }, [welcomeImage]);
+
+  return (
+    <>
+      <Header title={variables.getMessage('modals.welcome.sections.intro.title')} />
+      <div className="examples">
+        <img
+          src={`/src/assets/welcome-images/example${welcomeImage + 1}.webp`}
+          alt="Example Mue setup"
+          draggable={false}
+        />
+        <span className="shareYourMue">#shareyourmue</span>
+      </div>
+      <div className="welcomeNotice">
+        <div className="icon">
+          <MdOutlineWavingHand />
+        </div>
+        <div className="text">
+          <span className="title">
+            {variables.getMessage('modals.welcome.sections.intro.title')}
+          </span>
+          <span className="subtitle">
+            {variables.getMessage('modals.welcome.sections.intro.description')}
+          </span>
+        </div>
+      </div>
+      <div className="welcomeNotice">
+        <div className="icon">
+          <FaDiscord />
+        </div>
+        <div className="text">
+          <span className="title">
+            {variables.getMessage('modals.welcome.sections.intro.notices.discord_title')}
+          </span>
+          <span className="subtitle">
+            {variables.getMessage('modals.welcome.sections.intro.notices.discord_description')}
+          </span>
+        </div>
+        <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noopener noreferrer">
+          <MdOpenInNew />{' '}
+          {variables.getMessage('modals.welcome.sections.intro.notices.discord_join')}
+        </a>
+      </div>
+      <div className="welcomeNotice">
+        <div className="icon">
+          <FaGithub />
+        </div>
+        <div className="text">
+          <span className="title">
+            {variables.getMessage('modals.welcome.sections.intro.notices.github_title')}
+          </span>
+          <span className="subtitle">
+            {variables.getMessage('modals.welcome.sections.intro.notices.github_description')}
+          </span>
+        </div>
+        <a href="https://github.com/mue/mue" target="_blank" rel="noopener noreferrer">
+          <MdOpenInNew />
+          {variables.getMessage('modals.welcome.sections.intro.notices.github_open')}
+        </a>
+      </div>
+    </>
+  );
+}
+
+export { Intro as default, Intro };

src/features/modals/welcome/Sections/PrivacyOptions.jsx

@@ -0,0 +1,59 @@
+import variables from 'config/variables';
+import { MdOutlineOpenInNew } from 'react-icons/md';
+import { Checkbox } from 'components/Form/Settings';
+import { Header } from '../components/Layout';
+
+function PrivacyOptions() {
+  return (
+    <>
+      <Header
+        title={variables.getMessage('modals.welcome.sections.privacy.title')}
+        subtitle={variables.getMessage('modals.welcome.sections.privacy.description')}
+      />
+      <Checkbox
+        name="offlineMode"
+        text={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
+        element=".other"
+      />
+      <span className="subtitle">
+        {variables.getMessage('modals.welcome.sections.privacy.offline_mode_description')}
+      </span>
+      <Checkbox
+        name="ddgProxy"
+        text={
+          variables.getMessage('modals.main.settings.sections.background.ddg_image_proxy') +
+          ' (' +
+          variables.getMessage('modals.main.settings.sections.background.title') +
+          ')'
+        }
+      />
+      <span className="subtitle">
+        {variables.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}
+      </span>
+      <span className="title">
+        {variables.getMessage('modals.welcome.sections.privacy.links.title')}
+      </span>
+      <a
+        className="link"
+        href={variables.constants.PRIVACY_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+        <MdOutlineOpenInNew />
+      </a>
+
+      <a
+        className="link"
+        href={'https://github.com/' + variables.constants.ORG_NAME}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {variables.getMessage('modals.welcome.sections.privacy.links.source_code')}
+        <MdOutlineOpenInNew />
+      </a>
+    </>
+  );
+}
+
+export { PrivacyOptions as default, PrivacyOptions };

src/features/modals/welcome/Sections/StyleSelection.jsx

@@ -0,0 +1,41 @@
+import variables from 'config/variables';
+import { MdArchive, MdOutlineWhatshot } from 'react-icons/md';
+import { useState } from 'react';
+import { Header } from '../components/Layout';
+
+function StyleSelection() {
+    const widgetStyle = localStorage.getItem('widgetStyle');
+    const [style, setStyle] = useState({
+      newStyle: widgetStyle === 'legacy' ? 'toggle newStyle' : 'toggle newStyle active',
+      legacyStyle: widgetStyle === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle',
+    });
+    
+      const changeStyle = (type) => {
+        setStyle({
+          newStyle: type === 'new' ? 'toggle newStyle active' : 'toggle newStyle',
+          legacyStyle: type === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle',
+        });
+    
+        localStorage.setItem('widgetStyle', type);
+      };
+
+    return (
+        <>
+        <Header title={variables.getMessage('modals.welcome.sections.style.title')} subtitle={variables.getMessage('modals.welcome.sections.style.description')} />
+        <div className="themesToggleArea">
+          <div className="options">
+            <div className={style.legacyStyle} onClick={() => changeStyle('legacy')}>
+              <MdArchive />
+              <span>{variables.getMessage('modals.welcome.sections.style.legacy')}</span>
+            </div>
+            <div className={style.newStyle} onClick={() => changeStyle('new')}>
+              <MdOutlineWhatshot />
+              <span>{variables.getMessage('modals.welcome.sections.style.modern')}</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+}
+
+export { StyleSelection as default, StyleSelection };

src/features/modals/welcome/Sections/ThemeSelection.jsx

@@ -0,0 +1,56 @@
+import variables from 'config/variables';
+import { useState } from 'react';
+import { MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
+import { loadSettings } from 'modules/helpers/settings';
+import { Header } from '../components/Layout';
+
+function ThemeSelection() {
+  const [theme, setTheme] = useState({
+    autoClass: 'toggle auto active',
+    lightClass: 'toggle lightTheme',
+    darkClass: 'toggle darkTheme',
+  });
+
+  const changeTheme = (type) => {
+    setTheme({
+      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);
+    loadSettings(true);
+  };
+  return (
+    <>
+      <Header
+        title={variables.getMessage('modals.welcome.sections.theme.title')}
+        subtitle={variables.getMessage('modals.welcome.sections.theme.description')}
+      />
+      <div className="themesToggleArea">
+        <div className={theme.autoClass} onClick={() => changeTheme('auto')}>
+          <MdAutoAwesome />
+          <span>{variables.getMessage('modals.main.settings.sections.appearance.theme.auto')}</span>
+        </div>
+        <div className="options">
+          <div className={theme.lightClass} onClick={() => changeTheme('light')}>
+            <MdLightMode />
+            <span>
+              {variables.getMessage('modals.main.settings.sections.appearance.theme.light')}
+            </span>
+          </div>
+          <div className={theme.darkClass} onClick={() => changeTheme('dark')}>
+            <MdDarkMode />
+            <span>
+              {variables.getMessage('modals.main.settings.sections.appearance.theme.dark')}
+            </span>
+          </div>
+        </div>
+      </div>
+      <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
+      <span className="subtitle">{variables.getMessage('modals.welcome.sections.theme.tip')}</span>
+    </>
+  );
+}
+
+export { ThemeSelection as default, ThemeSelection };

src/features/modals/welcome/Sections/index.jsx

@@ -0,0 +1,7 @@
+export * from './Intro';
+export * from './ChooseLanguage';
+export * from './ImportSettings';
+export * from './ThemeSelection';
+export * from './StyleSelection';
+export * from './PrivacyOptions';
+export * from './Final';

src/features/modals/welcome/Welcome.jsx

@@ -0,0 +1,169 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
+
+import EventBus from 'modules/helpers/eventbus';
+
+import { ProgressBar } from './components/Elements';
+import { Button } from 'components/Elements';
+import { Wrapper, Panel } from './components/Layout';
+
+import './welcome.scss';
+
+import {
+  Intro,
+  ChooseLanguage,
+  ImportSettings,
+  ThemeSelection,
+  StyleSelection,
+  PrivacyOptions,
+  Final,
+} from './Sections';
+
+class WelcomeModal extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      image: '/src/assets/icons/undraw_celebration.svg',
+      currentTab: 0,
+      finalTab: 5,
+      buttonText: variables.getMessage('modals.welcome.buttons.next'),
+    };
+    this.images = [
+      '/src/assets/icons/undraw_celebration.svg',
+      '/src/assets/icons/undraw_around_the_world_modified.svg',
+      '/src/assets/icons/undraw_add_files_modified.svg',
+      '/src/assets/icons/undraw_dark_mode.svg',
+      '/src/assets/icons/undraw_making_art.svg',
+      '/src/assets/icons/undraw_private_data_modified.svg',
+      '/src/assets/icons/undraw_upgrade_modified.svg',
+    ];
+  }
+
+  changeTab(minus) {
+    localStorage.setItem('bgtransition', true);
+    localStorage.removeItem('welcomeTab');
+
+    if (minus) {
+      return this.setState({
+        currentTab: this.state.currentTab - 1,
+        image: this.images[this.state.currentTab - 1],
+        buttonText: variables.getMessage('modals.welcome.buttons.next'),
+      });
+    }
+
+    if (this.state.buttonText === variables.getMessage('modals.welcome.buttons.finish')) {
+      return this.props.modalClose();
+    }
+
+    this.setState({
+      currentTab: this.state.currentTab + 1,
+      image: this.images[this.state.currentTab + 1],
+      buttonText:
+        this.state.currentTab !== this.state.finalTab
+          ? variables.getMessage('modals.welcome.buttons.next')
+          : variables.getMessage('modals.welcome.buttons.finish'),
+    });
+  }
+
+  // specific
+  switchTab(tab) {
+    this.setState({
+      currentTab: tab,
+      image: this.images[tab],
+      buttonText:
+        tab !== this.state.finalTab + 1
+          ? variables.getMessage('modals.welcome.buttons.next')
+          : variables.getMessage('modals.welcome.buttons.finish'),
+    });
+
+    localStorage.setItem('bgtransition', true);
+    localStorage.removeItem('welcomeTab');
+  }
+
+  componentDidMount() {
+    const welcomeTab = localStorage.getItem('welcomeTab');
+    if (welcomeTab) {
+      this.setState({
+        currentTab: Number(welcomeTab),
+        image: this.images[Number(welcomeTab)],
+        buttonText:
+          Number(welcomeTab) !== this.state.finalTab + 1
+            ? variables.getMessage('modals.welcome.buttons.next')
+            : variables.getMessage('modals.welcome.buttons.finish'),
+      });
+    }
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'welcomeLanguage') {
+        localStorage.setItem('welcomeTab', this.state.currentTab);
+        localStorage.setItem('bgtransition', false);
+        window.location.reload();
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
+  render() {
+    const tabComponents = {
+      0: <Intro />,
+      1: <ChooseLanguage />,
+      2: <ImportSettings switchTab={(tab) => this.switchTab(tab)} />,
+      3: <ThemeSelection />,
+      4: <StyleSelection />,
+      5: <PrivacyOptions />,
+      6: <Final currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)} />,
+    };
+
+    let CurrentSection = tabComponents[this.state.currentTab] || <Intro />;
+    return (
+      <Wrapper>
+        <Panel type="aside">
+          <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)}
+          />
+        </Panel>
+        <Panel type="content">
+          {CurrentSection}
+          <div className="welcomeButtons">
+            {this.state.currentTab !== 0 ? (
+              <Button
+                type="settings"
+                onClick={() => this.changeTab(true)}
+                icon={<MdArrowBackIosNew />}
+                label={variables.getMessage('modals.welcome.buttons.previous')}
+              />
+            ) : (
+              <Button
+                type="settings"
+                onClick={() => this.props.modalSkip()}
+                icon={<MdOutlinePreview />}
+                label={variables.getMessage('modals.welcome.buttons.preview')}
+              />
+            )}
+            <Button
+              type="settings"
+              onClick={() => this.changeTab()}
+              icon={<MdArrowForwardIos />}
+              label={this.state.buttonText}
+              iconPlacement={'right'}
+            />
+          </div>
+        </Panel>
+      </Wrapper>
+    );
+  }
+}
+
+export default WelcomeModal;

src/features/modals/welcome/WelcomeSections.jsx

@@ -0,0 +1,433 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+
+import {
+  MdCloudUpload,
+  MdAutoAwesome,
+  MdLightMode,
+  MdDarkMode,
+  MdOutlineWavingHand,
+  MdOpenInNew,
+  MdOutlineWhatshot,
+  MdArchive,
+  MdOutlineOpenInNew,
+} from 'react-icons/md';
+import { FaDiscord, FaGithub } from 'react-icons/fa';
+import { Radio, Checkbox, FileUpload } from 'components/Form/Settings';
+
+import { loadSettings } from 'modules/helpers/settings';
+import { importSettings } from 'modules/helpers/settings/modals';
+
+import default_settings from 'modules/default_settings.json';
+import languages from '@/i18n/languages.json';
+
+class WelcomeSections extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      // themes
+      autoClass: 'toggle auto active',
+      lightClass: 'toggle lightTheme',
+      darkClass: 'toggle darkTheme',
+      // styles
+      newStyle: 'toggle newStyle active',
+      legacyStyle: 'toggle legacyStyle',
+      // welcome
+      welcomeImage: 0,
+      // final
+      importedSettings: [],
+    };
+    this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
+    this.welcomeImages = 3;
+  }
+
+  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',
+    });
+
+    localStorage.setItem('theme', type);
+    loadSettings(true);
+  }
+
+  changeStyle(type) {
+    this.setState({
+      newStyle: type === 'new' ? 'toggle newStyle active' : 'toggle newStyle',
+      legacyStyle: type === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle',
+    });
+    localStorage.setItem('widgetStyle', type);
+  }
+
+  getSetting(name) {
+    const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On');
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+
+  importSettings(e) {
+    importSettings(e);
+
+    const settings = [];
+    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'
+      ) {
+        return;
+      }
+
+      const defaultSetting = default_settings.find((i) => i.name === setting);
+      if (defaultSetting !== undefined) {
+        if (data[setting] === String(defaultSetting.value)) {
+          return;
+        }
+      }
+
+      settings.push({
+        name: setting,
+        value: data[setting],
+      });
+    });
+
+    this.setState({
+      importedSettings: settings,
+    });
+
+    this.props.switchTab(5);
+  }
+
+  changeWelcomeImg() {
+    let welcomeImage = this.state.welcomeImage;
+
+    this.setState({
+      welcomeImage: welcomeImage < 3 ? ++welcomeImage : 0,
+    });
+
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
+  }
+
+  componentDidMount() {
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+
+  // cancel welcome image timer if not on welcome tab
+  componentDidUpdate() {
+    if (this.props.currentTab !== 0) {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+        this.timeout = null;
+      }
+    } else if (!this.timeout) {
+      this.timeout = setTimeout(this.changeWelcomeImg, 3000);
+    }
+  }
+
+  render() {
+    const intro = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.intro.title')}
+        </span>
+        <div className="examples">
+          <img
+            src={`/src/assets/welcome-images/example${this.state.welcomeImage + 1}.webp`}
+            alt="Example Mue setup"
+            draggable={false}
+          />
+          <span className="shareYourMue">#shareyourmue</span>
+        </div>
+        <div className="welcomeNotice">
+          <div className="icon">
+            <MdOutlineWavingHand />
+          </div>
+          <div className="text">
+            <span className="title">
+              {variables.getMessage('modals.welcome.sections.intro.title')}
+            </span>
+            <span className="subtitle">
+              {variables.getMessage('modals.welcome.sections.intro.description')}
+            </span>
+          </div>
+        </div>
+        <div className="welcomeNotice">
+          <div className="icon">
+            <FaDiscord />
+          </div>
+          <div className="text">
+            <span className="title">
+              {variables.getMessage('modals.welcome.sections.intro.notices.discord_title')}
+            </span>
+            <span className="subtitle">
+              {variables.getMessage('modals.welcome.sections.intro.notices.discord_description')}
+            </span>
+          </div>
+          <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noopener noreferrer">
+            <MdOpenInNew />{' '}
+            {variables.getMessage('modals.welcome.sections.intro.notices.discord_join')}
+          </a>
+        </div>
+        <div className="welcomeNotice">
+          <div className="icon">
+            <FaGithub />
+          </div>
+          <div className="text">
+            <span className="title">
+              {variables.getMessage('modals.welcome.sections.intro.notices.github_title')}
+            </span>
+            <span className="subtitle">
+              {variables.getMessage('modals.welcome.sections.intro.notices.github_description')}
+            </span>
+          </div>
+          <a href="https://github.com/mue/mue" target="_blank" rel="noopener noreferrer">
+            <MdOpenInNew />
+            {variables.getMessage('modals.welcome.sections.intro.notices.github_open')}
+          </a>
+        </div>
+      </>
+    );
+
+    const chooseLanguage = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.language.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.language.description')}{' '}
+        </span>
+        <a
+          href={variables.constants.TRANSLATIONS_URL}
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GitHub
+          <MdOutlineOpenInNew />
+        </a>
+        <a
+          href={variables.constants.WEBLATE_URL}
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Weblate
+          <MdOutlineOpenInNew />
+        </a>
+        <div className="languageSettings">
+          <Radio name="language" options={languages} category="welcomeLanguage" />
+        </div>
+      </>
+    );
+
+    const theme = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.theme.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.theme.description')}
+        </span>
+        <div className="themesToggleArea">
+          <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
+            <MdAutoAwesome />
+            <span>
+              {variables.getMessage('modals.main.settings.sections.appearance.theme.auto')}
+            </span>
+          </div>
+          <div className="options">
+            <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
+              <MdLightMode />
+              <span>
+                {variables.getMessage('modals.main.settings.sections.appearance.theme.light')}
+              </span>
+            </div>
+            <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
+              <MdDarkMode />
+              <span>
+                {variables.getMessage('modals.main.settings.sections.appearance.theme.dark')}
+              </span>
+            </div>
+          </div>
+        </div>
+        <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.theme.tip')}
+        </span>
+      </>
+    );
+
+    const style = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.style.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.style.description')}
+        </span>
+        <div className="themesToggleArea">
+          <div className="options">
+            <div className={this.state.legacyStyle} onClick={() => this.changeStyle('legacy')}>
+              <MdArchive />
+              <span>{variables.getMessage('modals.welcome.sections.style.legacy')}</span>
+            </div>
+            <div className={this.state.newStyle} onClick={() => this.changeStyle('new')}>
+              <MdOutlineWhatshot />
+              <span>{variables.getMessage('modals.welcome.sections.style.modern')}</span>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+
+    const settings = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.settings.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.settings.description')}
+        </span>
+        <button className="upload" onClick={() => document.getElementById('file-input').click()}>
+          <MdCloudUpload />
+          <span>{variables.getMessage('modals.main.settings.buttons.import')}</span>
+        </button>
+        <FileUpload
+          id="file-input"
+          accept="application/json"
+          type="settings"
+          loadFunction={(e) => this.importSettings(e)}
+        />
+        <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.settings.tip')}
+        </span>
+      </>
+    );
+
+    const privacy = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.privacy.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.privacy.description')}
+        </span>
+        <Checkbox
+          name="offlineMode"
+          text={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
+          element=".other"
+        />
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.privacy.offline_mode_description')}
+        </span>
+        <Checkbox
+          name="ddgProxy"
+          text={
+            variables.getMessage('modals.main.settings.sections.background.ddg_image_proxy') +
+            ' (' +
+            variables.getMessage('modals.main.settings.sections.background.title') +
+            ')'
+          }
+        />
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}
+        </span>
+        <span className="title">
+          {variables.getMessage('modals.welcome.sections.privacy.links.title')}
+        </span>
+        <a
+          className="link"
+          href={variables.constants.PRIVACY_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+          <MdOutlineOpenInNew />
+        </a>
+
+        <a
+          className="link"
+          href={'https://github.com/' + variables.constants.ORG_NAME}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {variables.getMessage('modals.welcome.sections.privacy.links.source_code')}
+          <MdOutlineOpenInNew />
+        </a>
+      </>
+    );
+
+    const final = (
+      <>
+        <span className="mainTitle">
+          {variables.getMessage('modals.welcome.sections.final.title')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.final.description')}
+        </span>
+        <span className="title">
+          {variables.getMessage('modals.welcome.sections.final.changes')}
+        </span>
+        <span className="subtitle">
+          {variables.getMessage('modals.welcome.sections.final.changes_description')}
+        </span>
+        <div className="themesToggleArea themesToggleAreaWelcome">
+          <div className="toggle" onClick={() => this.props.switchTab(1)}>
+            <span>
+              {variables.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>
+              {variables.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
+              {variables.getMessage(
+                'modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'),
+              )}
+            </span>
+          </div>
+          {this.state.importedSettings.length !== 0 && (
+            <div className="toggle" onClick={() => this.props.switchTab(2)}>
+              {variables.getMessage('modals.main.settings.sections.final.imported', {
+                amount: this.state.importedSettings.length,
+              })}{' '}
+              {this.state.importedSettings.length}
+            </div>
+          )}
+        </div>
+      </>
+    );
+
+    switch (this.props.currentTab) {
+      case 1:
+        return chooseLanguage;
+      case 2:
+        return settings;
+      case 3:
+        return theme;
+      case 4:
+        return style;
+      case 5:
+        return privacy;
+      case 6:
+        return final;
+      // 0
+      default:
+        return intro;
+    }
+  }
+}
+
+export default WelcomeSections;

src/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+
+function ProgressBar({ count, currentTab, switchTab }) {
+  return (
+    <div className="progressbar">
+      {count.map((num) => {
+        let className = 'step';
+
+        const index = count.indexOf(num);
+        if (index === currentTab) {
+          className = 'step active';
+        }
+
+        return (
+          <div className={className} key={index} onClick={() => switchTab(index)}>
+            <span>{index + 1}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const MemoizedProgressBar = memo(ProgressBar);
+
+export default MemoizedProgressBar;
+export { MemoizedProgressBar as ProgressBar };

src/features/modals/welcome/components/Elements/ProgressBar/index.jsx

@@ -0,0 +1 @@
+export * from './ProgressBar';

src/features/modals/welcome/components/Elements/index.jsx

@@ -0,0 +1 @@
+export * from './ProgressBar';

src/features/modals/welcome/components/Layout/Header.jsx

@@ -0,0 +1,12 @@
+function Header({ title, subtitle }) {
+  return (
+    <>
+      <span className="mainTitle">{title}</span>
+      <span className="subtitle">
+        {subtitle}
+      </span>
+    </>
+  );
+}
+
+export { Header as default, Header };

src/features/modals/welcome/components/Layout/Layout.jsx

@@ -0,0 +1,7 @@
+function Layout() {
+    return (
+        <h1>Cheese</h1>
+    )
+}
+
+export { Layout as default, Layout };

src/features/modals/welcome/components/Layout/Panel.jsx

@@ -0,0 +1,5 @@
+const Panel = ({ children, type }) => (
+  <section> {type === 'content' ? <div className="content">{children}</div> : children}</section>
+);
+
+export { Panel as default, Panel };

src/features/modals/welcome/components/Layout/Wrapper.jsx

@@ -0,0 +1,5 @@
+const Wrapper =  ({ children }) => (
+    <div className="welcomeContent">{children}</div>
+)
+
+export { Wrapper as default, Wrapper };

src/features/modals/welcome/components/Layout/index.jsx

@@ -0,0 +1,3 @@
+export * from './Wrapper';
+export * from './Panel';
+export * from './Header';

src/features/modals/welcome/components/index.jsx

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './Elements';

src/features/modals/welcome/welcome.scss

@@ -0,0 +1,319 @@
+@import '../main/scss/index';
+@import 'scss/variables';
+
+.welcomemodal {
+  @include themed {
+    background-color: t($modal-background);
+  }
+}
+
+.welcomeContent {
+  @include themed {
+    background-color: t($modal-background);
+  }
+
+  .MuiFormControlLabel-root {
+    margin-right: 0;
+  }
+
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
+
+  @extend %tabText;
+
+  height: 80vh;
+  width: clamp(60vw, 1200px, 90vw);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-gap: 0;
+
+  section:nth-child(1) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include themed {
+      background-color: t($modal-sidebar);
+    }
+  }
+
+  section:nth-child(2) {
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+    overflow-y: auto;
+
+    .content {
+      display: flex;
+      flex-flow: column;
+      padding: 25px;
+      gap: 20px;
+    }
+  }
+}
+
+.progressbar {
+  position: fixed;
+  bottom: 50px;
+  text-align: center;
+  display: inline;
+  overflow: hidden;
+  white-space: nowrap;
+
+  .step {
+    display: inline-block;
+    border-bottom: 2px solid grey;
+    padding: 10px 20px;
+    margin: 5px;
+    transition: 0.2s ease-in-out;
+    cursor: pointer;
+    border-radius: 10px 10px 0 0;
+
+    &:hover {
+      background: #dd4038;
+      border-radius: 10px;
+      border-bottom: 2px solid #dd4038;
+    }
+  }
+
+  .active {
+    background: #d21a11;
+    border-bottom: 2px solid #d21a11;
+    border-radius: 10px;
+  }
+}
+
+.themesToggleArea {
+  @include themed {
+    .active {
+      background: t($modal-sidebarActive);
+    }
+
+    .toggle {
+      background: t($modal-sidebar);
+      text-align: center;
+      border-radius: 20px;
+      padding: 20px;
+      border: 3px solid t($modal-sidebarActive);
+      transition: 0.33s;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      place-content: center center;
+      cursor: pointer;
+
+      &:hover {
+        background: t($modal-sidebarActive);
+      }
+
+      span {
+        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,
+      .legacyStyle,
+      .newStyle {
+        width: 50%;
+        padding: 50px;
+
+        span {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.themesToggleArea .toggle {
+  margin-bottom: 10px;
+}
+
+.upload {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  padding: 50px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  transition: 0.3s;
+
+  @include themed {
+    background: t($modal-sidebar);
+    color: t($color);
+    cursor: pointer;
+    border: 3px solid t($modal-sidebarActive);
+
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
+  }
+
+  svg {
+    font-size: 4em;
+  }
+
+  span {
+    font-size: 2em;
+  }
+}
+
+a.privacy {
+  text-decoration: none;
+  color: var(--modal-text);
+  font-size: 1rem;
+
+  &:hover {
+    color: #5352ed;
+  }
+}
+
+.examples {
+  display: flex;
+  flex-flow: column;
+
+  .shareYourMue {
+    width: fit-content;
+  }
+
+  img {
+    max-width: 60%;
+    border-radius: 10px 10px 10px 0;
+  }
+}
+
+.shareYourMue {
+  padding: 8px 20px;
+  border-radius: 0 0 10px 10px;
+  letter-spacing: 2px;
+
+  @include themed {
+    background-color: t($modal-sidebarActive);
+  }
+}
+
+.createButtons {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  margin-top: 15px;
+
+  button {
+    width: 150px;
+    height: 40px;
+  }
+}
+
+.showcaseimg {
+  width: 350px;
+  height: auto;
+
+  /* animation-name: float-in;
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in; */
+}
+
+.welcomeContent {
+  .light {
+    .toggle.lightTheme {
+      background-color: rgb(219 219 219 / 72%);
+    }
+  }
+
+  .dark {
+    .toggle.darkTheme {
+      background-color: rgb(65 71 84 / 90%);
+    }
+  }
+}
+
+.welcomeNotice {
+  display: flex;
+  flex-flow: row;
+  gap: 25px;
+  padding: 25px;
+  align-items: center;
+
+  @include themed {
+    background-color: t($modal-sidebar);
+    border-radius: t($borderRadius);
+  }
+
+  .icon {
+    background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
+
+    /* @include themed {
+      background-color: t($modal-sidebarActive);
+    } */
+
+    height: 50px !important;
+    width: 50px !important;
+    border-radius: 100%;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    flex-shrink: 0;
+    color: #f18d91;
+    font-size: 24px;
+  }
+
+  .text {
+    display: flex;
+    flex-flow: column;
+  }
+
+  a {
+    text-decoration: none;
+    margin-left: auto;
+    padding: 0 20px;
+
+    @include modal-button(standard);
+  }
+}
+
+.toggle.active {
+  @include themed {
+    background-color: t($modal-sidebarActive) !important;
+  }
+}
+
+.welcomeButtons {
+  z-index: 999;
+  backdrop-filter: blur(2px);
+  position: sticky;
+  bottom: 0;
+  padding: 25px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+
+  button {
+    @include modal-button(standard);
+  }
+}