refactor: Move main modal to components

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -0,0 +1,145 @@
+@import 'scss/variables';
+@import 'modules/material-ui';
+@import 'modules/tabs/about';
+@import 'modules/tabs/changelog';
+@import 'modules/tabs/order';
+@import 'modules/tabs/stats';
+
+input {
+  /* colour picker */
+  &[type='color'] {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    appearance: none;
+    vertical-align: middle;
+    background: none;
+
+    @include themed {
+      border: t($modal-sidebarActive) 1px solid;
+    }
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  /* firefox fixes for colour picker (using "," didn't work) */
+  &[type='color']::-moz-color-swatch {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    appearance: none;
+    vertical-align: middle;
+    background: none;
+
+    &::-moz-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  /* date picker */
+  &[type='date'] {
+    width: 260px;
+
+    @include themed {
+      background: t($modal-sidebar);
+      border: 3px solid t($modal-sidebarActive);
+      color: t($color);
+    }
+
+    padding: 15px 20px;
+    border-radius: 4px;
+    display: flex !important;
+    cursor: pointer;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+    }
+  }
+}
+
+/* dark theme date picker fix */
+.dark {
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}
+
+h4 {
+  cursor: pointer;
+}
+
+.photosEmpty {
+  height: 400px;
+  display: grid;
+  place-items: center;
+
+  button {
+    padding: 0 20px;
+  }
+}
+
+.imagesTopBar {
+  padding-top: 25px;
+  display: flex;
+  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 {
+        color: t($subColor);
+      }
+    }
+
+    div {
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .topbarbuttons {
+    display: flex;
+    flex-flow: row;
+    gap: 25px;
+  }
+
+  button {
+    padding: 0 20px;
+  }
+}
+
+.customcss textarea {
+  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
+    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
+    'Courier New', Courier, monospace !important;
+}
+
+.preferences {
+  transition: 0.4s ease-in-out;
+}
+
+.preferencesInactive {
+  opacity: 0.5;
+  pointer-events: none;
+  transition: 0.4s ease-in-out;
+}