From 363998a2af06e01b2ce39df9bbeb2dcf1fe356b3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 6 Sep 2021 16:23:12 +0100
Subject: [PATCH] Fix button theming and add nav text theming

---
 .../design/AppPreview/ThemeEditor.svelte      | 13 +++++--
 .../src/components/CustomThemeWrapper.svelte  |  2 +-
 .../client/src/components/app/Layout.svelte   | 36 +++++++++++++++----
 packages/client/src/stores/theme.js           |  1 +
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
index 6f7cf567de..36bbde2905 100644
--- a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
+++ b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
@@ -19,6 +19,7 @@
     primaryColorHover: "var(--spectrum-global-color-blue-500)",
     buttonBorderRadius: "16px",
     navBackground: "var(--spectrum-global-color-gray-100)",
+    navTextColor: "var(--spectrum-global-color-gray-800)",
   }
 
   const buttonBorderRadiusOptions = [
@@ -93,7 +94,7 @@
         />
       </div>
       <div class="setting">
-        <Label size="L">Navigation bar background</Label>
+        <Label size="L">Navigation bar background color</Label>
         <ColorPicker
           spectrumTheme={$store.theme}
           value={$store.customTheme?.navBackground ||
@@ -101,6 +102,14 @@
           on:change={updateProperty("navBackground")}
         />
       </div>
+      <div class="setting">
+        <Label size="L">Navigation bar text color</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.navTextColor || defaultTheme.navTextColor}
+          on:change={updateProperty("navTextColor")}
+        />
+      </div>
     </Layout>
   </ModalContent>
 </Modal>
@@ -114,7 +123,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: var(--spectrum-global-dimension-static-size-100);
+    padding-bottom: var(--spectrum-global-dimension-static-size-200);
     border-bottom: var(--border-light);
   }
   .setting:last-child {
diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index 75574264cd..39a4842f22 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -16,7 +16,7 @@
     /*  Buttons */
     --spectrum-semantic-cta-color-background-default: var(--primaryColor);
     --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
-    --spectrum-alias-item-rounded-border-radius-m: var(--buttonBorderRadius);
+    --spectrum-button-primary-m-border-radius: var(--buttonBorderRadius);
 
     /* Loading spinners */
     --spectrum-progresscircle-medium-track-fill-color: var(--primaryColor);
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index afa1fd5221..7f120556bd 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { Heading, Icon } from "@budibase/bbui"
+  import active from "svelte-spa-router/active"
 
   const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -95,7 +96,13 @@
           <div class="links" class:visible={mobileOpen}>
             {#each validLinks as { text, url }}
               {#if isInternal(url)}
-                <a class="link" href={url} use:linkable on:click={close}>
+                <a
+                  class="link"
+                  href={url}
+                  use:linkable
+                  on:click={close}
+                  use:active={url}
+                >
                   {text}
                 </a>
               {:else}
@@ -165,6 +172,18 @@
     max-width: 100%;
     gap: var(--spacing-xl);
   }
+  .nav :global(.spectrum-Icon) {
+    color: var(--navTextColor);
+    opacity: 0.75;
+  }
+  .nav :global(.spectrum-Icon:hover) {
+    color: var(--navTextColor);
+    opacity: 1;
+  }
+
+  .nav :global(h1) {
+    color: var(--navTextColor);
+  }
   .nav-header {
     flex: 0 0 auto;
     display: flex;
@@ -242,13 +261,19 @@
     margin-top: var(--spacing-xl);
   }
   .link {
-    color: var(--spectrum-alias-text-color);
+    opacity: 0.75;
+    color: var(--navTextColor);
     font-size: var(--spectrum-global-dimension-font-size-200);
     font-weight: 600;
     transition: color 130ms ease-out;
   }
+  .link.active {
+    opacity: 1;
+  }
   .link:hover {
-    color: var(--spectrum-link-primary-m-text-color-hover);
+    opacity: 1;
+    text-decoration: underline;
+    text-underline-position: under;
   }
   .close {
     display: none;
@@ -332,7 +357,7 @@
       transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
       height: 100vh;
       opacity: 0;
-      background: var(--spectrum-alias-background-color-secondary);
+      background: var(--navBackground);
       z-index: 999;
       flex-direction: column;
       justify-content: flex-start;
@@ -346,8 +371,7 @@
     .links.visible {
       opacity: 1;
       transform: translateX(250px);
-      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.2);
-      border-right: 1px solid var(--spectrum-global-color-gray-300);
+      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3);
     }
     .mobile-click-handler.visible {
       position: fixed;
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 7df49021aa..47dccfcd6b 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -11,6 +11,7 @@ const defaultCustomTheme = {
   primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
   buttonBorderRadius: "16px",
   navBackground: "var(--spectrum-glo" + "bal-color-gray-100)",
+  navTextColor: "var(--spectrum-glo" + "bal-color-gray-800)",
 }
 
 const createThemeStore = () => {