feat: improve keyboards UI

mishamyrt · Mar 1, 2024 · a895603 · a895603
1 parent 0c41872
commit a895603
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -9,7 +9,7 @@ export const lights: Page = {
   layoutProps: {
     toolbar: {
       draggable: true,
-      height: 200
+      height: 150
     },
     macInset: {
       enable: true