From 65c14d41fa2acbd64c7a42085cf445fd71e7a88a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 16 Jun 2024 23:30:10 +0600
Subject: [PATCH] web: make tab focus blue for better visibility

---
 web/src/components/save/Omnibox.svelte                | 1 +
 web/src/components/save/buttons/DownloadButton.svelte | 2 +-
 web/src/components/sidebar/SidebarTab.svelte          | 5 +++--
 web/src/routes/+layout.svelte                         | 3 ++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index f969590b..e986100b 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -115,6 +115,7 @@
     #input-container.focused :global(#input-link-icon) {
         stroke: var(--secondary);
     }
+
     #input-container.downloadable :global(#input-link-icon) {
         stroke: var(--secondary);
     }
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 86b56b15..2e0838cb 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -106,7 +106,7 @@
     }
 
     #download-button:focus-visible {
-        box-shadow: 0 0 0 1.5px var(--secondary) inset;
+        box-shadow: 0 0 0 2px var(--blue) inset;
     }
 
     #download-state {
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index d6a2f5fc..36b50f6c 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -44,13 +44,14 @@
     }
 
     .sidebar-tab:focus-visible {
-        box-shadow: 0 0 0 1.5px var(--sidebar-highlight) inset;
+        box-shadow: 0 0 0 3px var(--blue) inset;
         outline: none;
         z-index: 1;
     }
 
     .sidebar-tab.active:focus-visible {
-        box-shadow: 0 0 0 1.5px var(--sidebar-bg) inset;
+        background: var(--blue);
+        color: var(--sidebar-highlight);
     }
 
     @media screen and (max-width: 535px) {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 70f4b214..bfc6deff 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -16,6 +16,7 @@
         --primary: #ffffff;
         --secondary: #000000;
         --gray: #8d8d95;
+        --blue: #2f8af9;
 
         --button: #eeeeee;
         --button-hover: #e8e8e8;
@@ -120,7 +121,7 @@
     }
 
     :global(button:focus-visible) {
-        box-shadow: 0 0 0 1.5px var(--secondary) inset;
+        box-shadow: 0 0 0 2px var(--blue) inset;
         outline: none;
         z-index: 1;
     }