more cleanup and fixes

src/components/widgets/countdown/countdown.scss

@@ -2,4 +2,5 @@
     position: absolute;
     bottom: 0;
     font-size: 0.95em;
+    cursor: default;
 }

src/components/widgets/time/clock.scss

@@ -14,10 +14,11 @@
     margin: 0 auto;
     border-radius: 100%;
     box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
-    border: 1px solid map-get($theme-colours, 'main');
+    border: none !important;
+    border: 1px solid map-get($theme-colours, 'main') !important;
 }
 
 .react-clock__hand__body {
-    background: map-get($theme-colours, 'main');
+    background: map-get($theme-colours, 'main') !important;
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }

src/index.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 import './scss/index.scss';
+import 'react-clock/dist/Clock.css';
 import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 
 import 'fontsource-lexend-deca/latin-400-normal.css';

src/scss/index.scss

@@ -5,7 +5,6 @@
 @import 'modules/settings';
 @import 'modules/toast';
 @import 'modules/marketplace';
-@import 'modules/checkbox';
 @import 'modules/buttons';
 @import 'modules/dropdown';
 @import 'modules/welcome';

src/scss/modules/_checkbox.scss

@@ -1,3 +0,0 @@
-.MuiCheckbox-colorPrimary.Mui-checked {
-    color: map-get($button-colours, 'reset') !important;
-}

src/scss/modules/_marketplace.scss

@@ -7,33 +7,8 @@
   }
 }
 
-
-.active:after {
-  border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important;
-}
-
-.dark {
-  .tab,
-  button.tablinks {
-    color: white;
-  }
-
-  .active:after {
-    border-image-slice: 1;
-    border-image-source: map-get($theme-colours, 'gradient');
-    border-bottom: 3px solid;
-  }
-}
-
-.tab {
-  margin-left: -3px;
-}
-
 .items {
   display: flex;
-  flex-flow: wrap;
-  align-items: left;
-  justify-content: left;
   margin-top: -10px;
 
   .item {
@@ -45,8 +20,6 @@
     transition: 0.5s;
     cursor: pointer;
     margin-right: 20px;
-    margin-bottom: 20px;
-    overflow: none;
 
     img {
       height: 100%;
@@ -81,13 +54,6 @@
       margin-top: 5px;
     }
 
-    p.desc {
-      margin-top: -14px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
     &:hover {
       transform: scale(1.1);
     }
@@ -127,14 +93,11 @@ p.description {
 
   svg {
     font-size: 50px;
-    line-height: 0px;
-    margin: 0;
     margin-bottom: -20px;
   }
 }
 
 .backArrow {
-  position: relative;
   cursor: pointer;
 
   &:hover {
@@ -160,7 +123,6 @@ p.description {
     &.header {
       text-transform: uppercase;
       color: #787878;
-      list-style: none;
       margin-left: -5px;
     }
   }
@@ -193,7 +155,6 @@ p.description {
 }
 
 .featured {
-  background: #2d3436;
   margin-top: 20px;
   border-radius: 24px;
   padding: 50px;

src/scss/modules/_modal.scss

@@ -1,18 +1,11 @@
 .Modal {
-  color: map-get($modal, 'text');
   background-color: map-get($modal, 'background');
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  border: none;
-  opacity: 1;
-  z-index: -2;
   padding: 25px;
-  cursor: hand;
   transition: 0.6s;
   transition-timing-function: ease-in;
   border-radius: map-get($modal, 'border-radius');
-  -moz-user-select: none;
   -webkit-user-select: none;
-  user-select: none;
   scrollbar-color: #34495e #bdc3c7;
 
   &:focus {
@@ -46,11 +39,6 @@
   color: white !important;
 }
 
-.ReactModal__Html--open,
-.ReactModal__Body--open {
-  overflow: hidden;
-}
-
 .zoom-in {
   @include animation('zoom-in');
 }
@@ -75,9 +63,6 @@
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 90vh;
   display: flex;
   align-items: baseline;
   justify-content: center;
@@ -161,7 +146,6 @@ button.tablinks {
 
 .tablinks {
   cursor: pointer;
-  padding: 6px;
   border-radius: 12px;
   padding: 10px 30px 10px 30px;
 
@@ -184,6 +168,27 @@ button.tablinks {
   }
 }
 
+.active:after {
+  border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important;
+}
+
+.dark {
+  .tab,
+  button.tablinks {
+    color: white;
+  }
+
+  .active:after {
+    border-image-slice: 1;
+    border-image-source: map-get($theme-colours, 'gradient');
+    border-bottom: 3px solid;
+  }
+}
+
+.tab {
+  margin-left: -3px;
+}
+
 ::-webkit-scrollbar {
   width: 13px;
   background: #bdc3c7;

src/scss/modules/_settings.scss

@@ -203,10 +203,6 @@ input[type=color]::-moz-color-swatch {
   vertical-align: middle;
 }
 
-button.remove + input[type=color].colour  {
-  margin-left: 7px;
-}
-
 // Dark Theme
 .dark {
   #blurRange, #brightnessRange {
@@ -239,4 +235,8 @@ button.remove + input[type=color].colour  {
   font-family: Consolas !important;
   border: solid 1px black !important;
   margin-left: 0px;
+}
+
+.MuiCheckbox-colorPrimary.Mui-checked {
+  color: map-get($button-colours, 'reset') !important;
 }