making things prettier

riesentoaster · Nov 19, 2023 · 54212e9 · 54212e9
1 parent 196d367
commit 54212e9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/src/generic/EllipsisSwitch.tsx b/src/generic/EllipsisSwitch.tsx
@@ -20,7 +20,7 @@ export const EllipsisSwitch = <T extends string, >( {
           <button
             type="button"
             className={`px-5 rounded-full basis-0 grow ${
-              state === k && 'bg-accentColorBackground border rounded-full'}`}
+              state === k && 'bg-accentColorBackground border-x-[1px] rounded-full'}`}
             key={k}
             onClick={(): void => setState( k as T ) }
           >{v as string}</button>

diff --git a/src/generic/Toggle.module.scss b/src/generic/Toggle.module.scss
@@ -39,6 +39,7 @@
     input:checked+div {
         background-color: var(--color-body-background);
         margin-left: auto;
+        border: none;
     }
 
 }
diff --git a/src/generic/TriStateSwitch.module.scss b/src/generic/TriStateSwitch.module.scss
@@ -36,7 +36,8 @@
     :has(:nth-child(2) :checked) {
         .switchElement:nth-child(2) {
             background: var(--color-accent-background);
-            border: $borderStyle;
+            border-left-width: 1px;
+            border-right-width: 1px;
             border-radius: 100vh;
         }
     }
@@ -45,13 +46,11 @@
     :has(:first-child :checked) {
         .switchElement:not(:last-child) {
             background: var(--color-green);
-            border: $borderStyle;
-            border-right: none;
+            border-right-width: 1px;
         }
 
         .switchElement:nth-child(2) {
-            border: $borderStyle;
-            border-left: none;
+            border-right-width: 1px;
             border-radius: 0 100vh 100vh 0;
         }
     }
@@ -60,13 +59,11 @@
     :has(:last-child :checked) {
         .switchElement:not(:first-child) {
             background: var(--color-red);
-            border: $borderStyle;
-            border-left: none;
+            border-left-width: 1px;
         }
 
         .switchElement:nth-child(2) {
-            border: $borderStyle;
-            border-right: none;
+            border-left-width: 1px;
             border-radius: 100vh 0 0 100vh;
         }
     }

diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
@@ -1,17 +1,15 @@
-$htmlBackgroundColor: #010411;
 $blue: #010c1e;
 $accentColorDarkBlue: #062048;
 $accentColorLightBlue: #052049;
 $accentColorOffWhite: #c6cdd7;
 
-$borderStyle: 1px solid var(--color-accent-text);
+$borderStyle: var(--border-thickness) solid var(--color-accent-text);
 
 * {
     border-color: var(--color-accent-text);
 }
 
 @mixin dark-mode-styling {
-    --color-html-background: #{$htmlBackgroundColor};
     --color-body-background: #{$blue};
     --color-text: #d5d9e0;
     --color-accent-background: #{$accentColorDarkBlue};
@@ -22,20 +20,22 @@ $borderStyle: 1px solid var(--color-accent-text);
     --color-red-foreground: #f87171;
     --color-green: #004000;
     --color-yellow-foreground: #facc15;
+
+    --border-thickness: 1px;
 }
 
 @mixin light-mode-styling {
-    --color-html-background: #d5d9e0;
-    --color-body-background: #eaecf0;
+    --color-body-background: white;
     --color-text: #{$blue};
-    --color-accent-background: #{$accentColorOffWhite};
+    --color-accent-background: #8bb6fb;
     --color-accent-text: #{$accentColorDarkBlue};
     --color-input-background: #{$accentColorOffWhite};
     --color-input-text: #{$blue};
     --color-red: #FF6060;
     --color-red-foreground: #dc2626;
     --color-green: #70d070;
     --color-yellow-foreground: #ca8a04;
+    --border-thickness: 2px;
 }
 
 body {

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -7,14 +7,13 @@
 @import './slider';
 
 html {
-    background-color: var(--color-html-background);
     height: 100%;
 }
 
+
 body {
     color: var(--color-text);
     font-family: Avenir, Helvetica, Arial, sans-serif;
-    ;
     background-color: var(--color-body-background);
     margin: 0 auto;
     min-height: 100%;
@@ -89,4 +88,8 @@ input {
 
 :focus {
     outline: none;
+}
+
+.border {
+    border-width: var(--border-thickness);
 }