From 5ba3231a1e847ff999593d5fde2fd69ba4d5203b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 16 Jun 2024 22:59:16 +0600
Subject: [PATCH] web: consistent tab bar style with rounded corners

---
 web/src/components/sidebar/Sidebar.svelte    |  7 ++++---
 web/src/components/sidebar/SidebarTab.svelte |  2 +-
 web/src/routes/+layout.svelte                | 14 +++++++++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 11691748..c54c316d 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -63,6 +63,7 @@
         height: 100vh;
         width: var(--sidebar-width);
         position: sticky;
+        padding: 0 var(--sidebar-inner-padding);
     }
 
     #sidebar-tabs {
@@ -84,7 +85,7 @@
             height: var(--sidebar-height-mobile);
             position: fixed;
             bottom: 0;
-            padding: 4px 0;
+            padding: var(--sidebar-inner-padding) 0;
         }
 
         #sidebar::before {
@@ -106,11 +107,11 @@
         }
 
         #sidebar :global(.sidebar-inner-container:first-child) {
-            padding-left: var(--padding);
+            padding-left: calc(var(--border-radius) * 2);
         }
 
         #sidebar :global(.sidebar-inner-container:last-child) {
-            padding-right: var(--padding);
+            padding-right: calc(var(--border-radius) * 2);
         }
     }
 </style>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 13593f60..d6a2f5fc 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -29,6 +29,7 @@
         font-size: var(--sidebar-font-size);
         opacity: 0.8;
         height: fit-content;
+        border-radius: var(--border-radius);
         -webkit-touch-callout: none;
     }
 
@@ -60,7 +61,6 @@
 
         .sidebar-tab.active {
             z-index: 2;
-            border-radius: var(--border-radius);
         }
     }
 </style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f3c34353..70f4b214 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -33,6 +33,7 @@
         --sidebar-width: 80px;
         --sidebar-height-mobile: calc(52px + env(safe-area-inset-bottom));
         --sidebar-font-size: 11px;
+        --sidebar-inner-padding: 4px;
 
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
@@ -76,7 +77,7 @@
     :global(html),
     :global(body) {
         margin: 0;
-        background-color: var(--primary);
+        background-color: var(--sidebar-bg);
         color: var(--secondary);
     }
 
@@ -144,7 +145,7 @@
     #cobalt {
         height: 100vh;
         display: grid;
-        grid-template-columns: var(--sidebar-width) 1fr;
+        grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
         overflow: hidden;
     }
 
@@ -153,16 +154,23 @@
         overflow: scroll;
         padding: var(--padding);
         background-color: var(--primary);
+
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
     }
 
     @media screen and (max-width: 535px) {
         #cobalt {
             display: grid;
             grid-template-columns: unset;
-            grid-template-rows: 1fr var(--sidebar-height-mobile);
+            grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
         }
         #content {
+            padding-top: env(safe-area-inset-top);
             order: -1;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: calc(var(--border-radius) * 2);
+            border-bottom-right-radius: calc(var(--border-radius) * 2);
         }
     }
 </style>