🩹(frontend) fix color contrast when toggling a control

Copied legacy style from the screen share control. Still imperfect, but at least it's visually more "comfy".
2024-09-03 14:34:45 +02:00
parent e6e6a3bde7
commit 26ca81db40
1 changed files with 6 additions and 3 deletions
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -140,6 +140,7 @@ export const buttonRecipe = cva({
    legacyStyle: {
      true: {
        borderColor: 'gray.400',
+        transition: 'border 200ms, background 200ms, color 200ms',
        '&[data-hovered]': {
          borderColor: 'gray.500',
        },
@@ -147,10 +148,12 @@ export const buttonRecipe = cva({
          borderColor: 'gray.500',
        },
        '&[data-selected]': {
-          background: '#e5e7eb',
-          borderColor: 'gray.400',
+          backgroundColor: '#1d4ed8',
+          color: 'white',
+          borderColor: 'gray.500',
          '&[data-hovered]': {
-            backgroundColor: 'gray.300',
+            borderColor: '#6b7280',
+            backgroundColor: '#1e40af',
          },
        },
      },