chore: adjust styles to new dark mode logic

cpvalente · Jan 9, 2025 · 87fb50b · 87fb50b
1 parent 62b776b
commit 87fb50b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 18 deletions.
diff --git a/apps/client/src/common/components/ui/alert.tsx b/apps/client/src/common/components/ui/alert.tsx
@@ -13,9 +13,9 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
 }
 
 export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
-  const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
+  const { title, children, icon, closable, onClose, startElement, endElement, colorPalette = 'gray', ...rest } = props;
   return (
-    <ChakraAlert.Root ref={ref} {...rest}>
+    <ChakraAlert.Root ref={ref} colorPalette={colorPalette} {...rest}>
       {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
       {children ? (
         <ChakraAlert.Content>

diff --git a/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss b/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss
@@ -14,6 +14,7 @@
   cursor: pointer;
   margin-right: 0.5em;
   background: transparent;
+  color: white;
 
   &.active {
     opacity: 1;

diff --git a/apps/client/src/theme/ontimeAlert.ts b/apps/client/src/theme/ontimeAlert.ts
@@ -7,7 +7,6 @@ export const ontimeAlertRecipe = defineSlotRecipe({
     root: {
       fontSize: 'calc(1rem - 1px)',
       borderRadius: '3px',
-      backgroundColor: '#202020 !important', // $gray-1200
     },
     title: {
       color: '#e2e2e2', // $gray-200

diff --git a/apps/client/src/theme/ontimeCheckbox.ts b/apps/client/src/theme/ontimeCheckbox.ts
@@ -6,8 +6,10 @@ export const ontimeCheckboxRecipe = defineSlotRecipe({
   base: {
     root: {
       fontSize: 'sm',
+      cursor: 'pointer',
     },
     control: {
+      border: '1px solid #2d2d2d !important', // $gray-1100
       backgroundColor: '#2d2d2d', // $gray-1100
       _disabled: {
         color: 'white',
@@ -16,7 +18,8 @@ export const ontimeCheckboxRecipe = defineSlotRecipe({
         opacity: 0.6,
       },
       _checked: {
-        borderColor: '#3182ce !important', // $action-blue
+        border: '1px solid #3182ce !important', // $action-blue
+        color: '#fff !important',
         backgroundColor: '#3182ce !important', //$action-blue
         _disabled: {
           color: 'white',

diff --git a/apps/client/src/theme/ontimeRadio.ts b/apps/client/src/theme/ontimeRadio.ts
@@ -14,17 +14,17 @@ export const ontimeRadioGroupRecipe = defineSlotRecipe({
     },
     itemControl: {
       cursor: 'pointer',
-      border: '2px solid #262626 !important', // $gray-1200
+      border: '2px solid #262626', // $gray-1200
       backgroundColor: '#262626', // $gray-1200
       _checked: {
-        backgroundColor: '#3182ce !important', // $action-blue,
+        backgroundColor: '#3182ce', // $action-blue,
         _hover: {
-          border: '3px solid #2b6cb0 !important', // $gray-1200
+          border: '3px solid #2b6cb0', // $gray-1200
         },
       },
       _hover: {
-        color: '#3182ce !important!', // $action-blue
-        backgroundColor: '#3182ce !important', // $action-blue,
+        color: '#3182ce', // $action-blue
+        backgroundColor: '#3182ce', // $action-blue,
       },
     },
     itemText: {

diff --git a/apps/client/src/theme/ontimeSelect.ts b/apps/client/src/theme/ontimeSelect.ts
@@ -11,14 +11,14 @@ export const ontimeSelectRecipe = defineSlotRecipe({
       borderRadius: '3px',
       fontWeight: '400',
       background: '#262626', // $gray-1100
-      border: '1px solid transparent !important',
+      border: '1px solid transparent',
       _hover: {
         background: '#404040', // $gray-1000
       },
       _focus: {
-        background: '#404040', // $gray-1000
+        backgroundColor: '#404040', // $gray-1000
         color: '#f6f6f6', // $gray-50
-        border: '1px solid #578AF4 !important', // $blue-500
+        border: '1px solid #578AF4', // $blue-500
       },
       _disabled: {
         _hover: {
@@ -39,7 +39,7 @@ export const ontimeSelectRecipe = defineSlotRecipe({
       _focus: {
         background: '#404040', // $gray-1000
         color: '#f6f6f6', // $gray-50
-        border: '1px solid #578AF4 !important', // $blue-500
+        border: '1px solid #578AF4', // $blue-500
       },
     },
     item: {
@@ -68,14 +68,14 @@ export const ontimeNativeSelectRecipe = defineSlotRecipe({
       color: '#e2e2e2', // $gray-200
     },
     field: {
-      border: '1px solid transparent !important',
+      border: '1px solid transparent',
       _hover: {
         background: '#404040', // $gray-1000
       },
       _focus: {
         background: '#404040', // $gray-1000
         color: '#f6f6f6', // $gray-50
-        border: '1px solid #578AF4 !important', // $blue-500
+        border: '1px solid #578AF4', // $blue-500
       },
       _disabled: {
         _hover: {

diff --git a/apps/client/src/theme/ontimeSwitch.ts b/apps/client/src/theme/ontimeSwitch.ts
@@ -7,16 +7,19 @@ export const ontimeSwitchRecipe = defineSlotRecipe({
     root: {
       fontSize: 'sm',
       '& > [data-state="unchecked"]': {
-        background: '#2d2d2d', // $gray-1100
+        backgroundColor: '#2d2d2d', // $gray-1100
       },
       _checked: {
         '& > [data-state="checked"]': {
-          background: '#2B5ABC', // $blue-700
+          backgroundColor: '#2B5ABC', // $blue-700
         },
       },
+      '& [data-part="thumb"]': {
+        backgroundColor: '#fff !important',
+      },
     },
     thumb: {
-      outline: '2px solid transparent',
+      border: '2px solid transparent',
     },
     control: {
       _focus: {