chore: reduce navigation border

Removes box shadows from titlebar and navigation, and replaces them with a 1px
border controlled by a new color variable.

Part of #8250.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/main/src/plugin/color-registry.ts

@@ -281,6 +281,10 @@ export class ColorRegistry {
       dark: colorPalette.charcoal[600],
       light: colorPalette.gray[100],
     });
+    this.registerColor(`${glNav}bg-border`, {
+      dark: colorPalette.charcoal[500],
+      light: colorPalette.gray[300],
+    });
     this.registerColor(`${glNav}icon`, {
       dark: colorPalette.gray[600],
       light: colorPalette.charcoal[200],

packages/renderer/src/AppNavigation.svelte

@@ -244,7 +244,7 @@ export let meta: TinroRouteMeta;
 
 <svelte:window />
 <nav
-  class="group w-leftnavbar min-w-leftnavbar flex flex-col hover:overflow-y-none bg-[var(--pd-global-nav-bg)]"
+  class="group w-leftnavbar min-w-leftnavbar flex flex-col hover:overflow-y-none bg-[var(--pd-global-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="AppNavigation">
   <NavItem href="/" tooltip="Dashboard" bind:meta={meta}>
     <div class="relative w-full">

packages/renderer/src/PreferencesNavigation.svelte

@@ -41,7 +41,7 @@ onMount(async () => {
 </script>
 
 <nav
-  class="z-1 w-leftsidebar min-w-leftsidebar shadow flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)]"
+  class="z-1 w-leftsidebar min-w-leftsidebar flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="PreferencesNavigation">
   <div class="flex items-center">
     <div class="pt-4 px-3 mb-10">

packages/renderer/src/lib/dashboard/DashboardPage.svelte

@@ -38,7 +38,7 @@ function getInitializationContext(id: string): InitializationContext {
 </script>
 
 <NavPage searchEnabled={false} title="Dashboard">
-  <div slot="content" class="flex flex-col min-w-full h-full bg-[var(--pd-content-bg)] shadow-nav py-5">
+  <div slot="content" class="flex flex-col min-w-full h-full bg-[var(--pd-content-bg)] py-5">
     <div class="min-w-full flex-1">
       <NotificationsBox />
       <div class="px-5 space-y-5 h-full">

packages/renderer/src/lib/ui/TitleBar.svelte

@@ -18,7 +18,8 @@ onMount(async () => {
   class="{platform === 'win32' ? 'bg-[#202020]' : 'bg-[var(--pd-titlebar-bg)]'} body-font z-[999] relative {platform ===
   'win32'
     ? 'min-h-[32px]'
-    : 'min-h-[38px]'}"
+    : 'min-h-[38px]'}
+    border-[var(--pd-global-nav-bg-border)] border-b-[1px]"
   style="-webkit-app-region: drag;">
   <div class="flex select-none">
     <!-- On Linux, title is centered and we have control buttons in the title bar-->

packages/ui/src/lib/layouts/NavPage.svelte

@@ -6,7 +6,7 @@ export let searchTerm = '';
 export let searchEnabled = true;
 </script>
 
-<div class="flex flex-col w-full h-full shadow-pageheader">
+<div class="flex flex-col w-full h-full">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label={title}>
     <div class="flex pb-2" role="region" aria-label="header">
       <div class="px-5">

packages/ui/src/lib/layouts/Page.svelte

@@ -36,7 +36,7 @@ function handleKeydown(e: KeyboardEvent): void {
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="flex flex-col w-full h-full shadow-pageheader bg-[var(--pd-content-bg)]">
+<div class="flex flex-col w-full h-full bg-[var(--pd-content-bg)]">
   <div class="flex flex-row w-full h-fit px-5 pt-4 pb-2" aria-label="Header" role="region">
     <div class="flex flex-col w-full h-fit">
       {#if showBreadcrumb}

tailwind.config.cjs

@@ -29,11 +29,6 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
-      boxShadow: {
-        "titlebar": 'inset 0px -1px 0px 0 rgb(54 54 61 / 0.6)', // highlight for bottom of titlebar
-	"pageheader": 'inset 0 0px 10px 0 rgb(0 0 0 / 0.4)',
-	"nav": 'inset 7px -4px 6px 0 rgb(0 0 0 / 0.15)',
-      },
       transitionProperty: {
         width: 'width',
       },