chore: improve lint, run prettier, alex added fade-in thing on navbar

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  extends: 'react-app',
+  extends: ['react-app', 'prettier'],
-  parser: '@babel/eslint-parser',
+  ignorePatterns: ['node_modules/', 'build/', 'coverage/', '*.scss', '*.css', '*.json'],
 };

.stylelintrc.json

@@ -1,3 +1,10 @@
 {
-  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
+  "formatter": "stylelint-checkstyle-formatter",
+  "plugins": ["stylelint-scss"],
+  "customSyntax": "postcss-scss",
+  "rules": {
+    "selector-class-pattern": null,
+    "no-descending-specificity": null
+  }
 }

package.json

@@ -38,34 +38,29 @@
     "@eartharoid/deep-merge": "^0.0.2",
     "@vitejs/plugin-react": "3.1.0",
     "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.3",
+    "postcss-scss": "^4.0.6",
     "prettier": "^2.8.4",
     "sass": "^1.59.2",
     "stylelint": "^15.2.0",
+    "stylelint-checkstyle-formatter": "^0.1.2",
     "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-scss": "^4.4.0",
     "vite": "4.1.4"
   },
   "scripts": {
     "dev": "vite",
-    "updatetranslations": "cd scripts && node updatetranslations.js",
+    "dev:host": "vite --host",
+    "translations": "cd scripts && node updatetranslations.js",
     "build": "vite build",
-    "chrome": "cp manifest/chrome.json dist/manifest.json && cp -r manifest/_locales dist/_locales && cp manifest/background-chrome.js dist/background-chrome.js",
+    "prepare:chrome": "cp manifest/chrome.json dist/manifest.json && cp -r manifest/_locales dist/_locales && cp manifest/background-chrome.js dist/background-chrome.js",
-    "firefox": "rm -rf dist/_locales && cp manifest/firefox.json dist/manifest.json",
+    "prepare:firefox": "rm -rf dist/_locales && cp manifest/firefox.json dist/manifest.json",
-    "pretty": "prettier --write \"./**/*.{js,jsx,json,scss}\"",
+    "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"",
-    "stylelint": "npx stylelint \"**/*.scss\"",
+    "lint": "eslint --ext .js,.jsx src/** && stylelint \"**/*.scss\"",
+    "lint:fix": "eslint --ext .js,.jsx src/** --fix && stylelint \"**/*.scss\" --fix",
     "postinstall": "husky install"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version"
-    ]
   }
 }

src/components/helpers/autocomplete/autocomplete.scss

@@ -2,6 +2,7 @@
 
 .suggestions {
   @extend %basic;
+
   text-align: left;
   border-top-width: 0;
   list-style: none;
@@ -16,7 +17,7 @@
     font-size: 0.6em;
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.8);
+      background-color: rgb(255 255 255 / 80%);
       cursor: pointer;
     }
   }
@@ -29,16 +30,16 @@
 }
 
 .dark .suggestions {
-  background: rgba(0, 0, 0, 0.7);
+  background: rgb(0 0 0 / 70%);
   color: white;
 
   li {
     &:hover {
-      background: rgba(0, 0, 0, 0.7);
+      background: rgb(0 0 0 / 70%);
     }
   }
 }
 
 .micActive {
-  box-shadow: 0px 0px 50px 1px #e74c3c !important;
+  box-shadow: 0 0 50px 1px #e74c3c !important;
 }

src/components/helpers/carousel/carousel.scss

@@ -7,21 +7,23 @@
 .carousel_viewport {
   overflow: hidden;
   width: 100%;
+
   &.is-draggable {
     cursor: move;
     cursor: grab;
   }
+
   &.is-dragging {
     cursor: grabbing;
   }
-    border-radius: 15px !important;
+
+  border-radius: 15px !important;
 }
 
 .carousel_container {
   display: flex;
-  user-select: none;
   -webkit-touch-callout: none;
-  -khtml-user-select: none;
+  user-select: none;
   -webkit-tap-highlight-color: transparent;
   margin-left: -10px;
 }
@@ -30,6 +32,7 @@
   position: relative;
   min-width: 100%;
   padding-left: 10px;
+
   img {
     position: absolute;
     display: block;
@@ -65,13 +68,16 @@
   justify-content: center;
   align-items: center;
   padding: 0;
+
   &:disabled {
     cursor: default;
     opacity: 0.3;
   }
+
   &.prev {
     left: 27px;
   }
+
   &.next {
     right: 27px;
   }

src/components/helpers/preview/preview.scss

@@ -2,6 +2,7 @@
 
 .preview-mode {
   @extend %basic;
+
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -17,6 +18,7 @@
 
   button {
     @include basicIconButton(10px, 14px, ui);
+
     gap: 20px;
   }
 }

src/components/helpers/sharemodal/ShareModal.jsx

@@ -55,7 +55,9 @@ function ShareModal({ modalClose, data }) {
         <Tooltip title="Facebook">
           <button
             onClick={() =>
-              window.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank').focus()
+              window
+                .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+                .focus()
             }
           >
             <FaFacebookF />

src/components/helpers/sharemodal/sharemodal.scss

@@ -2,52 +2,62 @@
 
 .smallModal {
   @extend %tabText;
+
   display: flex;
   flex-flow: column;
   gap: 15px;
   padding: 15px;
   width: 320px;
-  @include themed() {
+  @include themed {
     background: t($modal-secondaryColour);
   }
+
   .resetFooter {
     display: flex;
     flex-flow: row;
     justify-content: flex-end;
     gap: 20px;
+
     button {
       gap: 20px;
       display: flex;
       flex-flow: row;
     }
   }
+
   .textButton {
     @include basicIconButton(11px, 1.3rem, modal-text);
+
     border: none !important;
   }
+
   .tooltipTitle {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebar);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
       color: t($color);
     }
   }
+
   .buttons {
     justify-content: space-between;
     display: flex;
     gap: 15px;
   }
+
   button {
     place-items: center;
     display: grid;
     @include basicIconButton(11px, 1.3rem, modal);
   }
+
   .copy {
     display: flex;
     flex-flow: row;
     gap: 15px;
+
     input[type='text'] {
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
         box-shadow: 0 0 0 1px t($modal-sidebarActive);
@@ -55,12 +65,14 @@
         flex: 1;
         color: t($color);
       }
+
       border: none;
       outline: none;
     }
   }
+
   input[type='text'] {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebar);
       border-radius: t($borderRadius);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
@@ -68,16 +80,19 @@
       flex: 1;
       color: t($color);
     }
+
     border: none;
     outline: none;
   }
+
   .close {
     padding: 15px;
     place-items: center;
     display: grid;
     cursor: pointer;
+
     &:hover {
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
       }

src/components/helpers/tooltip/tooltip.scss

@@ -12,22 +12,24 @@
   }
 
   100% {
-    transform: translate(0, -0px);
+    transform: translate(0, -0);
     opacity: 1;
   }
 }
 
 .tooltipTitle {
   @extend %basic;
+
   text-align: center;
   font-size: 0.6rem;
   padding: 5px 10px;
   position: absolute;
   z-index: 1;
-  /*top: 100%;
+
+  /* top: 100%;
   left: 50%;
   margin-top: 15px;
-  margin-left: -30px;*/
+  margin-left: -30px; */
   cursor: initial;
   user-select: none;
   opacity: 1;
@@ -38,7 +40,7 @@
 
 #modal {
   .tooltipTitle {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebar);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
       color: t($color);
@@ -52,20 +54,23 @@
   }
 }
 
-.tooltipTitle:before {
+.tooltipTitle::before {
   transform: scale3d(0.2, 0.2, 1);
   transition: all 0.2s ease-in-out;
 }
-.tooltipTitle:after {
+
+.tooltipTitle::after {
   transform: translate3d(0, 6px, 0);
   transition: all 0.1s ease-in-out;
 }
-.tooltipTitle:hover:before,
+
-.tooltipTitle:hover:after {
+.tooltipTitle:hover::before,
+.tooltipTitle:hover::after {
   opacity: 1;
   transform: scale3d(1, 1, 1);
 }
-.tooltipTitle:hover:after {
+
+.tooltipTitle:hover::after {
   transition: all 0.2s 0.1s ease-in-out;
 }
 
@@ -80,10 +85,12 @@
 .infoTooltip {
   position: relative;
   display: grid;
+
   svg {
     cursor: pointer;
+
     &:hover {
-      @include themed() {
+      @include themed {
         color: t($color);
       }
     }
@@ -92,7 +99,6 @@
 
 .infoTooltipTitle {
   min-width: 200px;
-  text-align: center;
   position: absolute;
   z-index: 1;
   cursor: initial;
@@ -104,30 +110,34 @@
   justify-content: center;
   flex-flow: column;
   gap: 10px;
-  @include themed() {
+  @include themed {
     background-color: t($modal-background);
     border-radius: t($borderRadius);
     box-shadow: 0 0 0 1px t($modal-sidebarActive);
   }
+
   .tooltipHeader {
     display: flex;
     flex-flow: row;
     align-items: center;
     gap: 25px;
   }
+
   .link {
     display: flex;
     gap: 10px;
     align-items: center;
   }
+
   .close {
     font-size: 20px;
     padding: 15px;
     place-items: center;
     display: grid;
     cursor: pointer;
+
     &:hover {
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
       }

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

@@ -164,12 +164,14 @@ export default class Item extends PureComponent {
                       <th>{variables.getMessage('modals.main.marketplace.product.setting')}</th>
                       <th>{variables.getMessage('modals.main.marketplace.product.value')}</th>
                     </tr>
-                    {Object.entries(this.props.data.data.settings).slice(0, this.state.count).map(([key, value]) => (
+                    {Object.entries(this.props.data.data.settings)
-                      <tr key={key}>
+                      .slice(0, this.state.count)
-                        <td>{key}</td>
+                      .map(([key, value]) => (
-                        <td>{value}</td>
+                        <tr key={key}>
-                      </tr>
+                          <td>{key}</td>
-                    ))}
+                          <td>{value}</td>
+                        </tr>
+                      ))}
                   </tbody>
                 </table>
                 <div className="showMoreItems">
@@ -270,7 +272,14 @@ export default class Item extends PureComponent {
               </div>
             </div>
           </div>
-          <div className="itemInfo" style={{ backgroundImage: `url("${variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url}")` }}>
+          <div
+            className="itemInfo"
+            style={{
+              backgroundImage: `url("${
+                variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url
+              }")`,
+            }}
+          >
             <div className="front">
               <img
                 className="icon"
@@ -293,7 +302,7 @@ export default class Item extends PureComponent {
                     onClick={() =>
                       window.open(
                         variables.constants.REPORT_ITEM +
-                        this.props.data.display_name.split(' ').join('+'),
+                          this.props.data.display_name.split(' ').join('+'),
                         '_blank',
                       )
                     }

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

@@ -77,17 +77,20 @@ function Items({
               />
               <div className="card-details">
                 <span className="card-title">{item.display_name || item.name}</span>
-                <span className="card-subtitle">{variables.getMessage('modals.main.marketplace.by', { author: item.author })}</span>
+                <span className="card-subtitle">
-                {
+                  {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
-                  type === 'all' && !onCollection
+                </span>
-                    ? <span className="card-type">
+                {type === 'all' && !onCollection ? (
-                      {variables.getMessage(`modals.main.addons.create.types.${item.type.split('_')[0] === "preset"
+                  <span className="card-type">
-                          ? "settings"
+                    {variables.getMessage(
+                      `modals.main.addons.create.types.${
+                        item.type.split('_')[0] === 'preset'
+                          ? 'settings'
                           : item.type.split('_')[0] + 's'
-                        }`)}
+                      }`,
-                    </span>
+                    )}
-                    : null
+                  </span>
-                  }
+                ) : null}
               </div>
             </div>
           ))}

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

@@ -24,16 +24,16 @@
 }
 
 .Modal {
-  @include themed() {
+  @include themed {
     color: t($color);
   }
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+
+  box-shadow: 0 0 20px rgb(0 0 0 / 30%);
   opacity: 1;
   z-index: -2;
   transition-timing-function: ease-in;
   border-radius: map-get($modal, 'border-radius');
   user-select: none;
-
   overflow-y: auto;
   transform: scale(0);
   transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
@@ -55,11 +55,13 @@
   padding: 0.5em;
   border-radius: 12px;
   cursor: pointer;
+
   svg {
     font-size: 2em;
   }
+
   &:hover {
-    background: rgba(121, 121, 121, 0.226);
+    background: rgb(121 121 121 / 22.6%);
   }
 }
 
@@ -82,7 +84,7 @@
 #modal {
   height: 80vh;
   width: clamp(60vw, 1200px, 90vw);
-  @include themed() {
+  @include themed {
     background-color: t($modal-background);
   }
 }
@@ -118,23 +120,23 @@ h5 {
   display: inline-block;
   width: 50px;
   height: 50px;
-  @include themed() {
+  @include themed {
     border: 3px solid t($modal-sidebar);
     border-radius: 50%;
     border-top-color: t($modal-sidebarActive);
   }
+
   animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
 }
 
 @keyframes spin {
   to {
-    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
-@-webkit-keyframes spin {
+@keyframes spin {
   to {
-    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -143,14 +145,17 @@ h5 {
   flex-flow: column;
   gap: -1px;
   padding: 10px 0;
+
   div:nth-child(1) {
     display: flex;
     flex-flow: column;
     gap: 10px;
   }
+
   form {
     margin-top: 10px;
   }
+
   .link {
     display: flex;
     flex-flow: row;
@@ -169,20 +174,24 @@ h5 {
 
 .languageSettings {
   margin-bottom: 15px;
+
   .MuiFormGroup-root {
     gap: 5px;
   }
+
   .MuiFormControl-root {
     width: 100% !important;
     gap: 15px;
+
     .MuiFormControlLabel-root {
       display: flex;
       flex-direction: row-reverse;
       justify-content: space-between;
       padding: 5px 5px 5px 20px;
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
+
         &:hover {
           background: t($modal-sidebarActive);
         }
@@ -195,7 +204,8 @@ h5 {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 15px 0 15px 0;
+  padding: 15px 0;
+
   .link {
     display: flex;
     flex-flow: row;
@@ -212,27 +222,32 @@ h5 {
   padding: 25px;
   margin-top: 20px;
   transition: 0.5s;
-  @include themed() {
+  @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
     box-shadow: 0 0 0 1px t($modal-sidebarActive);
+
     &:hover {
       background: t($modal-sidebarActive);
     }
   }
+
   svg {
     font-size: 20px;
   }
+
   .left {
     display: flex;
     flex-flow: row;
     align-items: center;
     gap: 25px;
   }
+
   .content {
     display: flex;
     flex-flow: column;
   }
+
   .action {
     display: flex;
     flex-flow: row;
@@ -248,20 +263,24 @@ h5 {
   bottom: 0;
   padding: 15px;
   gap: 15px;
-  @include themed() {
+  @include themed {
     background-color: t($modal-secondaryColour);
     border-radius: t($borderRadius);
     border: 1px solid t($modal-sidebarActive);
   }
+
   button {
     @include basicIconButton(5px, 5px, modal);
+
     display: flex;
     justify-content: center;
     gap: 15px;
+
     svg {
       margin: 0 !important;
     }
   }
+
   svg {
     margin: 0 !important;
   }
@@ -274,38 +293,43 @@ h5 {
   flex-flow: column;
   gap: 5px;
   align-items: center;
+
   div {
     display: flex;
     flex-flow: row;
   }
+
   .text {
     display: flex;
     flex-flow: column;
     padding: 5px;
   }
+
   .skeletonAuthor {
     font-size: smaller;
-    padding: 5px;
     display: flex;
     flex-flow: row;
     align-items: center;
     gap: 25px;
     padding: 0 20px 0 5px;
+
     svg {
-      @include themed() {
+      @include themed {
         background-color: t($modal-sidebar);
         padding: 10px;
         border-radius: t($borderRadius);
         place-items: center;
       }
     }
-    @include themed() {
+    @include themed {
       background-color: t($modal-sidebarActive);
       border-radius: t($borderRadius);
     }
+
     .title {
       font-size: medium !important;
     }
+
     .subtitle {
       font-size: smaller !important;
     }
@@ -317,6 +341,7 @@ h5 {
     display: flex;
     flex-flow: row;
     gap: 5px;
+
     div {
       margin-top: 10px;
       padding: 3px;
@@ -325,7 +350,7 @@ h5 {
       border-radius: 100%;
       display: grid;
       place-items: center;
-      @include themed() {
+      @include themed {
         background-color: t($modal-sidebarActive);
       }
     }

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

@@ -45,7 +45,6 @@
     }
 
     .item-back {
-      filter: blur(60px) saturate(180%) brightness(90%);
       filter: blur(60px) saturate(180%) brightness(90%);
       position: absolute;
       object-fit: cover !important;
@@ -149,7 +148,6 @@
       box-sizing: border-box !important;
       border-radius: 12px 12px 0 0;
       backdrop-filter: blur(40px) saturate(150%) brightness(75%);
-      backdrop-filter: blur(40px) saturate(150%) brightness(75%);
       @include themed {
         background-image: linear-gradient(to bottom, transparent, t($modal-background));
       }
@@ -335,9 +333,11 @@ p.author {
 .flexTopMarketplace {
   display: flex;
   margin-bottom: 15px;
+
   .tooltip {
     margin-right: 25px;
   }
+
   .mainTitle {
     margin-bottom: 0 !important;
   }
@@ -422,7 +422,6 @@ p.author {
     border-radius: 150px;
     padding: 1px 12px;
     backdrop-filter: blur(16px) saturate(180%);
-    backdrop-filter: blur(16px) saturate(180%);
     background-color: rgb(255 255 255 / 10%);
     border: 1px solid rgb(209 213 219 / 30%);
     color: #fff;
@@ -451,13 +450,11 @@ p.author {
     gap: 15px;
     padding: 1px 12px;
     backdrop-filter: blur(16px) saturate(180%) !important;
-    backdrop-filter: blur(16px) saturate(180%) !important;
     background-color: rgb(255 255 255 / 10%) !important;
     border: 1px solid rgb(209 213 219 / 30%) !important;
     color: #fff !important;
 
     &:hover {
-      backdrop-filter: blur(16px) saturate(180%) !important;
       backdrop-filter: blur(16px) saturate(180%) !important;
       background-color: rgb(17 25 40 / 20%) !important;
       border: 1px solid rgb(255 255 255 / 12.5%) !important;
@@ -507,13 +504,11 @@ p.author {
     gap: 15px;
     padding: 1px 12px;
     backdrop-filter: blur(16px) saturate(180%);
-    backdrop-filter: blur(16px) saturate(180%);
     background-color: rgb(255 255 255 / 10%);
     border: 1px solid rgb(209 213 219 / 30%);
     color: #fff;
 
     &:hover {
-      backdrop-filter: blur(16px) saturate(180%);
       backdrop-filter: blur(16px) saturate(180%);
       background-color: rgb(17 25 40 / 20%);
       border: 1px solid rgb(255 255 255 / 12.5%);

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

@@ -28,9 +28,9 @@ p.description {
     flex: 1 0 40% !important;
   }
 
-  @include themed() {
+  @include themed {
     background: t($modal-sidebar);
-    box-shadow: t(boxShadow);
+    box-shadow: t(boxshadow);
     border-radius: t($borderRadius);
     padding: 15px;
 
@@ -67,7 +67,7 @@ p.description {
   font-size: 38px;
   font-weight: 600;
 
-  @include themed() {
+  @include themed {
     color: t($color);
   }
 }
@@ -85,7 +85,7 @@ p.description {
   transition: 0.5s;
   cursor: pointer;
 
-  @include themed() {
+  @include themed {
     &:hover {
       color: t($subColor);
     }

src/components/modals/main/scss/modules/_navbar.scss

@@ -1,15 +1,17 @@
 .navbar-item {
   flex-flow: row !important;
-  padding: 0 15px 0 15px;
+  padding: 0 15px;
-  @include themed() {
+  @include themed {
     background: t($modal-secondaryColour) !important;
     border-radius: t($borderRadius) !important;
     box-shadow: t($boxShadow) !important;
-    border: 0px !important;
+    border: 0 !important;
+
     &:hover {
       background: t($modal-sidebarActive) !important;
     }
   }
+
   &:hover {
     svg {
       background: var(--tab-active);
@@ -50,7 +52,7 @@
 }
 
 .navbar-item-active {
-  @include themed() {
+  @include themed {
     background: t($modal-sidebarActive) !important;
   }
 }

src/components/modals/main/scss/modules/_scrollbars.scss

@@ -4,14 +4,15 @@
   width: 6px;
   height: 6px;
   border-radius: 12px;
-  @include themed() {
+  @include themed {
     background: t($modal-sidebar);
   }
 }
 
 ::-webkit-scrollbar-thumb {
-  @include themed() {
+  @include themed {
     background: t($modal-sidebarActive);
   }
+
   border-radius: 12px;
 }

src/components/modals/main/scss/modules/_sidebar.scss

@@ -1,7 +1,7 @@
 @import '../.../../../../../././../scss/variables';
 
 .sidebar {
-  @include themed() {
+  @include themed {
     top: 0;
     left: 0;
     position: sticky;
@@ -32,7 +32,7 @@
     hr {
       height: 1px;
       background: #ccc;
-      margin: 0 1.75rem 0 1.75rem;
+      margin: 0 1.75rem;
       border: none;
     }
 

src/components/modals/main/scss/modules/_tab-content.scss

@@ -4,24 +4,27 @@
   button {
     @include modal-button(standard);
   }
-  @include themed() {
+  @include themed {
-    padding: 1rem 3rem 3rem 3rem;
+    padding: 1rem 3rem 3rem;
     display: flex;
     flex-direction: column;
     width: 100%;
     background: t($modal-background);
     @extend %tabText;
+
     hr {
       width: 100%;
-      background: rgba(196, 196, 196, 0.74);
+      background: rgb(196 196 196 / 74%);
       outline: none;
     }
+
     .settingsRow {
       display: flex;
       align-items: center;
       min-height: 100px;
       justify-content: space-between;
-      /*border-top: 1px solid #ccc;*/
+
+      /* border-top: 1px solid #ccc; */
       border-bottom: 1px solid #ccc;
       padding-top: 1rem;
       padding-bottom: 1rem;
@@ -29,16 +32,19 @@
       &.settingsNoBorder {
         border-bottom: none;
       }
+
       .content {
         display: flex;
         flex-flow: column;
         max-width: 50%;
       }
+
       .action {
         display: flex;
         flex-flow: column;
         align-items: flex-end;
         width: 300px;
+
         button {
           margin-top: 10px;
           width: 283px;
@@ -49,12 +55,10 @@
 }
 
 .activityButtons {
-  flex-wrap: wrap !important;
   justify-content: space-between !important;
   align-items: flex-end !important;
   align-content: space-between !important;
-  flex-wrap: wrap !important;
+  flex-flow: row wrap !important;
-  flex-direction: row !important;
 
   button:not(:first-child) {
     width: 40% !important;
@@ -69,18 +73,22 @@
 
 table {
   border-collapse: separate;
-  @include themed() {
+  @include themed {
     border-radius: t($borderRadius);
     margin-top: 20px;
+
     tr:first-child {
       background: t($modal-sidebarActive);
+
       th {
         padding: 1rem;
       }
     }
+
     td {
       padding: 15px;
     }
+
     tr {
       th:last-child {
         display: grid;
@@ -94,6 +102,7 @@ table {
 
     tr:not(:first-child) {
       background: t($modal-sidebar);
+
       textarea {
         width: 90%;
         margin: 10px;
@@ -105,9 +114,11 @@ table {
 
 .donateButton {
   @include modal-button(standard);
+
   flex-flow: row !important;
   text-decoration: none;
   height: auto !important;
+
   svg {
     font-size: 1.5rem !important;
   }
@@ -116,6 +127,7 @@ table {
 .flexGrow {
   flex-grow: 1;
 }
+
 .messageMap {
   display: flex;
   flex-flow: row;
@@ -123,42 +135,48 @@ table {
   gap: 25px;
   padding: 25px;
   justify-content: space-between;
+
   div:nth-child(1) {
     display: flex;
     flex-flow: row;
     gap: 25px;
     align-items: center;
   }
+
   .icon {
     border-radius: 100%;
     display: grid;
     place-items: center;
     padding: 15px;
     font-size: 25px;
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
     }
   }
+
   .messageText {
     display: flex;
     flex-flow: column;
     flex-grow: 3;
+
     textarea {
-      @include themed() {
+      @include themed {
         color: t($color);
       }
     }
+
     .subtitle {
-      @include themed() {
+      @include themed {
         color: t($subColor);
         font-size: 13px;
       }
     }
   }
+
   .messageAction {
     float: right;
   }
-  @include themed() {
+  @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
   }

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

@@ -14,10 +14,10 @@ input {
     width: 30px;
     border: none;
     outline: none;
-    -webkit-appearance: none;
+    appearance: none;
     vertical-align: middle;
     background: none;
-    @include themed() {
+    @include themed {
       border: t($modal-sidebarActive) 1px solid;
     }
 
@@ -38,7 +38,7 @@ input {
     width: 30px;
     border: none;
     outline: none;
-    -moz-appearance: none;
+    appearance: none;
     vertical-align: middle;
     background: none;
 
@@ -55,11 +55,12 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
-    @include themed() {
+    @include themed {
       background: t($modal-sidebar);
       border: 3px solid t($modal-sidebarActive);
       color: t($color);
     }
+
     padding: 15px 20px;
     border-radius: 4px;
     display: flex !important;
@@ -86,8 +87,9 @@ h4 {
   height: 400px;
   display: grid;
   place-items: center;
+
   button {
-    padding: 0 20px 0 20px;
+    padding: 0 20px;
   }
 }
 
@@ -97,29 +99,34 @@ h4 {
   flex-flow: row;
   justify-content: space-between;
   align-items: center;
+
   div:nth-child(1) {
     display: flex;
     flex-flow: row;
     align-items: center;
     gap: 20px;
+
     svg {
       font-size: 30px;
-      @include themed() {
+      @include themed {
         color: t($subColor);
       }
     }
+
     div {
       display: flex;
       flex-flow: column;
     }
   }
+
   .topbarbuttons {
     display: flex;
     flex-flow: row;
     gap: 25px;
   }
+
   button {
-    padding: 0 20px 0 20px;
+    padding: 0 20px;
   }
 }
 
@@ -130,17 +137,21 @@ h4 {
   column-gap: 45px;
   row-gap: 100px;
   padding-top: 45px;
+
   .leftPanel {
     grid-area: 1 / 1 / 3 / 3;
   }
+
   .rightPanel {
     grid-area: 1 / 3 / 4 / 4;
     display: flex;
     flex-flow: column;
     gap: 10px;
+
     .subtitle {
       text-transform: capitalize;
     }
+
     span {
       font-size: 20px;
     }
@@ -162,10 +173,12 @@ h4 {
     svg {
       font-size: 2em;
     }
+
     &:hover {
-      background: rgba(121, 121, 121, 0.226);
+      background: rgb(121 121 121 / 22.6%);
     }
   }
+
   .returnButton {
     display: grid;
     place-items: center;
@@ -174,11 +187,13 @@ h4 {
     border-radius: 12px;
     cursor: pointer;
     margin-right: 25px;
+
     svg {
       font-size: 2em;
     }
+
     &:hover {
-      background: rgba(121, 121, 121, 0.226);
+      background: rgb(121 121 121 / 22.6%);
     }
   }
 }
@@ -191,20 +206,21 @@ h4 {
 }
 
 .achievement {
-  padding: 20px 10px 20px 10px;
+  padding: 20px 10px;
   display: flex;
   flex-flow: row !important;
   align-items: center;
-  @include themed() {
+  @include themed {
     background: t($modal-sidebarActive);
     border-radius: t($borderRadius);
     gap: 10px;
   }
+
   svg {
     font-size: 20px !important;
     padding: 15px;
     border-radius: 100%;
-    @include themed() {
+    @include themed {
       background: t($modal-sidebar);
     }
   }
@@ -212,10 +228,11 @@ h4 {
 
 .statSection.rightPanel {
   padding: 25px;
-  @include themed() {
+  @include themed {
     border-radius: t($borderRadius);
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
+
     svg {
       font-size: 50px;
       color: t($subColor);
@@ -226,6 +243,7 @@ h4 {
 .achievementContent {
   display: flex;
   flex-flow: column;
+
   span {
     font-size: 15px;
   }
@@ -233,4 +251,4 @@ h4 {
 
 .customcss {
   color: orange !important;
-}
+}

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -12,7 +12,7 @@
 .aboutLink,
 .MuiSlider-colorPrimary,
 legend {
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
 }
@@ -22,19 +22,19 @@ legend {
 }
 
 .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
-  @include themed() {
+  @include themed {
     background-color: t($subColor) !important;
   }
 }
 
 .MuiSwitch-track {
-  @include themed() {
+  @include themed {
     background-color: t($subColor) !important;
   }
 }
 
 .MuiIconButton-label > svg.MuiSvgIcon-root {
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
 }
@@ -48,7 +48,7 @@ legend {
 }
 
 .checkbox svg {
-  @include themed() {
+  @include themed {
     fill: t($color) !important;
   }
 }
@@ -68,13 +68,13 @@ legend {
 }
 
 .MuiOutlinedInput-notchedOutline {
-  @include themed() {
+  @include themed {
     border-color: t($color) !important;
   }
 }
 
 .MuiFormLabel-root-MuiInputLabel-root {
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
 }
@@ -87,20 +87,20 @@ legend {
 .Mui-focused,
 legend,
 .MuiOutlinedInput-input {
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
 }
 
 .MuiMenu-list {
-  @include themed() {
+  @include themed {
     background-color: t($modal-background);
     color: t($color);
   }
 }
 
 .Mui-selected {
-  @include themed() {
+  @include themed {
     background-color: t($modal-sidebarActive) !important;
   }
 }
@@ -121,13 +121,13 @@ legend,
 }
 
 .MuiPaper-root {
-  @include themed() {
+  @include themed {
     background-color: t($modal-background) !important;
   }
 }
 
 .MuiSlider-valueLabel {
-  @include themed() {
+  @include themed {
     background-color: t($modal-sidebarActive) !important;
   }
 }
@@ -145,14 +145,16 @@ legend,
     width: 100%;
     margin-left: 0;
   }
+
   .MuiFormControlLabel-root {
     width: 100%;
   }
 }
 
 .css-6od3lo-MuiChip-label {
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
+
   text-transform: capitalize;
 }

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -15,6 +15,7 @@
   flex-flow: row;
   display: flex;
   gap: 15px;
+
   a {
     @include basicIconButton(11px, 1.2rem, modal);
   }
@@ -24,10 +25,11 @@
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
+
   img {
     width: 75px;
     height: auto;
-    @include themed() {
+    @include themed {
       border-radius: t($borderRadius);
     }
   }
@@ -35,10 +37,11 @@
 
 .subtitle-photographers {
   font-size: 16px;
-  @include themed() {
+  @include themed {
     color: t($color);
+
     span {
-      color: t($subColor)
+      color: t($subColor);
     }
   }
-}
+}

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -1,7 +1,7 @@
 @import '../../../../../../../scss/variables';
 
 .sortableItem {
-  @include themed() {
+  @include themed {
     padding: 15px;
     margin-bottom: 10px;
     font-size: 1.325rem;
@@ -12,7 +12,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
     box-shadow: t($boxShadow);
@@ -49,9 +48,10 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   padding: 20px;
   grid-gap: 20px;
-  @include themed() {
+  @include themed {
     div {
       border-radius: t($borderRadius);
+
       // border: 5px t($modal-sidebar) solid;
       display: flex;
       align-items: center;
@@ -59,26 +59,31 @@
       flex-flow: column;
       gap: 5px;
       position: relative;
+
       img {
         width: 100%;
         height: 200px;
         object-fit: cover;
         border-radius: t($borderRadius);
       }
+
       button {
-        padding: 0 30px 0 30px;
+        padding: 0 30px;
         background: t($modal-background);
         border: none !important;
+
         &:hover {
           background: t($modal-sidebarActive);
         }
       }
+
       .tooltip {
         position: absolute !important;
         top: 5px !important;
         right: 5px !important;
       }
     }
+
     .iconButton {
       width: calc(100% - 22px);
       margin-top: 10px;
@@ -100,7 +105,7 @@
   align-items: center;
   justify-content: center;
   margin-top: 16px;
-  @include themed() {
+  @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
     box-shadow: t($boxShadow);
@@ -113,13 +118,14 @@
     display: flex;
     flex-flow: column;
     align-items: center;
+
     .quotediv .quote {
       max-width: 100%;
     }
 
     .quotediv .author-holder .author .author-content .title {
       font-size: 1em !important;
-      @include themed() {
+      @include themed {
         color: t($color) !important;
       }
     }
@@ -131,20 +137,23 @@
   flex-flow: column;
   margin-top: 16px;
   padding: 25px;
+
   .title {
     font-size: 36px !important;
     text-align: center;
   }
+
   .subtitle {
     font-size: 12px !important;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 1px;
   }
+
   .content {
     margin: 20px 20px 0;
   }
-  @include themed() {
+  @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
     box-shadow: t($boxShadow);

src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss

@@ -1,4 +1,5 @@
 @import 'scss/variables';
+
 // The following CSS is to work around some assumptions made by the react-color-gradient-picker
 * {
   // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
@@ -12,7 +13,7 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .ui-color-picker {
   padding: 10px;
-  @include themed() {
+  @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
     box-shadow: t($boxShadow);
@@ -39,7 +40,7 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .text-input,
 .number-input {
-  @include themed() {
+  @include themed {
     background-color: t($modal-secondaryColour) !important;
     color: t($color) !important;
   }
@@ -51,6 +52,7 @@ div.color-preview-area > div > div:nth-child(5) {
   align-items: center;
   flex-flow: row-reverse;
 }
+
 .gradient-controls {
   margin-bottom: 10px !important;
   width: auto !important;

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

@@ -1,5 +1,4 @@
 import { useState, memo } from 'react';
-import { useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import InputLabel from '@mui/material/InputLabel';

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

@@ -349,14 +349,16 @@ export default class About extends PureComponent {
           <span className="title">
             {variables.getMessage('modals.main.settings.sections.about.photographers')}
           </span>
-          {!!this.state.loading ? <p>{this.state.loading}</p> : <></> }
+          {!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
-            {this.state.photographers.map(({ name, count }) => <>
+            {this.state.photographers.map(({ name, count }) => (
-              <li className="subtitle-photographers">
+              <>
-                {name}
+                <li className="subtitle-photographers">
-                <span> ({count} images)</span>
+                  {name}
-              </li>
+                  <span> ({count} images)</span>
-            </>)}
+                </li>
+              </>
+            ))}
           </ul>
         </div>
       </>

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

@@ -102,7 +102,7 @@ export default class AdvancedSettings extends PureComponent {
             'modals.main.settings.sections.advanced.custom_css_subtitle',
           )}
         >
-           <Text name="customcss" textarea={true} category="other" />
+          <Text name="customcss" textarea={true} category="other" />
         </SettingsItem>
         <SettingsItem
           title={variables.getMessage('modals.main.settings.sections.experimental.title')}

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

@@ -17,7 +17,11 @@ export default class DateSettings extends PureComponent {
   render() {
     const longSettings = (
       <>
-        <Dropdown label={variables.getMessage('modals.main.settings.sections.date.long_format')} name="longFormat" category="date">
+        <Dropdown
+          label={variables.getMessage('modals.main.settings.sections.date.long_format')}
+          name="longFormat"
+          category="date"
+        >
           <option value="DMY">DMY</option>
           <option value="MDY">MDY</option>
           <option value="YMD">YMD</option>

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

@@ -32,7 +32,9 @@ export default class LanguageSettings extends PureComponent {
 
     const quoteLanguages = data.map((language) => {
       return {
-        name: languages.find((l) => l.value === language.name) ? languages.find((l) => l.value === language.name).name : 'English',
+        name: languages.find((l) => l.value === language.name)
+          ? languages.find((l) => l.value === language.name).name
+          : 'English',
         value: language,
       };
     });
@@ -77,7 +79,9 @@ export default class LanguageSettings extends PureComponent {
         <div className="languageSettings">
           <Radio
             name="quoteLanguage"
-            options={this.state.quoteLanguages.map((language) => { return { name: language.name, value: language.value.name }; })}
+            options={this.state.quoteLanguages.map((language) => {
+              return { name: language.name, value: language.value.name };
+            })}
             defaultValue={this.state.quoteLanguages[0].name}
             category="quote"
           />

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

@@ -111,7 +111,7 @@ export default class SearchSettings extends PureComponent {
           subtitle={variables.getMessage(
             'modals.main.settings.sections.search.search_engine_subtitle',
           )}
-          final={ this.state.customDisplay === 'none' ? true : false}
+          final={this.state.customDisplay === 'none' ? true : false}
         >
           <Dropdown
             name="searchEngine"
@@ -129,7 +129,10 @@ export default class SearchSettings extends PureComponent {
           </Dropdown>
         </SettingsItem>
         <div style={{ display: this.state.customDisplay }}>
-          <SettingsItem title={variables.getMessage('modals.main.settings.sections.search.custom')} final={true}>
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.search.custom')}
+            final={true}
+          >
             <TextField
               label={variables.getMessage('modals.main.settings.sections.search.custom')}
               value={this.state.customValue}

src/components/modals/main/settings/sections/background/Background.jsx

@@ -63,7 +63,7 @@ export default class BackgroundSettings extends PureComponent {
   }
 
   render() {
-    const interval = (
+    /* const interval = (
       <SettingsItem
         title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
         subtitle={variables.getMessage(
@@ -101,7 +101,7 @@ export default class BackgroundSettings extends PureComponent {
           </option>
         </Dropdown>
       </SettingsItem>
-    );
+    );*/
 
     const APISettings = (
       <>

src/components/modals/welcome/WelcomeSections.jsx

@@ -384,7 +384,9 @@ export default class WelcomeSections extends PureComponent {
           <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'))}
+              {variables.getMessage(
+                'modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'),
+              )}
             </span>
           </div>
           {this.state.importedSettings.length !== 0 ? (

src/components/modals/welcome/welcome.scss

@@ -1,42 +1,44 @@
-@import '../main/scss/index.scss';
+@import '../main/scss/index';
 @import 'scss/variables';
 
 .welcomemodal {
-  @include themed() {
+  @include themed {
     background-color: t($modal-background);
   }
 }
 
 .welcomeContent {
-  @include themed() {
+  @include themed {
     background-color: t($modal-background);
   }
+
   .MuiFormControlLabel-root {
     margin-right: 0;
   }
   @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-gap: 0;
-  grid-row-gap: 0px;
 
   section:nth-child(1) {
     display: flex;
     align-items: center;
     justify-content: center;
-    @include themed() {
+    @include themed {
       background-color: t($modal-sidebar);
     }
   }
+
   section:nth-child(2) {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
     overflow-y: auto;
+
     .buttons {
       z-index: 999;
       backdrop-filter: blur(2px);
@@ -45,11 +47,14 @@
       padding: 25px;
       display: flex;
       justify-content: flex-end;
+
       button {
         @include modal-button(standard);
+
         width: 150px;
       }
     }
+
     .content {
       display: flex;
       flex-flow: column;
@@ -84,7 +89,7 @@
 }
 
 .themesToggleArea {
-  @include themed() {
+  @include themed {
     .active {
       background: t($modal-sidebarActive);
     }
@@ -96,13 +101,11 @@
       padding: 20px;
       border: 3px solid t($modal-sidebarActive);
       transition: 0.33s;
-
       display: flex;
       flex-direction: column;
       align-items: center;
       align-content: center;
       justify-content: center;
-
       cursor: pointer;
 
       &:hover {
@@ -160,11 +163,12 @@
   display: flex;
   flex-flow: column;
   align-items: center;
-  @include themed() {
+  @include themed {
     background: t($modal-sidebar);
     color: t($color);
     cursor: pointer;
     border: 3px solid t($modal-sidebarActive);
+
     &:hover {
       background: t($modal-sidebarActive);
     }
@@ -192,7 +196,7 @@ a.privacy {
 .examples {
   img {
     width: 60%;
-    @include themed() {
+    @include themed {
       border-radius: t($borderRadius);
     }
   }
@@ -203,6 +207,7 @@ a.privacy {
   flex-flow: row;
   justify-content: space-between;
   margin-top: 15px;
+
   button {
     width: 150px;
     height: 40px;
@@ -212,21 +217,22 @@ a.privacy {
 .showcaseimg {
   width: 350px;
   height: auto;
-  /*animation-name: float-in;
+
+  /* animation-name: float-in;
   animation-duration: 1.2s;
-  animation-timing-function: ease-in;*/
+  animation-timing-function: ease-in; */
 }
 
 .welcomeContent {
   .light {
     .toggle.lightTheme {
-      background-color: rgba(219, 219, 219, 0.72);
+      background-color: rgb(219 219 219 / 72%);
     }
   }
 
   .dark {
     .toggle.darkTheme {
-      background-color: rgba(65, 71, 84, 0.9);
+      background-color: rgb(65 71 84 / 90%);
     }
   }
 }
@@ -238,14 +244,16 @@ a.privacy {
   padding: 25px;
   align-items: center;
 
-  @include themed() {
+  @include themed {
     background-color: t($modal-sidebar);
     border-radius: t($borderRadius);
   }
+
   .icon {
-    @include themed() {
+    @include themed {
       background-color: t($modal-sidebarActive);
     }
+
     height: 50px !important;
     width: 50px !important;
     border-radius: 100%;
@@ -254,10 +262,12 @@ a.privacy {
     text-align: center;
     flex-shrink: 0;
   }
+
   .text {
     display: flex;
     flex-flow: column;
   }
+
   a {
     text-decoration: none;
     margin-left: auto;
@@ -267,7 +277,7 @@ a.privacy {
 }
 
 .toggle.active {
-  @include themed() {
+  @include themed {
     background-color: t($modal-sidebarActive) !important;
   }
 }

src/components/widgets/background/Background.jsx

@@ -118,7 +118,7 @@ export default class Background extends PureComponent {
         break;
     }
 
-    const accept = 'application/json, ' + (await supportsAVIF() ? 'image/avif' : 'image/webp');
+    const accept = 'application/json, ' + ((await supportsAVIF()) ? 'image/avif' : 'image/webp');
     try {
       data = await (await fetch(requestURL, { headers: { accept } })).json();
     } catch (e) {

src/components/widgets/background/ExcludeModal.jsx

@@ -15,7 +15,7 @@ function ExcludeModal({ modalClose, info }) {
   };
 
   return (
-<div className="smallModal">
+    <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
           {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
@@ -29,8 +29,7 @@ function ExcludeModal({ modalClose, info }) {
         </Tooltip>
       </div>
       <span className="subtitle">
-      {      variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
+        {variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
-
       </span>
       <div className="resetFooter">
         <button className="textButton" onClick={modalClose}>
@@ -43,7 +42,7 @@ function ExcludeModal({ modalClose, info }) {
         </button>
       </div>
     </div>
-  )
+  );
 }
 
 export default memo(ExcludeModal);

src/components/widgets/background/PhotoInformation.jsx

@@ -362,7 +362,12 @@ function PhotoInformation({ info, url, api }) {
                   key="favourite"
                   placement="top"
                 >
-                  <Favourite pun={info.pun} offline={info.offline} credit={info.credit} photoURL={info.url} />
+                  <Favourite
+                    pun={info.pun}
+                    offline={info.offline}
+                    credit={info.credit}
+                    photoURL={info.url}
+                  />
                 </Tooltip>
                 {!info.offline ? (
                   <Tooltip

src/components/widgets/background/scss/_photoinformation.scss

@@ -6,54 +6,64 @@
   left: 1rem;
   flex-flow: column-reverse;
   display: flex;
+
   &:hover {
     .photoInformation {
       height: auto;
       align-items: flex-start;
       flex-flow: column;
+
       .concept-buttons {
-        padding: 30px 0 0 0;
+        padding: 30px 0 0;
         display: flex;
       }
+
       .extra-content {
         display: flex;
         flex-flow: column;
         gap: 10px;
         transition: 0.8s;
       }
+
       .concept-stats {
         display: flex;
         padding-top: 5px;
         gap: 20px;
-        @include themed() {
+        @include themed {
           color: t($subColor);
         }
+
         div {
           display: flex;
           align-items: center;
           align-content: center;
           flex-direction: row;
           gap: 5px;
+
           svg {
             font-size: 1em;
           }
         }
       }
+
       .concept-copyright {
         display: flex;
         margin-top: 10px;
         gap: 10px;
+
         a {
           text-decoration: none;
-          @include themed() {
+          @include themed {
             color: t($subColor);
           }
         }
       }
+
       .photoInformation-content {
         padding: 20px;
         padding-left: 0;
       }
+
       .map-concept {
         width: 100%;
       }
@@ -68,11 +78,13 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
+
   img {
     flex-shrink: 0;
     min-width: 100%;
     min-height: 100%;
   }
+
   svg {
     display: none;
   }
@@ -80,7 +92,7 @@
 
 .photoInformation-legacy {
   font-size: 1.36em;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 10px rgb(0 0 0 / 30%);
   color: #fff;
   z-index: 99;
   user-select: none;
@@ -116,7 +128,7 @@
 .infoCard {
   display: none;
   background: var(--background);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
   color: var(--modal-text);
   position: fixed;
   bottom: 2.9rem;
@@ -199,6 +211,7 @@
 
 .photoInformation {
   @extend %basic;
+
   animation: fadeIn 2s;
   min-width: 300px;
   font-size: 0.8em;
@@ -208,70 +221,85 @@
   flex-flow: row;
   align-items: center;
   transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
+
   //   width: 300px;
   padding: 10px;
+
   .link {
     text-decoration: none;
     cursor: pointer;
-    @include themed() {
+    @include themed {
       color: t($link);
     }
+
     &:hover {
       opacity: 0.8;
     }
   }
+
   &:hover {
     padding: 20px;
     height: auto;
     align-items: flex-start;
     flex-flow: column;
+
     .concept-buttons {
-      padding: 30px 0 0 0;
+      padding: 30px 0 0;
       display: flex;
     }
+
     .extra-content {
       display: flex;
       flex-flow: column;
       gap: 10px;
       transition: 0.8s;
     }
+
     .concept-stats {
       display: flex;
       gap: 15px;
-      @include themed() {
+      @include themed {
         color: t($subColor);
       }
+
       div {
         display: flex;
         align-items: center;
         align-content: center;
         flex-direction: row;
         gap: 10px;
+
         svg {
           font-size: 1em;
         }
       }
     }
+
     .concept-copyright {
       display: flex;
       margin-top: 10px;
       gap: 10px;
+
       a {
         text-decoration: none;
-        @include themed() {
+        @include themed {
           color: t($subColor);
         }
       }
     }
+
     .photoInformation-content {
       padding-left: 0;
     }
+
     .map-concept {
       width: 100%;
     }
   }
+
   .map-concept {
     @extend %basic;
+
     height: 50px;
     width: 50px;
     border-radius: 12px;
@@ -279,9 +307,11 @@
     align-items: center;
     justify-content: center;
     border: none !important;
+
     svg {
       font-size: 24px;
     }
+
     img {
       width: 100%;
       height: 100%;
@@ -291,18 +321,22 @@
       border-radius: 12px;
     }
   }
+
   .concept-location {
     font-size: 1.9em;
   }
+
   .concept-credit {
     font-size: 1.4em;
-    @include themed() {
+    @include themed {
       color: t($subColor);
     }
+
     a {
-      @include themed() {
+      @include themed {
         color: t($subColor);
       }
+
       &:nth-child(2) {
         color: var(--modal-link);
       }
@@ -316,11 +350,14 @@
   display: flex;
   flex-flow: column;
   padding-left: 20px;
+
   a {
-    @include themed() {
+    @include themed {
       color: t($link);
     }
+
     text-decoration: none;
+
     &:hover {
       opacity: 0.9;
     }
@@ -332,12 +369,14 @@
   flex-flow: column;
   width: 100%;
   transition: 1s;
+
   .concept-row {
     display: flex;
     align-items: center;
     gap: 20px;
+
     svg {
-      @include themed() {
+      @include themed {
         color: t($subColor);
         font-size: 18px;
       }
@@ -358,6 +397,7 @@
   gap: 20px;
   padding: 20px 20px 0 0;
   display: none;
+
   svg {
     @include basicIconButton(11px, 1.3rem, ui);
   }
@@ -367,6 +407,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -377,6 +418,7 @@
     height: 50px !important;
     width: 50px !important;
   }
+
   a {
     height: 50px;
   }
@@ -385,12 +427,14 @@
 .photoInformation:hover {
   .photoMap {
     height: auto !important;
+
     img {
       height: auto !important;
       width: auto !important;
     }
+
     a {
       height: auto !important;
     }
   }
-}
+}

src/components/widgets/background/scss/index.scss

@@ -12,9 +12,7 @@
 
 .backgroundTransform {
   @include animation('fadein2 2s');
-  -webkit-transition: background 2s;
+
-  -mov-transition: background 2s;
-  -o-transition: background 2s;
   transition: background 2s;
 }
 

src/components/widgets/navbar/Todo.jsx

@@ -201,7 +201,7 @@ class Todo extends PureComponent {
                               readOnly={this.state.todo[index].done}
                             />
                             <MdDelete onClick={() => this.updateTodo('remove', index)} />
-                            <SortableHandle/>
+                            <SortableHandle />
                           </div>
                         }
                       />

src/components/widgets/navbar/scss/_notes.scss

@@ -25,20 +25,22 @@
 
 .notesContainer {
   @extend %basic;
+
   padding: 15px;
   text-align: center;
   border-radius: 12px;
   position: absolute;
   font-size: 1rem !important;
-  /*top: 100%;
+
+  /* top: 100%;
   left: 50%;
-  margin-left: -130px;*/
+  margin-left: -130px; */
 
   .notes-buttons {
     button {
       @include basicIconButton(11px, 1.3rem, ui);
 
-      @include themed() {
+      @include themed {
         background: t($btn-background) !important;
 
         &:hover {
@@ -65,6 +67,7 @@
       max-height: 65vh !important;
       overflow-y: visible !important;
       @extend %basic;
+
       border: none;
       padding: 15px;
       border-radius: 12px;
@@ -86,10 +89,10 @@ textarea {
 
 .topBarNotes {
   @extend %basic;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-flow: row;
   height: 50px;
   border-radius: 12px;
   flex-flow: row;

src/components/widgets/navbar/scss/_todo.scss

@@ -14,6 +14,7 @@
       gap: 15px;
     }
   }
+
   .todosEmpty {
     height: 200px;
     display: grid;
@@ -23,17 +24,18 @@
 
 .todoRow {
   @include basicIconButton(1px, 16px, ui);
+
   display: flex;
   flex-flow: row;
   align-items: center;
-  margin: 15px 5px 15px 5px;
+  margin: 15px 5px;
-  @include themed() {
+  @include themed {
     color: t($color) !important;
   }
 
   textarea {
     width: 120px;
-    @include themed() {
+    @include themed {
       color: t($color) !important;
     }
   }
@@ -44,12 +46,12 @@
     display: grid;
     cursor: pointer;
 
-    @include themed() {
+    @include themed {
       color: t($color) !important;
     }
 
     &:hover {
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
       }

src/components/widgets/navbar/scss/index.scss

@@ -7,10 +7,13 @@
   flex-flow: row;
   gap: 10px;
   animation: fadeIn 2s;
+
   button {
     -webkit-font-smoothing: subpixel-antialiased;
-    /*filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));*/
+
+    /* filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); */
     cursor: pointer;
+
     // transition: 0.2s ease;
     margin-top: 0;
 
@@ -18,6 +21,7 @@
       0% {
         opacity: 0;
       }
+
       100% {
         opacity: 1;
       }
@@ -27,7 +31,7 @@
       color: map-get($theme-colours, 'main-text-color');
       transform: translateZ(0);
       transform: scale(1.3);
-    }*/
+    } */
   }
 }
 
@@ -37,10 +41,12 @@
       @include basicIconButton(12px, 1.2rem, legacy);
     }
   }
+
   .first {
     @include basicIconButton(12px, 1.2rem, legacy);
   }
 }
+
 .new {
   button {
     @include basicIconButton(12px, 1.2rem, ui);

src/components/widgets/quicklinks/quicklinks.scss

@@ -2,6 +2,7 @@
 
 .quicklinks {
   @include basicIconButton(10px, 14px, ui);
+
   outline: none;
   border: none;
   box-shadow: 0 0 0 1px #484848;
@@ -11,7 +12,7 @@
   align-items: center;
   justify-content: space-evenly;
   font-size: 0.5em;
-  padding: 10px 40px 10px 40px;
+  padding: 10px 40px;
   gap: 15px;
 }
 
@@ -25,6 +26,7 @@
 
   textarea {
     @extend %basic;
+
     border: none;
     padding: 15px;
     border-radius: 12px;
@@ -53,7 +55,7 @@
     font-size: 16px;
     cursor: initial;
     user-select: none;
-    color: rgba(255, 71, 87, 1);
+    color: rgb(255 71 87 / 100%);
   }
 }
 
@@ -90,10 +92,11 @@
 }
 
 /*  background-color: var(--background);
-  color: var(--modal-text);*/
+  color: var(--modal-text); */
 
 .quicklinksdropdown {
   @extend %basic;
+
   position: absolute;
   z-index: 99;
   display: none;
@@ -115,13 +118,14 @@
   .dropdown-subtitle {
     font-size: 0.4em;
 
-    @include themed() {
+    @include themed {
       color: t($subColor);
     }
   }
 
   button {
     @include basicIconButton(10px, 0.9rem, ui);
+
     border-radius: 12px;
     border: none;
     outline: none;
@@ -149,18 +153,20 @@ button.quicklinks {
   display: flex;
   flex-flow: column;
   gap: 5px;
+
   button {
     display: flex;
     flex-flow: row;
     gap: 20px;
     justify-content: center;
   }
+
   .dropdown-error {
     font-size: 13px;
     padding-left: 5px;
     color: #e74c3c;
   }
-  @include themed() {
+  @include themed {
     textarea {
       background: t($modal-sidebar);
       border: 1px solid t($modal-sidebarActive);
@@ -185,22 +191,24 @@ button.quicklinks {
 
 .quickLinksMetro {
   @extend %basic;
+
   text-decoration: none;
   gap: 10px;
   display: flex;
   flex-flow: column;
   align-items: center;
   min-width: 100px;
-  background-image: linear-gradient(to left, rgb(0, 0, 0), transparent, rgb(0, 0, 0)),
+  background-image: linear-gradient(to left, rgb(0 0 0), transparent, rgb(0 0 0)),
     url('https://media.cntraveller.com/photos/615ee85…/16:9/w_2580,c_limit/Best%20Cities%20in%20the%20World%20-%20Grid.jpg');
   transition: 0.8s;
   text-align: left;
   padding: 20px 40px;
-  @include themed() {
+  @include themed {
     &:hover {
       background: t($btn-backgroundHover);
     }
   }
+
   img {
     width: auto;
     align-self: center;
@@ -210,7 +218,7 @@ button.quicklinks {
 .quicklinknostyle {
   text-decoration: none;
   font-size: 14px;
-  @include themed() {
+  @include themed {
     color: t($subColor);
   }
 }

src/components/widgets/quote/quote.scss

@@ -2,10 +2,12 @@
 
 .quote {
   font-size: 0.8em;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 10px rgb(0 0 0 / 30%);
   cursor: initial;
   user-select: none;
+
   --shadow-shift: 0.125rem;
+
   color: #fff;
   font-weight: 600;
   width: 40vw;
@@ -20,7 +22,7 @@
 
   svg {
     margin-left: 10px;
-    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+    filter: drop-shadow(0 0 6px rgb(0 0 0 / 30%));
   }
 }
 
@@ -37,6 +39,7 @@ h1.quoteauthor {
 
 .author {
   @extend %basic;
+
   display: flex;
   flex-flow: row;
   height: 70px;
@@ -50,14 +53,14 @@ h1.quoteauthor {
 
 .author-knownfor {
   font-size: clamp(13px, 2.5vw, 0.4em);
-  @include themed() {
+  @include themed {
     color: t($subColor);
   }
 }
 
 .author-license {
   font-size: clamp(8px, 2.5vw, 0.1em);
-  @include themed() {
+  @include themed {
     color: t($subColor);
   }
 }
@@ -70,6 +73,7 @@ h1.quoteauthor {
 
 .author-img {
   @extend %basic;
+
   height: 100%;
   width: 70px;
   border-radius: 12px 0 0 12px;
@@ -102,6 +106,7 @@ h1.quoteauthor {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -116,6 +121,7 @@ h1.quoteauthor {
   a {
     display: flex;
   }
+
   a {
     @include basicIconButton(11px, 1.3rem, ui);
   }
@@ -127,6 +133,7 @@ h1.quoteauthor {
   flex-direction: column;
   gap: 10px;
   align-items: center;
+
   button {
     @include basicIconButton(11px, 1.3rem, ui);
   }
@@ -135,17 +142,20 @@ h1.quoteauthor {
 .deleteButton {
   height: auto !important;
   @include basicIconButton(11px, 1.3rem, modal);
+
   padding: 10px 20px;
 }
 
 .author-content.whileLoading {
-  @include themed() {
+  @include themed {
     gap: 5px;
+
     .title {
       color: transparent;
       width: 100px;
       background: t($modal-sidebar);
     }
+
     .subtitle {
       color: transparent;
       width: 50px;

src/components/widgets/search/Search.jsx

@@ -234,7 +234,10 @@ export default class Search extends PureComponent {
               {searchEngines.map(({ name }, key) => {
                 return (
                   <span
-                    className={"searchDropdownList" + (this.state.currentSearch === name ? " searchDropdownListActive" : "")}
+                    className={
+                      'searchDropdownList' +
+                      (this.state.currentSearch === name ? ' searchDropdownListActive' : '')
+                    }
                     onClick={() => this.setSearch(name)}
                     key={key}
                   >
@@ -242,12 +245,15 @@ export default class Search extends PureComponent {
                   </span>
                 );
               })}
-                <span
+              <span
-                  className={"searchDropdownList" + (this.state.currentSearch === customText ? " searchDropdownListActive" : "")}
+                className={
-                  onClick={() => this.setSearch(customText, 'custom')}
+                  'searchDropdownList' +
-                >
+                  (this.state.currentSearch === customText ? ' searchDropdownListActive' : '')
-                  {customText}
+                }
-                </span>
+                onClick={() => this.setSearch(customText, 'custom')}
+              >
+                {customText}
+              </span>
             </div>
           ) : null}
         </div>

src/components/widgets/search/search.scss

@@ -8,13 +8,14 @@
 
   input[type='text'] {
     @extend %basic;
+
     outline: none;
     border: none;
     font-size: 1.2rem;
     padding: 10px 0 10px 20px;
 
     &::placeholder {
-      @include themed() {
+      @include themed {
         color: t($color);
       }
     }
@@ -46,6 +47,7 @@
 
 .searchDropdown {
   @extend %basic;
+
   margin-top: 5px;
   display: flex;
   flex-flow: column;
@@ -61,7 +63,7 @@
     border-radius: 12px;
 
     &:hover {
-      @include themed() {
+      @include themed {
         background: t($btn-backgroundHover);
       }
     }
@@ -69,7 +71,7 @@
 }
 
 .searchDropdownListActive {
-  @include themed() {
+  @include themed {
     background: t($btn-backgroundHover);
   }
 }
@@ -77,4 +79,15 @@
 .searchMain {
   display: flex;
   flex-flow: row;
+  animation: fadeIn 2s;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
 }

src/components/widgets/time/clock.scss

@@ -6,6 +6,7 @@
   cursor: initial;
   user-select: none;
   font-weight: 600;
+
   --shadow-shift: 0.4rem;
 }
 
@@ -17,10 +18,11 @@
 .react-clock__face {
   margin: 0 auto;
   border-radius: 100%;
-  /*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);*/
+
+  /* box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); */
   border: none !important;
 
-  @include themed() {
+  @include themed {
     border: 1px solid t($color) !important;
   }
 
@@ -30,14 +32,16 @@
 
 .react-clock__hand__body,
 .react-clock__mark__body {
-  @include themed() {
+  @include themed {
     background: t($color) !important;
   }
-  /*box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);*/
+
+  /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); */
 }
 
 .clockBackground {
   @extend %basic;
+
   padding: 1rem;
 
   &.round {
@@ -47,6 +51,7 @@
 
 .new-clock {
   line-height: 100%;
+
   .seconds {
     font-size: 0.2em;
     line-height: 0%;

src/components/widgets/weather/weather.scss

@@ -2,12 +2,12 @@
 
 .weather {
   @extend %basic;
+
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   cursor: initial;
   user-select: none;
-  padding: 20px;
   transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
   width: auto;
   display: grid;
@@ -25,9 +25,11 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+
     .tooltip {
       width: 100%;
     }
+
     .tooltipTitle {
       max-height: 12px;
     }
@@ -38,7 +40,7 @@
     font-size: 18px;
     gap: 40px;
 
-    @include themed() {
+    @include themed {
       color: t($weather);
     }
   }
@@ -98,7 +100,7 @@
     gap: 20px;
   }
 
-  @include themed() {
+  @include themed {
     svg {
       color: t($subColor);
     }
@@ -108,6 +110,7 @@
       display: grid;
       align-items: center;
     }
+
     .materialWeatherIcon {
       font-size: 18px !important;
       padding: 2px;
@@ -122,7 +125,7 @@
   gap: 10px;
 
   div {
-    @include themed() {
+    @include themed {
       border-radius: t($borderRadius);
       border: 1px solid t($btn-backgroundHover);
       padding: 5px;

src/modules/helpers/background/avif.js

@@ -8,4 +8,4 @@ export const supportsAVIF = () => {
     image.onload = () => resolve(true);
     image.onerror = () => resolve(false);
   });
-}
+};

src/scss/_mixins.scss

@@ -11,17 +11,15 @@
     }
   }
 
-  -webkit-animation: $animations;
-  -moz-animation: $animations;
   animation: $animations;
 }
 
 @mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
-  @-moz-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
@@ -44,6 +42,7 @@
         ) !global;
       }
       @content;
+
       $theme-map: null !global;
     }
   }

src/scss/_variables.scss

@@ -17,67 +17,62 @@ $modal-sidebarActive: 'modal-sidebarActive';
 $link: 'link';
 $weather: 'weather';
 $modal-secondaryColour: 'modal-secondaryColour';
-
 $theme-colours: (
   'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
-  'main': rgba(242, 243, 244, 1),
+  'main': rgb(242 243 244 / 100%),
-  'secondary': rgba(0, 0, 0, 1),
+  'secondary': rgb(0 0 0 / 100%),
-  'main-text-color': rgba(242, 243, 244, 1),
+  'main-text-color': rgb(242 243 244 / 100%),
   'photo-info': #2d3436,
   'photo-info-dark': #ffff,
 );
-
 $modal: (
   'background': #fff,
   'background-dark': #2f3542,
-  'text': rgba(0, 0, 0, 1),
+  'text': rgb(0 0 0 / 100%),
-  'tab-underline': rgba(204, 204, 204, 1),
+  'tab-underline': rgb(204 204 204 / 100%),
-  'tab-underline-active': rgba(0, 0, 0, 1),
+  'tab-underline-active': rgb(0 0 0 / 100%),
   'border-radius': 12px,
-  'sidebar': rgb(240, 240, 240),
+  'sidebar': rgb(240 240 240),
-  'tab-active': rgba(219, 219, 219, 0.72),
+  'tab-active': rgb(219 219 219 / 72%),
-  'sidebar-dark': rgb(53, 59, 72),
+  'sidebar-dark': rgb(53 59 72),
-  'tab-active-dark': rgba(65, 71, 84, 0.9),
+  'tab-active-dark': rgb(65 71 84 / 90%),
   'modal-link': #5352ed,
   'modal-link-dark': #3498db,
 );
-
 $button-colours: (
-  'confirm': rgba(46, 213, 115, 1),
+  'confirm': rgb(46 213 115 / 100%),
-  'reset': rgba(255, 71, 87, 1),
+  'reset': rgb(255 71 87 / 100%),
-  'other': rgba(83, 82, 237, 1),
+  'other': rgb(83 82 237 / 100%),
 );
-
 $ui-elements: (
-  'background': rgba(0, 0, 0, 0.7),
+  'background': rgb(0 0 0 / 70%),
   'backgroundBlur': 15px,
-  'color': rgb(255, 255, 255),
+  'color': rgb(255 255 255),
   'borderRadius': 12px,
   'boxShadow': 0 0 0 1px #484848,
 );
-
 $themes: (
   light: (
-    'weather': #333333,
+    'weather': #333,
-    'background': rgba(255, 255, 255, 0.7),
+    'background': rgb(255 255 255 / 70%),
     'backgroundBlur': 15px,
-    'color': rgb(0, 0, 0),
+    'color': rgb(0 0 0),
-    'subColor': #333333,
+    'subColor': #333,
     'borderRadius': 12px,
     'boxShadow': 0 0 0 1px #e7e3e9,
     'btn-background': #fff,
-    'btn-backgroundHover': rgba(247, 250, 252, 0.9),
+    'btn-backgroundHover': rgb(247 250 252 / 90%),
     'modal-background': #fff,
-    'modal-sidebar': rgba(240, 240, 240, 1),
+    'modal-sidebar': rgb(240 240 240 / 100%),
-    'modal-sidebarActive': rgba(219, 219, 219, 0.72),
+    'modal-sidebarActive': rgb(219 219 219 / 72%),
     'modal-secondaryColour': #fafafa,
-    'link': rgba(83, 82, 237, 1),
+    'link': rgb(83 82 237 / 100%),
   ),
   dark: (
     'weather': #e7e7e7,
-    'background': rgba(0, 0, 0, 0.7),
+    'background': rgb(0 0 0 / 70%),
     'backgroundBlur': 15px,
-    'color': rgb(255, 255, 255),
+    'color': rgb(255 255 255),
     'subColor': #c2c2c2,
     'borderRadius': 12px,
     'boxShadow': 0 0 0 1px #484848,
@@ -87,12 +82,12 @@ $themes: (
     'modal-sidebar': #0e1013,
     'modal-sidebarActive': #333,
     'modal-secondaryColour': #111,
-    'link': rgb(115, 115, 255),
+    'link': rgb(115 115 255),
   ),
 );
 
 %basic {
-  @include themed() {
+  @include themed {
     background: t($background);
     border-radius: t($borderRadius);
     color: t($color);
@@ -104,7 +99,7 @@ $themes: (
   .title {
     font-size: 18px;
 
-    @include themed() {
+    @include themed {
       color: t($color);
     }
   }
@@ -112,7 +107,7 @@ $themes: (
   .subtitle {
     font-size: 14px;
 
-    @include themed() {
+    @include themed {
       color: t($subColor);
     }
   }
@@ -126,14 +121,15 @@ $themes: (
     font-weight: 600;
     margin-bottom: 15px;
 
-    @include themed() {
+    @include themed {
       color: t($color);
     }
 
     .backTitle {
       cursor: pointer;
-      @include themed() {
+      @include themed {
         color: t($subColor);
+
         &:hover {
           color: t($color);
         }
@@ -145,7 +141,7 @@ $themes: (
     font-size: 24px;
     font-weight: 600;
 
-    @include themed() {
+    @include themed {
       color: t($color);
     }
   }
@@ -153,7 +149,7 @@ $themes: (
   .subtitle {
     font-size: 16px;
 
-    @include themed() {
+    @include themed {
       color: t($subColor);
     }
   }
@@ -163,7 +159,7 @@ $themes: (
     text-decoration: none;
     cursor: pointer;
 
-    @include themed() {
+    @include themed {
       color: t($link);
     }
 
@@ -174,7 +170,7 @@ $themes: (
 }
 
 @mixin modal-button($type) {
-  @include themed() {
+  @include themed {
     @if $type == 'standard' {
       background: t($modal-sidebar);
       box-shadow: t($boxShadow);
@@ -219,7 +215,7 @@ $themes: (
 }
 
 @mixin basicIconButton($padding, $font-size, $type) {
-  @include themed() {
+  @include themed {
     @if $type == 'ui' {
       background: t($btn-background);
       color: t($color);
@@ -307,12 +303,12 @@ $themes: (
 }
 
 @mixin legacyIconButton($padding, $font-size) {
-  @include themed() {
+  @include themed {
     color: t($color);
   }
 
   &:hover {
-    @include themed() {
+    @include themed {
       background: t($btn-background);
     }
   }

src/scss/index.scss

@@ -8,7 +8,7 @@ body {
 }
 
 * {
-  font-family: 'Lexend Deca', 'Montserrat', sans-serif !important;
+  font-family: 'Lexend Deca', Montserrat, sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   outline: none;
@@ -22,7 +22,7 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 25px rgb(0 0 0 / 30%);
   display: grid;
   place-items: center;
   margin: 0;
@@ -46,9 +46,10 @@ body {
 }
 
 ::placeholder {
-  @include themed() {
+  @include themed {
     color: t($color);
   }
+
   opacity: 1;
 }
 
@@ -57,7 +58,7 @@ body {
 }
 
 #root {
-  @include themed() {
+  @include themed {
     color: t($color);
   }
 }
@@ -110,7 +111,7 @@ body {
 }
 
 @font-face {
-  font-family: 'Montserrat';
+  font-family: Montserrat;
   font-style: normal;
   font-display: swap;
   font-weight: 400;