style: go dark

client/src/common/components/buttons/NextIconBtn.jsx

@@ -5,7 +5,8 @@ export default function NextIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipForward />}
-      colorScheme= 'blackAlpha'
+      colorScheme= 'whiteAlpha'
+      backgroundColor='#ffffff05'
       variant= 'outline'
       onClick={props.clickHandler}
       width={90}

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -5,7 +5,8 @@ export default function PrevIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipBack />}
-      colorScheme= 'blackAlpha'
+      colorScheme= 'whiteAlpha'
+      backgroundColor='#ffffff05'
       variant= 'outline'
       onClick={props.clickHandler}
       width={90}

client/src/common/components/countdown/Countdown.module.css

@@ -22,5 +22,5 @@
   text-align: center;
   letter-spacing: 0.1em;
   font-weight: 600;
-  color: #333;
+  color: #fffffa;
 }

client/src/common/components/text/NumberedText.module.css

@@ -4,7 +4,8 @@
   color: white;
   font-weight: 600;
 
-  background-color: #319795;
+  background-color: #ff5b7e;
+  border: 1px solid rgba(255,255,255,0.47);
   width: 1.5em;
   border-radius: 1em;
 

client/src/common/input/EditableText.module.css

@@ -2,14 +2,14 @@
 .titleUnderlined {
   padding-left: 1em;
   font-size: 0.8em;
-  color: #888;
+  color: #aaa;
   display: inline-block;
   width: 6em;
   cursor: default;
 }
 
 .titleUnderlined {
-  border-bottom: 1px solid #0001;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
 }
 
 .block {
@@ -23,4 +23,4 @@
 .editable13 {
   width: '13em';
   min-width: '13em';
-}
+}

client/src/common/input/EditableTimer.module.css

@@ -1,6 +1,6 @@
 .time {
-  background-color: #fff8;
-  border: 1px solid #0001;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   width: 5em;
   height: fit-content;
@@ -9,19 +9,18 @@
 .editable,
 .delayedEditable {
   text-align: center;
+  border-radius: 4px;
 }
 
 .delayedEditable {
-  background-color: #ecc94b22;
+  border: 1px solid #ecc94b;
 }
 
 .delayValue {
-  font-size: 14px;
-  line-height: 2em;
-  color: #555;
-  background-color: #ffeaa066;
+  color: #fff;
   border-radius: 4px;
+  padding: 0.3em 0;
   text-align: center;
-  border: 1px solid #0001;
+  align-self: flex-start;
+  background-color: #d69e2e;
 }
-

client/src/common/input/TimeInput.jsx

@@ -4,7 +4,11 @@ import style from './TimeInput.module.css';
 
 const inputProps = {
   width: 20,
-  backgroundColor: '#fff5',
+  fontWeight: 400,
+  backgroundColor: 'rgba(0,0,0,0.05)',
+  color: '#fff',
+  border: '1px solid #ecc94b',
+  borderRadius: '4px',
   placeholder: '-',
   textAlign: 'center',
 };

client/src/common/input/TimeInput.module.css

@@ -4,6 +4,7 @@
 }
 
 .label {
-  color: #0005;
   padding-left: 0.8em;
+  align-self: center;
+  font-weight: 600;
 }