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

2026-07-18 22:44:08 +02:00 · 2023-03-13 21:14:09 +00:00
parent 510dc1c023
commit f5d9ad11a5
52 changed files with 1267 additions and 827 deletions
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/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]) => (
-                      <tr key={key}>
-                        <td>{key}</td>
-                        <td>{value}</td>
-                      </tr>
-                    ))}
+                    {Object.entries(this.props.data.data.settings)
+                      .slice(0, this.state.count)
+                      .map(([key, value]) => (
+                        <tr key={key}>
+                          <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',
                      )
                    }
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/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>
-                {
-                  type === 'all' && !onCollection
-                    ? <span className="card-type">
-                      {variables.getMessage(`modals.main.addons.create.types.${item.type.split('_')[0] === "preset"
-                          ? "settings"
+                <span className="card-subtitle">
+                  {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
+                </span>
+                {type === 'all' && !onCollection ? (
+                  <span className="card-type">
+                    {variables.getMessage(
+                      `modals.main.addons.create.types.${
+                        item.type.split('_')[0] === 'preset'
+                          ? 'settings'
                          : item.type.split('_')[0] + 's'
-                        }`)}
-                    </span>
-                    : null
-                  }
+                      }`,
+                    )}
+                  </span>
+                ) : null}
              </div>
            </div>
          ))}
--- a/src/components/modals/main/scss/index.scss
+++ b/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);
      }
    }
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/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%);
--- a/src/components/modals/main/scss/marketplace/modules/_item.scss
+++ b/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);
    }
--- a/src/components/modals/main/scss/modules/_navbar.scss
+++ b/src/components/modals/main/scss/modules/_navbar.scss
@@ -1,15 +1,17 @@
 .navbar-item {
  flex-flow: row !important;
-  padding: 0 15px 0 15px;
-  @include themed() {
+  padding: 0 15px;
+  @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;
  }
 }
--- a/src/components/modals/main/scss/modules/_scrollbars.scss
+++ b/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;
 }
--- a/src/components/modals/main/scss/modules/_sidebar.scss
+++ b/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;
    }

--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@@ -4,24 +4,27 @@
  button {
    @include modal-button(standard);
  }
-  @include themed() {
-    padding: 1rem 3rem 3rem 3rem;
+  @include themed {
+    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-direction: row !important;
+  flex-flow: row wrap !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);
  }
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/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;
-}
+}
--- a/src/components/modals/main/scss/settings/modules/_material-ui.scss
+++ b/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;
 }
--- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss
+++ b/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);
    }
  }
-}
+}
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/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);
--- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
+++ b/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;
--- a/src/components/modals/main/settings/ChipSelect.jsx
+++ b/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';
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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 }) => <>
-              <li className="subtitle-photographers">
-                {name}
-                <span> ({count} images)</span>
-              </li>
-            </>)}
+            {this.state.photographers.map(({ name, count }) => (
+              <>
+                <li className="subtitle-photographers">
+                  {name}
+                  <span> ({count} images)</span>
+                </li>
+              </>
+            ))}
          </ul>
        </div>
      </>
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/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')}
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/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>
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/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"
          />
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/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}
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/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 = (
      <>
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/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 ? (
--- a/src/components/modals/welcome/welcome.scss
+++ b/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-row-gap: 0px;
+  grid-gap: 0;

  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;
  }
 }