fix: commence work on welcome modal

src/components/helpers/carousel/Carousel.jsx

@@ -1,15 +1,13 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { PrevButton, NextButton } from "./EmblaCarouselButtons";
-import useEmblaCarousel from "embla-carousel-react";
-import Autoplay from "embla-carousel-autoplay";
-import { FaPhotoVideo } from "react-icons/fa";
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { PrevButton, NextButton } from './CarouselButtons';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+import './carousel.scss';
+import { FaPhotoVideo } from 'react-icons/fa';
 
 const EmblaCarousel = ({ data, options = { loop: false } }) => {
   const autoplay = useRef(
-    Autoplay(
-      { delay: 3000, stopOnInteraction: false },
-      (emblaRoot) => emblaRoot.parentElement
-    )
+    Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement),
   );
 
   const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]);
@@ -37,7 +35,7 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => {
   useEffect(() => {
     if (!emblaApi) return;
     onSelect();
-    emblaApi.on("select", onSelect);
+    emblaApi.on('select', onSelect);
   }, [emblaApi, onSelect]);
 
   return (
@@ -47,11 +45,7 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => {
           {data.map((photo, index) => (
             <div className="embla__slide" key={index}>
               <div className="embla__slide__inner">
-                <img
-                  className="embla__slide__img"
-                  src={photo.url.default}
-                  alt="A cool cat."
-                />
+                <img className="embla__slide__img" src={photo.url.default} alt="A cool cat." />
               </div>
             </div>
           ))}

src/components/helpers/carousel/CarouselButtons.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
+
+export const PrevButton = ({ enabled, onClick }) => (
+  <button className="embla__button embla__button--prev" onClick={onClick} disabled={!enabled}>
+    <MdOutlineArrowBackIos />
+  </button>
+);
+
+export const NextButton = ({ enabled, onClick }) => (
+  <button className="embla__button embla__button--next" onClick={onClick} disabled={!enabled}>
+    <MdOutlineArrowForwardIos />
+  </button>
+);

src/components/helpers/carousel/carousel.scss

@@ -0,0 +1,88 @@
+.embla {
+  position: relative;
+  width: 350px;
+  margin-left: 5px;
+}
+
+.embla__viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.embla__viewport.is-draggable {
+  cursor: move;
+  cursor: grab;
+}
+
+.embla__viewport.is-dragging {
+  cursor: grabbing;
+}
+
+.embla__container {
+  display: flex;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  margin-left: -10px;
+}
+
+.embla__slide {
+  position: relative;
+  min-width: 100%;
+  padding-left: 10px;
+}
+
+.embla__slide__inner {
+  position: relative;
+  overflow: hidden;
+  height: 190px;
+}
+
+.embla__slide__img {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-height: 100%;
+  min-width: 100%;
+  max-width: none;
+  transform: translate(-50%, -50%);
+}
+
+.embla__button {
+  outline: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+  width: 30px !important;
+  height: 30px !important;
+  display: grid;
+  place-items: center;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.embla__button:disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.embla__button__svg {
+  width: 100%;
+  height: 100%;
+}
+
+.embla__button--prev {
+  left: 27px;
+}
+
+.embla__button--next {
+  right: 27px;
+}

src/components/modals/Modals.jsx

@@ -97,7 +97,7 @@ export default class Modals extends PureComponent {
           onRequestClose={() => this.closeWelcome()}
           isOpen={this.state.welcomeModal}
           className="Modal welcomemodal mainModal"
-          overlayClassName="Overlay welcomeoverlay"
+          overlayClassName="Overlay mainModal"
           shouldCloseOnOverlayClick={false}
           ariaHideApp={false}
         >

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

@@ -1,8 +1,6 @@
 import variables from 'modules/variables';
 
-export default function Collection({
-  items,
-}) {
+export default function Collection({ items }) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   return (

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
-
-export const PrevButton = ({ enabled, onClick }) => (
-  <button
-    className="embla__button embla__button--prev"
-    onClick={onClick}
-    disabled={!enabled}
-  >
-    <MdOutlineArrowBackIos/>
-  </button>
-);
-
-export const NextButton = ({ enabled, onClick }) => (
-  <button
-    className="embla__button embla__button--next"
-    onClick={onClick}
-    disabled={!enabled}
-  >
-    <MdOutlineArrowForwardIos/>
-  </button>
-);

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

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import Tooltip from '../../../helpers/tooltip/Tooltip';
+import ImageCarousel from '../../../helpers/carousel/Carousel';
 import { toast } from 'react-toastify';
 import {
   MdArrowBack,
@@ -17,7 +18,6 @@ import {
   MdOutlineKeyboardArrowRight,
   MdExpandMore,
 } from 'react-icons/md';
-import ImageCarousel from './imageCarousel';
 import Modal from 'react-modal';
 
 import { install, uninstall } from 'modules/helpers/marketplace';
@@ -151,20 +151,18 @@ export default class Item extends PureComponent {
                 </div>
               </>
             ) : null}
-         {this.props.data.data.settings ? (
-                        <img
-                        alt="product"
-                        draggable="false"
-                        src={iconsrc}
-                        onClick={() => this.setState({ showLightbox: true })}
-                      />
-         ) : null}
+            {this.props.data.data.settings ? (
+              <img
+                alt="product"
+                draggable="false"
+                src={iconsrc}
+                onClick={() => this.setState({ showLightbox: true })}
+              />
+            ) : null}
             <span className="title">
               {getMessage('modals.main.marketplace.product.description')}
             </span>
-            <span
-              dangerouslySetInnerHTML={{ __html: this.props.data.description }}
-            />
+            <span dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
             {/*
             {this.props.data.description.length > 100 ? (
               <div className="showMore" onClick={() => this.toggleShowMore()}>

src/components/modals/main/scss/index.scss

@@ -82,6 +82,9 @@
 #modal {
   height: 80vh;
   width: clamp(60vw, 1200px, 90vw);
+  @include themed() {
+    background-color: t($modal-background);
+  }
 }
 
 /* fixes for font size on extension */

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

@@ -344,7 +344,7 @@ p.author {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  
+
   @include themed() {
     border-radius: t($borderRadius);
   }
@@ -476,91 +476,3 @@ p.author {
     font-size: 30px;
   }
 }
-.embla {
-  position: relative;
-  width: 350px;
-  margin-left: 5px;
-}
-
-.embla__viewport {
-  overflow: hidden;
-  width: 100%;
-}
-
-.embla__viewport.is-draggable {
-  cursor: move;
-  cursor: grab;
-}
-
-.embla__viewport.is-dragging {
-  cursor: grabbing;
-}
-
-.embla__container {
-  display: flex;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -khtml-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  margin-left: -10px;
-}
-
-.embla__slide {
-  position: relative;
-  min-width: 100%;
-  padding-left: 10px;
-}
-
-.embla__slide__inner {
-  position: relative;
-  overflow: hidden;
-  height: 190px;
-}
-
-.embla__slide__img {
-  position: absolute;
-  display: block;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-height: 100%;
-  min-width: 100%;
-  max-width: none;
-  transform: translate(-50%, -50%);
-}
-
-.embla__button {
-  outline: 0;
-  cursor: pointer;
-  touch-action: manipulation;
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 0;
-  width: 30px !important;
-  height: 30px !important;
-  display: grid;
-  place-items: center;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-}
-
-.embla__button:disabled {
-  cursor: default;
-  opacity: 0.3;
-}
-
-.embla__button__svg {
-  width: 100%;
-  height: 100%;
-}
-
-.embla__button--prev {
-  left: 27px;
-}
-
-.embla__button--next {
-  right: 27px;
-}

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

@@ -98,4 +98,4 @@ p.description {
   justify-content: center;
   align-items: center;
   gap: 10px;
-}
+}

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

@@ -20,7 +20,7 @@ const widget_name = {
   quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
   quote: getMessage('modals.main.settings.sections.quote.title'),
   date: getMessage('modals.main.settings.sections.date.title'),
-  message: getMessage('modals.main.settings.sections.message.title')
+  message: getMessage('modals.main.settings.sections.message.title'),
 };
 
 const SortableItem = sortableElement(({ value }) => (

src/components/modals/main/tabs/Marketplace.jsx

@@ -20,7 +20,7 @@ export default function Marketplace(props) {
       <div label={getMessage('modals.main.marketplace.preset_settings')} name="preset_settings">
         <MarketplaceTab type="preset_settings" />
       </div>
-      <div label='Collections' name="collection">
+      <div label="Collections" name="collection">
         <MarketplaceTab type="collection" />
       </div>
     </Tabs>

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

@@ -145,7 +145,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
       icon = <Advanced />;
       break;
     case 'Collections':
-        icon = <Collections />;
+      icon = <Collections />;
       break;
 
     default:
@@ -160,7 +160,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
 
   return (
     <>
-    {mue === true ? <span className='mainTitle'>Mue</span> : null}
+      {mue === true ? <span className="mainTitle">Mue</span> : null}
       <button className={className} onClick={() => onClick(label)}>
         {icon} <span>{label}</span>
       </button>

src/components/modals/welcome/WelcomeSections.jsx

@@ -121,7 +121,9 @@ export default class WelcomeSections extends PureComponent {
     const intro = (
       <>
         <span className="mainTitle">{this.getMessage('modals.welcome.sections.intro.title')}</span>
-        <p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
+        <span className="subtitle">
+          {this.getMessage('modals.welcome.sections.intro.description')}
+        </span>
         <h3 className="quicktip">#shareyourmue</h3>
         <div className="examples">
           <img
@@ -138,7 +140,7 @@ export default class WelcomeSections extends PureComponent {
         <span className="mainTitle">
           {this.getMessage('modals.welcome.sections.language.title')}
         </span>
-        <p>
+        <span className="subtitle">
           {this.getMessage('modals.welcome.sections.language.description')}{' '}
           <a
             href={variables.constants.TRANSLATIONS_URL}
@@ -149,8 +151,10 @@ export default class WelcomeSections extends PureComponent {
             GitHub
           </a>
           !
-        </p>
-        <Radio name="language" options={languages} category="welcomeLanguage" />
+        </span>
+        <div className="languageSettings">
+          <Radio name="language" options={languages} category="welcomeLanguage" />
+        </div>
       </>
     );
 

src/components/modals/welcome/welcome.scss

@@ -2,76 +2,49 @@
 @import 'scss/variables';
 
 .welcomeContent {
-  height: 100%;
-}
-
-.welcomemodal {
-  position: absolute;
-  margin: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 80vh;
-  width: clamp(70vw, 1200px, 90vw);
-  padding: 0;
-  overflow-x: hidden !important;
-
-  section {
-    width: 50%;
-    display: inline;
-    height: 100%;
+  @include themed() {
+    background-color: t($modal-background);
   }
+  @extend %tabText;
+  height: 80vh;
+  width: clamp(60vw, 1200px, 90vw);
+  display: grid;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+
 
   section:nth-child(1) {
-    float: left;
-    @include themed() {
-      background: t($modal-sidebar);
-    }
     display: flex;
-    justify-content: center;
     align-items: center;
-  }
-
-  section:nth-child(2) {
-    float: right;
+    justify-content: center;
     @include themed() {
-      background: t($modal-background);
+      background-color: t($modal-sidebar);
     }
-    .content {
-      padding: 20px;
-      .mainTitle {
-        font-size: 38px;
-        font-weight: 600;
-        margin-bottom: 15px;
-      }
-    }
-
+  }
+  section:nth-child(2) {
     .buttons {
-      position: absolute;
-      bottom: 2rem;
-      right: 2rem;
+      backdrop-filter: blur(2px);
+      position: sticky;
+      bottom: 0;
+      padding: 25px;
       display: flex;
+      justify-content: flex-end;
       button {
         @include modal-button(standard);
         width: 150px;
       }
     }
-
-    h1 {
-      font-size: 2.5rem;
-    }
-
-    h3.quicktip {
-      text-transform: uppercase;
-      color: #5352ed;
+    .content {
+      display: flex;
+      flex-flow: column;
+      padding: 25px;
     }
   }
 }
 
-.welcomeoverlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
 
 .progressbar {
   position: fixed;
@@ -242,3 +215,15 @@ a.privacy {
     opacity: 1;
   }
 }
+
+.light {
+  .toggle.lightTheme {
+    background-color: rgba(219, 219, 219, 0.72);
+  }
+}
+
+.dark {
+  .toggle.darkTheme {
+    background-color: rgba(65, 71, 84, 0.9);
+  }
+}

src/components/widgets/Widgets.jsx

@@ -32,7 +32,7 @@ export default class Widgets extends PureComponent {
       quote: this.enabled('quote') ? <Quote /> : null,
       date: this.enabled('date') ? <Date /> : null,
       quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks /> : null,
-      message: this.enabled('message') ? <Message /> : null
+      message: this.enabled('message') ? <Message /> : null,
     };
   }
 
@@ -75,14 +75,7 @@ export default class Widgets extends PureComponent {
 
     // allow for re-ordering widgets
     // we have a default to prevent errors
-    let elements = [
-      <Greeting />,
-      <Clock />,
-      <QuickLinks />,
-      <Quote />,
-      <Date />,
-      <Message />
-    ];
+    let elements = [<Greeting />, <Clock />, <QuickLinks />, <Quote />, <Date />, <Message />];
 
     if (this.state.order) {
       elements = [];