changing font styles.

build/static-files.js

@@ -4,7 +4,7 @@
  */
 export const htmlAssets = [
     'fonts/material-icons/material-icons.css',
-    'fonts/inter.css',
+    'fonts/Inter/inter.css',
     'lib/browser-polyfill.js',
 ]
 
@@ -35,7 +35,7 @@ export const copyPatterns = [
     { from: 'node_modules/pdfjs-dist/build/pdf.worker.min.js', to: 'lib/' },
     {
         from: 'fonts/*/*',
-        to: 'fonts/googlefonts/[name].[ext]',
+        to: 'fonts/Inter/[name].[ext]',
     },
     {
         from:

src/options/backup/components/overlays/download-overlay.jsx

@@ -36,15 +36,15 @@ export default function DownloadOverlay(props) {
                 </div>
                 <div className={Styles.buttonbox}>
                     <div
-                        className={Styles.colorbutton}
+                        className={Styles.continueButton}
                         onClick={() => {
                             props.onClick('continue')
                         }}
                     >
                         Continue
                     </div>
                     <div
-                        className={Styles.greybutton}
+                        className={Styles.cancelButton}
                         onClick={() => {
                             props.onClick('cancel')
                         }}

src/options/backup/components/overlays/overlay.css

@@ -1,14 +1,16 @@
 .box {
     position: absolute;
-    top: 50%;
+    padding: 50px 50px 50px 60px;
+    border: 1px solid #efefefef;
+    box-shadow: 0px 80px 80px -80px #d2d2d2;
+    border-radius: 8px;
     left: 50%;
+    z-index: 2500;
     margin-left: -300px;
     margin-top: -150px;
-    padding: 20px;
     width: 600px;
     height: 300px;
-    box-shadow: 0px 0px 4px #444;
-    background-color: #fafafa;
+    background-color: white;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
@@ -58,23 +60,28 @@
 .colorbutton,
 .greybutton {
     display: inline-block;
-    border: solid 2px #3eb995;
+    padding: 9px 10px;
     border-radius: 5px;
     padding-left: 20px;
+    background-color: #F29D9D;
+    margin-top: 20px;
     padding-right: 20px;
-    margin: 0px 10px;
-    background: white;
-    color: #3eb995;
-    font-weight: 500;
+    font-weight: bold;
     font-size: 14px;
     cursor: pointer;
 }
 
 .colorbutton {
-    background: #3eb995;
-    color: white;
+    color: #F29D9D
 }
 
 .colorbutton:hover {
-    background: #3eb995a5;
+    background: #5cd9a6;
 }
+
+.greybutton {
+}
+
+.greybutton:hover {
+    color: #1A2F58;
+}

src/popup/blacklist-button/components/BlacklistConfirm.css

@@ -1,4 +1,4 @@
-@import url('/fonts/googlefonts/Inter.css');
+@import url('/fonts/Inter/Inter.css');
 
 .container {
     display: flex;

src/styles.css

@@ -1,4 +1,4 @@
-@import url('/fonts/googlefonts/Inter.css');
+@import url('/fonts/Inter/Inter.css');
 
 .title {
     color: #3eb995;