Minor fixes

gilbarbara · Sep 9, 2024 · 79040a4 · 79040a4
1 parent 228db67
commit 79040a4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/components/DatePicker/utils.tsx b/src/components/DatePicker/utils.tsx
@@ -153,11 +153,11 @@ export function getPickerStyles(
 
       &:focus,
       &:active {
-        background-color: ${colorVariant['50']};
+        background-color: ${darkMode ? colorVariant[300] : colorVariant['50']};
       }
 
       &:hover:not([aria-disabled='true']) {
-        background-color: ${colorVariant[50]};
+        background-color: ${darkMode ? colorVariant[300] : colorVariant[50]};
       }
     }
 
@@ -373,6 +373,12 @@ export function getPickerStyles(
       font-weight: bold;
     }
 
+    .${className}-day_range_middle {
+      border-radius: 0;
+      background-color: ${darkMode ? colorVariant[200] : colorVariant[50]} !important;
+      color: ${variants.gray['900']} !important;
+    }
+
     .${className}-day_selected:not([aria-disabled='true']),
     .${className}-day_selected:focus:not([aria-disabled='true']),
     .${className}-day_selected:active:not([aria-disabled='true']),
@@ -412,11 +418,5 @@ export function getPickerStyles(
     .${className}-day_range_end.${className}-day_range_start {
       border-radius: 100%;
     }
-
-    .${className}-day_range_middle {
-      border-radius: 0;
-      background-color: ${colorVariant[50]} !important;
-      color: ${variants.gray['900']} !important;
-    }
   `;
 }
diff --git a/src/components/Keyboard/Keyboard.tsx b/src/components/Keyboard/Keyboard.tsx
@@ -6,6 +6,8 @@ import { useStableValue } from '@gilbarbara/hooks';
 import { getColorTokens } from '~/modules/colors';
 import { getStyledOptions, getStyles } from '~/modules/system';
 
+import { FlexInline } from '~/components/Flex';
+
 import { WithTheme } from '~/types';
 
 import { keyboardKeysLabelMap, keyboardKeysMap, KeyboardProps, useKeyboard } from './useKeyboard';
@@ -44,12 +46,12 @@ export const Keyboard = forwardRef<HTMLSpanElement, KeyboardProps>((props, ref)
 
   const keysContent = useMemo(() => {
     return keysValue.map((key, index) => (
-      <>
-        <abbr key={key} title={keyboardKeysLabelMap[key]}>
+      <FlexInline key={key}>
+        <abbr title={keyboardKeysLabelMap[key]}>
           {textOnly ? keyboardKeysLabelMap[key] : keyboardKeysMap[key]}
         </abbr>
         {separator && index < keysValue.length - 1 && separator}
-      </>
+      </FlexInline>
     ));
   }, [keysValue, separator, textOnly]);