From ba2dc61a5dab2508877db4a4f32bd5fa69034771 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Thu, 20 May 2021 12:27:52 +0100
Subject: [PATCH] fix: css fixes for firefox and safari, fix widget order css

---
 src/components/modals/main/scss/index.scss    | 21 ++++++++++++++-----
 .../modals/main/scss/settings/_buttons.scss   |  6 ++++--
 .../modals/main/scss/settings/_dropdown.scss  |  7 +++++--
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 1bea9a71..f9a95252 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -31,8 +31,7 @@
   padding: 25px;
 }
 
-.modalLink {
-  margin-left: 5px;
+.resetLink {
   color: var(--modal-link);
   cursor: pointer;
 
@@ -48,6 +47,16 @@
   }
 }
 
+.modalLink {
+  color: var(--modal-link);
+  cursor: pointer;
+  margin-left: 5px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .closeModal {
   position: absolute;
   top: 1rem;
@@ -295,7 +304,7 @@ li {
   background: map-get($theme-colours, 'gradient');
   -webkit-background-clip: text;
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: transparent;
 
   svg {
     color: orange;
@@ -305,7 +314,7 @@ li {
     background: map-get($theme-colours, 'gradient');
     -webkit-background-clip: text;
     background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: transparent;
   }
 }
 
@@ -377,7 +386,9 @@ li {
   margin-top: 10px !important;
 }
 
-label, p, span.modalLink {
+label,
+p,
+span.modalLink {
   font-size: 1rem;
 }
 
diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index 8f76ebb6..d701e4bc 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -81,6 +81,10 @@
   border-radius: 15px;
   margin-bottom: 10px;
   font-size: 1.325rem;
+  color: var(--modal-text) !important;
+  cursor: move;
+  width: 150px;
+  z-index: 999 !important;
 
   svg {
     font-size: 1.3rem;
@@ -90,8 +94,6 @@
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
     transition: 0.3s;
   }
-
-  z-index: 999 !important;
 }
 
 .MuiTouchRipple-root {
diff --git a/src/components/modals/main/scss/settings/_dropdown.scss b/src/components/modals/main/scss/settings/_dropdown.scss
index 3cfe8725..8aec5b42 100644
--- a/src/components/modals/main/scss/settings/_dropdown.scss
+++ b/src/components/modals/main/scss/settings/_dropdown.scss
@@ -12,8 +12,11 @@ select {
 @supports (-moz-appearance: none) {
   select {
     -moz-appearance: none !important;
-    background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, var(--sidebar) !important;
-    background-position: calc(100% - 15px) center !important;
+    background: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
+  }
+
+  .dark select {
+    background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
   }
 
   option {