From a8956038764ba7618926fa66036cc24a92bfe8bf Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 2 Mar 2024 01:26:17 +0300
Subject: [PATCH] feat: improve keyboards UI

---
 frontend/src/entities/keys/lib/layouts/halo75.ts     |  8 ++++----
 .../src/entities/keys/ui/AbstractKeyboard.svelte     |  2 +-
 .../features/keys/select-key/ui/SelectableKey.svelte | 12 ++++++++++--
 frontend/src/pages/lights/index.ts                   |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/entities/keys/lib/layouts/halo75.ts b/frontend/src/entities/keys/lib/layouts/halo75.ts
index 78087267..00b954d7 100644
--- a/frontend/src/entities/keys/lib/layouts/halo75.ts
+++ b/frontend/src/entities/keys/lib/layouts/halo75.ts
@@ -11,10 +11,10 @@ export const Halo75: KeyboardLayout = [
     { code: 'f6', color: 'dark', secondaryCode: 'fn_f6' },
     { code: 'f7', color: 'dark', secondaryCode: 'fn_f7' },
     { code: 'f8', color: 'dark', secondaryCode: 'fn_f8' },
-    { code: 'f9', color: 'dark', secondaryCode: 'fn_f9' },
-    { code: 'f10', color: 'dark', secondaryCode: 'fn_f10' },
-    { code: 'f11', color: 'dark', secondaryCode: 'fn_f11' },
-    { code: 'f12', color: 'dark', secondaryCode: 'fn_f12' },
+    { code: 'f9', secondaryCode: 'fn_f9' },
+    { code: 'f10', secondaryCode: 'fn_f10' },
+    { code: 'f11', secondaryCode: 'fn_f11' },
+    { code: 'f12', secondaryCode: 'fn_f12' },
     { code: 'screenshot', color: 'dark' },
     { code: 'del', color: 'dark' },
     { code: 'ins', color: 'dark' }
diff --git a/frontend/src/entities/keys/ui/AbstractKeyboard.svelte b/frontend/src/entities/keys/ui/AbstractKeyboard.svelte
index 138ccde0..0f202e97 100644
--- a/frontend/src/entities/keys/ui/AbstractKeyboard.svelte
+++ b/frontend/src/entities/keys/ui/AbstractKeyboard.svelte
@@ -54,7 +54,7 @@
   }
 
   .keys {
-    --key-color-dark: #757575;
+    --key-color-dark: #6b6b6b;
     --key-color-light: rgb(196 196 196);
     --key-color-mint: rgb(46 218 151);
     --key-color-orange: rgb(226 121 80 / 100%);
diff --git a/frontend/src/features/keys/select-key/ui/SelectableKey.svelte b/frontend/src/features/keys/select-key/ui/SelectableKey.svelte
index eb0179e5..e7abd694 100644
--- a/frontend/src/features/keys/select-key/ui/SelectableKey.svelte
+++ b/frontend/src/features/keys/select-key/ui/SelectableKey.svelte
@@ -12,11 +12,13 @@
     keySelected(key)
   }
 
+  $: dark = key.color === 'dark'
   $: active = $selectedKeyStore.code === key.code
 </script>
 
 <div
   class="key"
+  class:dark
   class:active
   on:click={handleClick}
 >
@@ -30,15 +32,20 @@
     width: 100%;
     height: 100%;
     transition: var(--transition-default);
-    transition-property: background-color;
+    transition-property: background-color, color;
     border-radius: var(--key-border-radius);
     font-family: var(--typography-font-family);
+    font-weight: 500;
     font-size: 10px;
     text-align: center;
     padding-top: var(--space-xxs);
     background-color: transparent;
     cursor: default;
 
+    &.dark {
+      color: white;
+    }
+
     &::after {
       top: -4px;
       left: -4px;
@@ -50,13 +57,14 @@
       pointer-events: none;
       transition: var(--transition-default);
       border-radius: calc(var(--key-border-radius) + 4px);
-      box-shadow: 0 0 0 0 transparent;
+      box-shadow: 0 0 0 6px transparent;
     }
   }
 
   .active {
     background-color: var(--color-content-accent);
     transition-duration: 0s;
+    color: white;
 
     &::after {
       box-shadow: 0 0 0 2px var(--color-content-accent);
diff --git a/frontend/src/pages/lights/index.ts b/frontend/src/pages/lights/index.ts
index 930490ef..c657cda9 100644
--- a/frontend/src/pages/lights/index.ts
+++ b/frontend/src/pages/lights/index.ts
@@ -9,7 +9,7 @@ export const lights: Page = {
   layoutProps: {
     toolbar: {
       draggable: true,
-      height: 200
+      height: 150
     },
     macInset: {
       enable: true