chore: run lint and prettier

manifest/background.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-undef */
-if (typeof browser === "undefined") {
+if (typeof browser === 'undefined') {
   var browser = chrome;
 }
 

src/components/Elements/AddModal/AddModal.jsx

@@ -77,4 +77,4 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
 }
 
 const MemoizedAddModal = memo(AddModal);
-export { MemoizedAddModal as default, MemoizedAddModal as AddModal}
+export { MemoizedAddModal as default, MemoizedAddModal as AddModal };

src/components/Elements/AddModal/index.jsx

@@ -1 +1 @@
-export * from './AddModal';
+export * from './AddModal';

src/components/Elements/MainModal/scss/index.scss

@@ -259,11 +259,13 @@ h5 {
     flex-flow: row;
     align-items: center;
     gap: 25px;
+
     svg {
-      @include themed() {
+      @include themed {
         background-image: t($slightGradient);
         box-shadow: t($boxShadow);
       }
+
       padding: 15px;
       border-radius: 100%;
     }

src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss

@@ -4,6 +4,7 @@
 
 .btn-settings {
   @include modal-button(standard);
+
   display: inline;
   margin-top: 0;
   float: none !important;
@@ -12,6 +13,7 @@
 
 .btn-navigation {
   @include modal-button(standard);
+
   padding: 0 15px;
 
   @include themed {
@@ -58,15 +60,11 @@
 }
 
 .btn-collection {
-  display: flex;
-  align-items: center;
-  gap: 15px;
   padding: 1px 12px;
   backdrop-filter: blur(16px) saturate(180%);
   background-color: rgb(255 255 255 / 10%);
   border: 1px solid rgb(209 213 219 / 30%);
   color: #fff;
-
   border-radius: 12px;
   height: 40px;
   font-size: 1rem;
@@ -85,21 +83,21 @@
   }
 
   &:active {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
   }
 
   &:focus {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
   }
 
   &:disabled {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       cursor: not-allowed;
     }

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -22,6 +22,7 @@ p.description {
   .item {
     flex: 1 0 40% !important;
   }
+
   .infoItem {
     display: flex;
     flex-flow: row;
@@ -30,10 +31,11 @@ p.description {
     flex: 1 0 44%;
 
     svg {
-      @include themed() {
+      @include themed {
         background-image: t($slightGradient);
       }
-      -webkit-background-clip: text;
+
+      background-clip: text;
       -webkit-text-fill-color: transparent;
       font-size: 20px;
       border-radius: 100%;
@@ -47,6 +49,7 @@ p.description {
 
   .header {
     text-transform: uppercase;
+
     @include themed {
       color: t($subColor);
     }
@@ -66,7 +69,6 @@ p.description {
   }
 }
 
-
 .showMoreItems {
   display: flex;
   flex-flow: column;
@@ -79,4 +81,4 @@ p.description {
   display: flex;
   flex-flow: column;
   gap: 15px;
-}
+}

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -5,7 +5,7 @@
 
   /* button {
     @include modal-button(standard);
-  }*/
+  } */
 
   @include themed {
     padding: 1rem 3rem 3rem;
@@ -148,6 +148,7 @@ table {
   gap: 25px;
   padding: 25px;
   justify-content: space-between;
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -162,10 +163,11 @@ table {
   }
 
   .icon {
-    @include themed() {
+    @include themed {
       background-image: t($slightGradient);
       box-shadow: t($boxShadow);
     }
+
     padding: 15px;
     border-radius: 100%;
     font-size: 25px;

src/components/Elements/MainModal/scss/settings/_main.scss

@@ -51,7 +51,6 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
-    display: flex;
     flex-flow: column;
 
     @include themed {

src/components/Elements/ShareModal/sharemodal.scss

@@ -86,7 +86,6 @@
     border: none;
     outline: none;
   }
-
 }
 
 .shareHeader {
@@ -94,12 +93,14 @@
   flex-flow: row;
   justify-content: space-between;
   align-items: center;
+
   .close {
     padding: 15px;
     place-items: center;
     display: grid;
     cursor: pointer;
     transition: 0.3s;
+
     @include themed {
       border-radius: t($borderRadius);
     }

src/features/background/api/gradient/setRgba.js

@@ -5,7 +5,7 @@
  */
 export function isValidRGBValue(value) {
   return typeof value === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255;
-};
+}
 
 /**
  * "If the red, green, and blue values are valid, return an object with the red, green, and blue

src/features/background/components/PhotoInformation.jsx

@@ -63,7 +63,9 @@ function PhotoInformation({ info, url, api }) {
   const [other, setOther] = useState(false);
   const [shareModal, openShareModal] = useState(false);
   const [excludeModal, openExcludeModal] = useState(false);
-  const [favouriteTooltipText, setFavouriteTooltipText] = useState(variables.getMessage('widgets.quote.favourite'));
+  const [favouriteTooltipText, setFavouriteTooltipText] = useState(
+    variables.getMessage('widgets.quote.favourite'),
+  );
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -207,11 +209,7 @@ function PhotoInformation({ info, url, api }) {
             <Share onClick={() => openShareModal(true)} />
           </Tooltip>
         )}
-        <Tooltip
+        <Tooltip title={favouriteTooltipText} key="favourite" placement="top">
-          title={favouriteTooltipText}
-          key="favourite"
-          placement="top"
-        >
           <Favourite
             pun={info.pun}
             offline={info.offline}

src/features/background/options/Colour.jsx

@@ -210,7 +210,14 @@ export default class ColourSettings extends PureComponent {
           <div className="colourInput">{gradientInputs}</div>
           {!gradientHasMoreThanOneColour && (
             <>
-              <Button type="settings" onClick={this.addColour} icon={<MdAdd />} label={variables.getMessage('modals.main.settings.sections.background.source.add_colour')} />
+              <Button
+                type="settings"
+                onClick={this.addColour}
+                icon={<MdAdd />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.add_colour',
+                )}
+              />
             </>
           )}
         </>

src/features/background/options/Custom.jsx

@@ -197,8 +197,22 @@ export default class CustomSettings extends PureComponent {
               </div>
             </div>
             <div className="topbarbuttons">
-              <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdOutlineFileUpload />} label={variables.getMessage('modals.main.settings.sections.background.source.upload')} />
+              <Button
-              <Button type="settings" onClick={() => this.setState({ customURLModal: true })} icon={<MdAddLink />} label={variables.getMessage('modals.main.settings.sections.background.source.add_url')} />
+                type="settings"
+                onClick={() => this.uploadCustomBackground()}
+                icon={<MdOutlineFileUpload />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.upload',
+                )}
+              />
+              <Button
+                type="settings"
+                onClick={() => this.setState({ customURLModal: true })}
+                icon={<MdAddLink />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.add_url',
+                )}
+              />
             </div>
           </div>
           <div className="dropzone-content">
@@ -217,7 +231,11 @@ export default class CustomSettings extends PureComponent {
                           'modals.main.settings.sections.background.source.remove',
                         )}
                       >
-                        <Button type="settings" onClick={() => this.modifyCustomBackground('remove', index)} icon={<MdCancel />} />
+                        <Button
+                          type="settings"
+                          onClick={() => this.modifyCustomBackground('remove', index)}
+                          icon={<MdCancel />}
+                        />
                       </Tooltip>
                     )}
                   </div>
@@ -240,7 +258,14 @@ export default class CustomSettings extends PureComponent {
                       },
                     )}
                   </span>
-                  <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdFolder />} label={variables.getMessage('modals.main.settings.sections.background.source.select')} />
+                  <Button
+                    type="settings"
+                    onClick={() => this.uploadCustomBackground()}
+                    icon={<MdFolder />}
+                    label={variables.getMessage(
+                      'modals.main.settings.sections.background.source.select',
+                    )}
+                  />
                 </div>
               </div>
             )}

src/features/greeting/index.jsx

@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Greeting';
+export * from './Greeting';

src/features/greeting/options/index.jsx

@@ -1 +1 @@
-export * from './GreetingOptions';
+export * from './GreetingOptions';

src/features/marketplace/components/Collection/Collection.jsx

@@ -3,51 +3,51 @@ import { Button } from 'components/Elements';
 import variables from 'config/variables';
 
 const Collection = ({ collection, toggle, collectionFunction }) => {
-    const { news, background_colour, img, display_name, description, name } = collection;
+  const { news, background_colour, img, display_name, description, name } = collection;
 
-    const getStyle = () => {
+  const getStyle = () => {
-        if (news) {
+    if (news) {
-            return { backgroundColor: background_colour };
+      return { backgroundColor: background_colour };
-        }
+    }
-        return {
+    return {
-            backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
+      backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
-        };
     };
+  };
 
-    return (
+  return (
-        <div className="collection" style={getStyle()}>
+    <div className="collection" style={getStyle()}>
-            <div className="content">
+      <div className="content">
-                <span className="title">{display_name} using component</span>
+        <span className="title">{display_name} using component</span>
-                <span className="subtitle">{description}</span>
+        <span className="subtitle">{description}</span>
-            </div>
+      </div>
-            {collection.news === true ? (
+      {collection.news === true ? (
-              <a
+        <a
-                className="btn-collection"
+          className="btn-collection"
-                href={collection.news_link}
+          href={collection.news_link}
-                target="_blank"
+          target="_blank"
-                rel="noopener noreferrer"
+          rel="noopener noreferrer"
-              >
+        >
-                {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
+          {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
-              </a>
+        </a>
-            ) : (
+      ) : (
-              <Button
+        <Button
-                type="collection"
+          type="collection"
-                onClick={() => collectionFunction(collection.name)}
+          onClick={() => collectionFunction(collection.name)}
-                icon={<MdOutlineArrowForward />}
+          icon={<MdOutlineArrowForward />}
-                label={variables.getMessage('modals.main.marketplace.explore_collection')}
+          label={variables.getMessage('modals.main.marketplace.explore_collection')}
-                iconPlacement={'right'}
+          iconPlacement={'right'}
-              />
+        />
-            )}
+      )}
-            {/*<Button
+      {/*<Button
                 type="collection"
                 onClick={() => toggle('collection', name)}
                 icon={<MdOutlineArrowForward />}
                 label={variables.getMessage('modals.main.marketplace.explore_collection')}
                 iconPlacement="right"
             />*/}
-        </div>
+    </div>
-    );
+  );
 };
 
 export default Collection;
-export { Collection };
+export { Collection };

src/features/marketplace/components/Collection/index.jsx

@@ -1 +1 @@
-export * from './Collection';
+export * from './Collection';

src/features/marketplace/components/Elements/Carousel/carousel.scss

@@ -22,7 +22,7 @@
 .carousel_container {
   display: flex;
   -webkit-touch-callout: none;
-  -webkit-user-select: none;
+  user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   margin-left: -10px;

src/features/marketplace/components/Elements/Carousel/index.jsx

@@ -1 +1 @@
-export * from './Carousel';
+export * from './Carousel';

src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx

@@ -16,4 +16,4 @@ function Lightbox({ modalClose, img }) {
 
 const MemoizedLightbox = memo(Lightbox);
 export default MemoizedLightbox;
-export { MemoizedLightbox as Lightbox };
+export { MemoizedLightbox as Lightbox };

src/features/marketplace/components/Elements/Lightbox/index.jsx

@@ -1 +1 @@
-export * from './Lightbox';
+export * from './Lightbox';

src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx

@@ -25,4 +25,4 @@ function SideloadFailedModal({ modalClose, reason }) {
 const MemoizedSideloadFailedModal = memo(SideloadFailedModal);
 
 export default MemoizedSideloadFailedModal;
-export { MemoizedSideloadFailedModal as SideloadFailedModal };
+export { MemoizedSideloadFailedModal as SideloadFailedModal };

src/features/marketplace/components/Elements/SideloadFailedModal/index.jsx

@@ -1 +1 @@
-export * from './SideloadFailedModal';
+export * from './SideloadFailedModal';

src/features/marketplace/components/Elements/index.jsx

@@ -1,3 +1,3 @@
 export * from './Carousel';
 export * from './SideloadFailedModal';
-export * from './Lightbox';
+export * from './Lightbox';

src/features/marketplace/components/Items/Item.jsx

@@ -209,7 +209,10 @@ class Item extends PureComponent {
               <span className="title">
                 {variables.getMessage('modals.main.marketplace.product.description')}
               </span>
-              <span className="subtitle" dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
+              <span
+                className="subtitle"
+                dangerouslySetInnerHTML={{ __html: this.props.data.description }}
+              />
             </div>
             <div className="moreInfo">
               {moreInfoItem(

src/features/marketplace/components/index.jsx

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

src/features/marketplace/views/Added.jsx

@@ -25,7 +25,11 @@ export default class Added extends PureComponent {
     };
     this.buttons = {
       uninstall: (
-        <Button type="settings" onClick={() => this.uninstall()} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+        <Button
+          type="settings"
+          onClick={() => this.uninstall()}
+          label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+        />
       ),
     };
   }

src/features/marketplace/views/Create.jsx

@@ -28,7 +28,10 @@ export default class Create extends PureComponent {
               {variables.getMessage('modals.main.addons.create.moved_description')}
             </span>
             <div className="createButtons">
-              <Button type="settings" label={variables.getMessage('modals.main.addons.create.moved_button')} />
+              <Button
+                type="settings"
+                label={variables.getMessage('modals.main.addons.create.moved_button')}
+              />
             </div>
           </div>
         </div>

src/features/message/index.jsx

@@ -1,2 +1,2 @@
 export * from './Message';
-export * from './options';
+export * from './options';

src/features/message/options/MessageOptions.jsx

@@ -105,7 +105,12 @@ class MessageOptions extends PureComponent {
                 </div>
                 <div>
                   <div className="messageAction">
-                    <Button type="settings" onClick={() => this.modifyMessage('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+                    <Button
+                      type="settings"
+                      onClick={() => this.modifyMessage('remove', index)}
+                      icon={<MdCancel />}
+                      label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                    />
                   </div>
                 </div>
               </div>
@@ -136,4 +141,4 @@ class MessageOptions extends PureComponent {
   }
 }
 
-export { MessageOptions as default, MessageOptions };
+export { MessageOptions as default, MessageOptions };

src/features/message/options/index.jsx

@@ -1 +1 @@
-export * from './MessageOptions';
+export * from './MessageOptions';

src/features/misc/sections/Changelog.jsx

@@ -28,7 +28,7 @@ class Changelog extends PureComponent {
     );
 
     return text;
-  }
+  };
 
   async getUpdate() {
     const releases = await fetch(

src/features/misc/sections/Stats.jsx

@@ -14,7 +14,7 @@ import { getLocalisedAchievementData, achievements, checkAchievements } from 'ut
 
 class Stats extends PureComponent {
   constructor() {
-  super();
+    super();
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {},
       achievements,

src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx

@@ -52,12 +52,22 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
       </div>
       <div>
         <div className="messageAction">
-          <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
+          <Button
-          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+            type="settings"
+            onClick={() => startEditLink(item)}
+            icon={<MdEdit />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          />
+          <Button
+            type="settings"
+            onClick={(e) => deleteLink(item.key, e)}
+            icon={<MdCancel />}
+            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+          />
         </div>
       </div>
     </div>
   );
 };
 
-export default QuickLink;
+export default QuickLink;

src/features/navbar/components/Maximise.jsx

@@ -75,7 +75,7 @@ class Maximise extends PureComponent {
         title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
       >
         <button
-        className="navbarButton"
+          className="navbarButton"
           style={{ fontSize: this.props.fontSize }}
           onClick={this.maximise}
           aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}

src/features/quicklinks/QuickLinks.jsx

@@ -120,4 +120,4 @@ class QuickLinks extends PureComponent {
   }
 }
 
-export { QuickLinks as default, QuickLinks };
+export { QuickLinks as default, QuickLinks };

src/features/quicklinks/index.jsx

@@ -1,2 +1,2 @@
 export * from './options';
-export * from './QuickLinks';
+export * from './QuickLinks';

src/features/quicklinks/options/QuickLink.jsx

@@ -52,8 +52,18 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
       </div>
       <div>
         <div className="messageAction">
-        <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
+          <Button
-          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+            type="settings"
+            onClick={() => startEditLink(item)}
+            icon={<MdEdit />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          />
+          <Button
+            type="settings"
+            onClick={(e) => deleteLink(item.key, e)}
+            icon={<MdCancel />}
+            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+          />
         </div>
       </div>
     </div>

src/features/quicklinks/options/index.jsx

@@ -1 +1 @@
-export * from './QuickLinksOptions';
+export * from './QuickLinksOptions';

src/features/quote/options/QuoteOptions.jsx

@@ -169,7 +169,12 @@ class QuoteOptions extends PureComponent {
               subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
             />
             <Action>
-              <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
+              <Button
+                type="settings"
+                onClick={() => this.modifyCustomQuote('add')}
+                icon={<MdAdd />}
+                label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+              />
             </Action>
           </Row>
 
@@ -202,7 +207,14 @@ class QuoteOptions extends PureComponent {
                   </div>
                   <div>
                     <div className="messageAction">
-                      <Button type="settings" onClick={() => this.modifyCustomQuote('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+                      <Button
+                        type="settings"
+                        onClick={() => this.modifyCustomQuote('remove', index)}
+                        icon={<MdCancel />}
+                        label={variables.getMessage(
+                          'modals.main.marketplace.product.buttons.remove',
+                        )}
+                      />
                     </div>
                   </div>
                 </div>
@@ -216,7 +228,12 @@ class QuoteOptions extends PureComponent {
                 <span className="subtitle">
                   {variables.getMessage('modals.main.settings.sections.message.add_some')}
                 </span>
-                <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
+                <Button
+                  type="settings"
+                  onClick={() => this.modifyCustomQuote('add')}
+                  icon={<MdAdd />}
+                  label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+                />
               </div>
             </div>
           )}

src/features/search/index.jsx

@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Search';
+export * from './Search';

src/features/search/options/index.jsx

@@ -1 +1 @@
-export * from './SearchOptions';
+export * from './SearchOptions';

src/features/weather/index.jsx

@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Weather';
+export * from './Weather';

src/features/weather/options/WeatherOptions.jsx

@@ -221,4 +221,4 @@ class WeatherOptions extends PureComponent {
   }
 }
 
-export { WeatherOptions as default, WeatherOptions };
+export { WeatherOptions as default, WeatherOptions };

src/features/weather/options/index.jsx

@@ -1 +1 @@
-export * from './WeatherOptions';
+export * from './WeatherOptions';

src/features/weather/weather.scss

@@ -76,18 +76,21 @@
   flex-flow: row;
   width: 100%;
   justify-content: space-between;
+
   svg {
     font-size: 2em !important;
   }
+
   span {
     font-size: 34px;
   }
 }
 
 .weatherExpandedInfo {
-  padding: 0 25px 25px 25px;
+  padding: 0 25px 25px;
   text-align: left;
-  @include themed() {
+
+  @include themed {
     border-top: 1px solid t($btn-backgroundHover);
   }
 }

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

@@ -28,4 +28,4 @@ function ProgressBar({ numberOfTabs, currentTab, switchTab }) {
 const MemoizedProgressBar = memo(ProgressBar);
 
 export default MemoizedProgressBar;
-export { MemoizedProgressBar as ProgressBar };
+export { MemoizedProgressBar as ProgressBar };

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

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

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

@@ -1,7 +1,5 @@
 const Content = ({ children }) => {
-    return (
+  return <div className="content">{children}</div>;
-        <div className="content">{children}</div>
+};
-    )
-}
 
-export { Content as default, Content };
+export { Content as default, Content };

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

@@ -2,9 +2,7 @@ function Header({ title, subtitle }) {
   return (
     <>
       <span className="mainTitle">{title}</span>
-      <span className="subtitle">
+      <span className="subtitle">{subtitle}</span>
-        {subtitle}
-      </span>
     </>
   );
 }

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

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

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

@@ -1,7 +1,3 @@
-const Panel = ({ children, type }) => (
+const Panel = ({ children, type }) => <section className={type}>{children}</section>;
-  <section className={type}>
-    {children}
-  </section>
-);
 
 export { Panel as default, Panel };

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

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

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

@@ -1,4 +1,4 @@
 export * from './Wrapper';
 export * from './Panel';
 export * from './Header';
-export * from './Content';
+export * from './Content';

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

@@ -4,4 +4,4 @@ export * from './ImportSettings';
 export * from './ThemeSelection';
 export * from './StyleSelection';
 export * from './PrivacyOptions';
-export * from './Final';
+export * from './Final';

src/features/welcome/components/index.jsx

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

src/features/welcome/welcome.scss

@@ -1,4 +1,4 @@
-@import '../../scss/index.scss';
+@import '../../scss/index';
 @import 'scss/variables';
 
 .welcomemodal {
@@ -92,13 +92,16 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
+
   div:nth-child(1) {
     grid-column: span 1 / span 1 !important;
   }
+
   div:nth-child(2),
   div:nth-child(3) {
     grid-column: span 1 / span 1 !important;
   }
+
   @include themed {
     .active {
       background: t($modal-sidebarActive);

src/scss/_variables.scss

@@ -68,7 +68,7 @@ $themes: (
     'modal-sidebarActive': rgb(219 219 219 / 72%),
     'modal-secondaryColour': #fafafa,
     'link': #5352ed,
-    'slightGradient': linear-gradient(#ffffff, #dddddd),
+    'slightGradient': linear-gradient(#fff, #ddd),
   ),
   dark: (
     'weather': #e7e7e7,

src/scss/index.scss

@@ -133,7 +133,7 @@ body {
   a {
     border: 0;
     border-radius: 12px;
-    padding: 10px 30px 10px 30px;
+    padding: 10px 30px;
     font-size: 1rem;
     display: flex;
     align-items: center;
@@ -150,7 +150,7 @@ body {
 @media (prefers-color-scheme: dark) {
   /** {
     background-color: #000000 !important;
-  }*/
+  } */
 
   .criticalError {
     .criticalError-message {
@@ -158,7 +158,7 @@ body {
     }
 
     p {
-      color: rgba(255, 255, 255, 0.7529411765);
+      color: rgb(255 255 255 / 75.3%);
     }
 
     a {
@@ -175,7 +175,7 @@ body {
 
 @media (prefers-color-scheme: light) {
   * {
-    background-color: #ffffff !important;
+    background-color: #fff !important;
   }
 
   .criticalError {
@@ -184,7 +184,7 @@ body {
     }
 
     p {
-      color: rgba(0, 0, 0, 0.7529411765);
+      color: rgb(0 0 0 / 75.3%);
     }
 
     a {

src/utils/links/index.js

@@ -1,4 +1,4 @@
-import { getTitleFromUrl } from "./getTitleFromUrl";
+import { getTitleFromUrl } from './getTitleFromUrl';
-import { isValidUrl } from "./isValidUrl";
+import { isValidUrl } from './isValidUrl';
 
-export { getTitleFromUrl, isValidUrl };
+export { getTitleFromUrl, isValidUrl };

src/utils/settings/load.js

@@ -1,5 +1,5 @@
-import variables from "config/variables";
+import variables from 'config/variables';
-import ExperimentalInit from "utils/experimental";
+import ExperimentalInit from 'utils/experimental';
 
 /**
  * It loads the settings from localStorage and applies them to the page.

src/utils/settings/move.js

@@ -1,4 +1,4 @@
-import { setDefaultSettings } from "./default";
+import { setDefaultSettings } from './default';
 
 /**
  * Saves all of the current settings, resets them, sets the defaults and then overrides