Final

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

manifest/chrome.json

@@ -3,7 +3,7 @@
     "offline_enabled": true,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7.1",
+    "version": "3.0.0",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

manifest/firefox.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7.2",
+    "version": "3.0.0",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

manifest/opera.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7.1",
+    "version": "3.0.0",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

src/components/Settings.jsx

@@ -199,15 +199,16 @@ export default class Settings extends React.Component {
             <span className="slider"></span>
           </label>
         </div>
+        <h3>Experimental</h3>
         <div className='section'>
-          <h4>Enable WebP (experimental)</h4>
+          <h4>Enable WebP</h4>
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('webp')} id='webpStatus'  />
             <span className="slider"></span>
           </label>
         </div>
         <div className='section'>
-          <h4>Dark Theme (experimental)</h4>
+          <h4>Dark Theme</h4>
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus'  />
             <span className="slider"></span>

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