Feat: add dropshadows (#2288)

* Updating palette + adding drop shadows

- Adding highlight shadow below titlebar
- Adding dropshadow to right of main nav
- Updating color palette to latest mockups

Signed-off-by: Máirín Duffy <duffy@redhat.com>

* Adding dropshadow to settings nav

- adding drop shadow between main nav and settings nav panel

Signed-off-by: Máirín Duffy <duffy@redhat.com>

* Adding custom dropshadows to theme & using

- Drop shadows had been using arbitrary inline shadows
- Shadows have been moved to the tailwind config js / theme
- Arbitrary shadows inline updated to use new theme shadows

Signed-off-by: Máirín Duffy <duffy@redhat.com>

---------

Signed-off-by: Máirín Duffy <duffy@redhat.com>
Co-authored-by: Máirín Duffy <mairin@users.noreply.github.com>

packages/renderer/src/App.svelte

@@ -71,7 +71,10 @@ window.events?.receive('display-help', () => {
 
 <Route path="/*" breadcrumb="Home" let:meta>
   <main class="min-h-screen flex flex-col h-screen bg-charcoal-800">
-    <header id="navbar" class="text-gray-700 bg-charcoal-900 body-font" style="-webkit-app-region: drag;">
+    <header
+      id="navbar"
+      class="text-gray-700 bg-charcoal-900 body-font shadow-titlebar z-999;"
+      style="-webkit-app-region: drag;">
       <div class="flex mx-auto flex-row p-2 items-center">
         <div class="flex lg:w-2/5 flex-1 items-center text-base ml-auto"></div>
         <div

packages/renderer/src/PreferencesNavigation.svelte

@@ -49,7 +49,7 @@ $: addSectionHiddenClass = (section: string): string => (sectionExpanded[section
 </script>
 
 <nav
-  class="pf-c-nav z-0 w-[250px] min-w-[200px] shadow flex-col justify-between flex transition-all duration-500 ease-in-out"
+  class="pf-c-nav z-0 w-[250px] min-w-[200px] flex-col justify-between flex transition-all duration-500 ease-in-out shadow-nav"
   style="background-color: rgb(39 39 42 / var(--tw-bg-opacity))"
   aria-label="Global">
   <div class="flex items-center">

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

@@ -26,7 +26,7 @@ function updateInitializationMode(id: string, mode: InitializationMode) {
 </script>
 
 <NavPage searchEnabled="{false}" title="Dashboard">
-  <div slot="empty" class="flex flex-col min-h-full bg-charcoal-700">
+  <div slot="empty" class="flex flex-col min-h-full bg-charcoal-700 shadow-nav">
     <div class="min-w-full flex-1">
       <div class="pt-5 px-5 space-y-5">
         <!-- Provider is ready display a box to indicate some information -->

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

@@ -4,7 +4,7 @@ export let searchTerm = '';
 export let searchEnabled: boolean = true;
 </script>
 
-<div class="flex flex-col min-h-full min-w-full">
+<div class="flex flex-col min-h-full min-w-full shadow-pageheader">
   <div class="min-w-full pt-4" class:pb-4="{!searchEnabled}">
     <div class="flex">
       <div class="px-5">

tailwind.config.cjs

@@ -25,6 +25,11 @@ module.exports = {
   ],
   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',
       },