Final

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/scss/modules/_modal.scss

@@ -16,21 +16,15 @@
 .modalLink {
   color: #5352ed;
   cursor: pointer;
-}
-
-.Overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  &:hover {
+    opacity: 0.8;
+  }
 }
 
 .closeModal {
   float: right;
   font-size: 2em;
   cursor: pointer;
-
   &:hover {
     color: grey;
   }
@@ -46,11 +40,13 @@
   overflow: hidden; /* prevents background page from scrolling when the modal is open */
 }
 
-.ReactModal__Overlay {
+.Overlay {
   position: fixed;
   z-index: 999999;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   width: 100vw;
   height: 90vh;
   display: flex;

src/scss/modules/_settings.scss

@@ -22,8 +22,6 @@ $gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
   border-radius: 34px;
 
   &:before {
@@ -170,6 +168,10 @@ h4, #engines {
 ul {
   padding-left: 5px;
   margin: 0;
+
+  > label {
+    vertical-align: middle;
+  }
 }
 
 li {
@@ -215,16 +217,13 @@ input[type=color] {
   outline: none;
   -webkit-appearance: none;
   vertical-align: middle;
-}
 
-input[type=color]::-webkit-color-swatch-wrapper {
-  padding: 0;	
-}
-input[type=color]::-webkit-color-swatch {
-  border: none;
-  border-radius: 100%;
-}
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;	
+  }
 
-ul > label {
-  vertical-align: middle;
-}
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 100%;
+  }
+}