💄 Change checkboxes in darkmode

Co-authored-by: Lenni009 <guentherhanslphdyt@gmail.com>
AssistantNMS · Feb 5, 2023 · 71af716 · 71af716
1 parent 0fd5391
commit 71af716
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/src/components/common/dialog/baseDialog.tsx b/src/components/common/dialog/baseDialog.tsx
@@ -9,8 +9,8 @@ const customStyles = {
         bottom: 'auto',
         marginRight: '-50%',
         transform: 'translate(-50%, -50%)',
-		backgroundColor: '#4a4a4a',
-		borderColor: '#AAA',
+        backgroundColor: '#4a4a4a',
+        borderColor: '#AAA',
     },
 };
 

diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -1,6 +1,13 @@
-$defaultFont: "Roboto", Helvetica, Arial, sans-serif !important;
-$nmsAlphaThemed: "NMSFuturaProBook", Helvetica, sans-serif !important;
-$expAlphaThemed: "NMSExpeditionAlphabet", Helvetica, sans-serif !important;
+$defaultFont: "Roboto",
+Helvetica,
+Arial,
+sans-serif !important;
+$nmsAlphaThemed: "NMSFuturaProBook",
+Helvetica,
+sans-serif !important;
+$expAlphaThemed: "NMSExpeditionAlphabet",
+Helvetica,
+sans-serif !important;
 
 @import "./custom/genericListPresenter";
 @import "./custom/guideCardListTile";
@@ -30,4 +37,4 @@ $expAlphaThemed: "NMSExpeditionAlphabet", Helvetica, sans-serif !important;
 
 @import "./custom/catalogue";
 
-@import "./custom/theme";
+@import "./custom/theme";
diff --git a/src/scss/custom/_theme.scss b/src/scss/custom/_theme.scss
@@ -99,8 +99,8 @@ body {
             margin-top: 1em;
         }
 
-        .table > thead > tr > th,
-        .table > tbody > tr > td {
+        .table>thead>tr>th,
+        .table>tbody>tr>td {
             border-color: white;
         }
     }
@@ -142,13 +142,14 @@ body {
             color: white;
         }
 
-        li.active > a {
+        li.active>a {
             background-color: $brand-primary;
         }
 
         .nav-item:not(.active) {
             .nav-link {
                 transition: all 250ms ease-in-out;
+
                 &:hover {
                     background: #424242;
                 }
@@ -160,7 +161,7 @@ body {
         input {
             color: $white-color;
             background-image: linear-gradient(to top, #{$brand-primary} 2px, rgba(63, 81, 181, 0) 2px),
-                linear-gradient(to top, #{$white-color} 1px, rgba(210, 210, 210, 0) 1px);
+            linear-gradient(to top, #{$white-color} 1px, rgba(210, 210, 210, 0) 1px);
 
             $placeholderColor: rgba(255, 255, 255, 0.9);
             $placeholderFontSize: 0.75em;
@@ -265,7 +266,7 @@ body {
     }
 
     .discussion {
-        > .bubble.sender {
+        >.bubble.sender {
             background-color: #606060;
             color: #fff;
 
@@ -274,15 +275,15 @@ body {
             }
         }
 
-        > .bubble.recipient {
+        >.bubble.recipient {
             background-color: $brand-primary;
 
             &:before {
                 border-color: $brand-primary transparent transparent transparent !important;
             }
         }
 
-        > .bubble.option {
+        >.bubble.option {
             background-color: $brand-secondary;
             color: black;
         }
@@ -308,6 +309,14 @@ body {
             background-color: $brand-primary-background !important;
         }
     }
+
+    .form-check .form-check-input:checked+.form-check-sign .check:before {
+        color: #4a4a4a;
+    }
+
+    .form-check .form-check-input:checked+.form-check-sign .check {
+        background: lighten($brand-primary, 10%);
+    }
 }
 
 .react-modal-sheet-container {
@@ -321,4 +330,4 @@ body {
     a {
         color: $brand-secondary;
     }
-}
+}