From cc2f3987c3f6386da140fefcb1998cb1eef18839 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 11 Mar 2024 23:19:45 +0000
Subject: Add extra razzmatazz

---
 components/editor/OptionsPanel.vue |  1 +
 components/editor/Sidebar.vue      |  2 ++
 components/header/SiteHeader.vue   | 21 ++++++++++++---------
 3 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'components')

diff --git a/components/editor/OptionsPanel.vue b/components/editor/OptionsPanel.vue
index 1415d84..7cf8982 100644
--- a/components/editor/OptionsPanel.vue
+++ b/components/editor/OptionsPanel.vue
@@ -12,6 +12,7 @@
   width: 100%;
   background-color: var(--color-background);
   border: 1px solid var(--color-border);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   height: 100%;
 }
diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue
index c48f3b4..992dd86 100644
--- a/components/editor/Sidebar.vue
+++ b/components/editor/Sidebar.vue
@@ -50,6 +50,8 @@ const setSelectedType = (type: 'quests' | 'items') => {
   background-color: var(--color-background);
   user-select: none;
   position: relative;
+  z-index: 0;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
 
   #selector {
     display: flex;
diff --git a/components/header/SiteHeader.vue b/components/header/SiteHeader.vue
index f51e970..0773a03 100644
--- a/components/header/SiteHeader.vue
+++ b/components/header/SiteHeader.vue
@@ -2,14 +2,13 @@
   <header>
     <div id="nav">
       <img src="@/assets/quests-logo.png" alt="Quests logo" />
-        <h1>Quests Web Editor</h1>
-        <code>Preview</code>
+      <h1>Quests Web Editor</h1>
+      <code>Preview</code>
     </div>
-  </header> 
+  </header>
 </template>
 
 <style lang="scss" scoped>
-
 #nav {
   padding: 1rem 1rem 0.5rem 1rem;
   display: flex;
@@ -17,27 +16,31 @@
   justify-content: flex-start;
   max-height: 72px;
   gap: 1rem;
+  color: var(--color-header-text);
 
   img {
     max-width: 3rem;
     height: auto;
   }
-  
+
   h1 {
     font-size: 1.5rem;
     margin: -5px 0 0 0;
     font-weight: 700;
   }
-  
+
   code {
     font-size: 0.8rem;
-    color: var(--color-text-mute);
+    color: var(--color-header-text-mute);
   }
-  
+
 }
 
 header {
   border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-header);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  position: relative;
+  z-index: 1;
 }
-
 </style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2