From 84e6f46e3fb562f595acffcd2471eb2249d97c93 Mon Sep 17 00:00:00 2001
From: heswell <steve@heswell.com>
Date: Wed, 15 May 2024 23:33:55 +0100
Subject: [PATCH] fix vuu=theme issues

---
 .../vuu-theme/css/components/components.css   |  1 +
 .../vuu-theme/css/components/left-nav.css     | 19 +++++++++++++++++++
 vuu-ui/sample-apps/app-vuu-example/demo.tsx   |  7 ++++---
 vuu-ui/sample-apps/app-vuu-example/login.tsx  |  6 +++---
 4 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 vuu-ui/packages/vuu-theme/css/components/left-nav.css

diff --git a/vuu-ui/packages/vuu-theme/css/components/components.css b/vuu-ui/packages/vuu-theme/css/components/components.css
index 1e445110be..1fc77269fb 100644
--- a/vuu-ui/packages/vuu-theme/css/components/components.css
+++ b/vuu-ui/packages/vuu-theme/css/components/components.css
@@ -4,6 +4,7 @@
 @import url(filters.css);
 @import url(icon.css);
 @import url(input.css);
+@import url(left-nav.css);
 @import url(options-list.css);
 @import url(split-button.css);
 @import url(splitter.css);
diff --git a/vuu-ui/packages/vuu-theme/css/components/left-nav.css b/vuu-ui/packages/vuu-theme/css/components/left-nav.css
new file mode 100644
index 0000000000..ff6b7811a7
--- /dev/null
+++ b/vuu-ui/packages/vuu-theme/css/components/left-nav.css
@@ -0,0 +1,19 @@
+.salt-theme.vuu-theme {
+    .vuuLeftNav {
+        .vuuTab {
+            color: white;
+        }
+
+        .vuuTab-selected {
+            --vuu-icon-color: var(--vuu-color-pink-10);
+            border-left-color: var(--vuu-color-pink-10);
+        }
+
+        .vuuLeftNav-toggleButton {
+            background-color: var(--vuu-color-pink-10);
+        }
+
+
+    }
+    
+}
\ No newline at end of file
diff --git a/vuu-ui/sample-apps/app-vuu-example/demo.tsx b/vuu-ui/sample-apps/app-vuu-example/demo.tsx
index 00bbff9cc6..6872bc0531 100644
--- a/vuu-ui/sample-apps/app-vuu-example/demo.tsx
+++ b/vuu-ui/sample-apps/app-vuu-example/demo.tsx
@@ -1,5 +1,5 @@
 import { LoginPanel } from "@finos/vuu-shell";
-import { ThemeProvider, uuid } from "@finos/vuu-utils";
+import { uuid } from "@finos/vuu-utils";
 import React from "react";
 import ReactDOM from "react-dom";
 
@@ -7,6 +7,7 @@ import "@finos/vuu-icons/index.css";
 import "@finos/vuu-theme/index.css";
 
 import "./login.css";
+import { SaltProvider } from "@salt-ds/core";
 
 async function login(username: string) {
   try {
@@ -25,8 +26,8 @@ async function login(username: string) {
 }
 
 ReactDOM.render(
-  <ThemeProvider applyThemeClasses>
+  <SaltProvider theme="vuu-theme" density="high">
     <LoginPanel requirePassword={false} onSubmit={login} />
-  </ThemeProvider>,
+  </SaltProvider>,
   document.getElementById("root")
 );
diff --git a/vuu-ui/sample-apps/app-vuu-example/login.tsx b/vuu-ui/sample-apps/app-vuu-example/login.tsx
index e208f0a970..a5cf9b4401 100644
--- a/vuu-ui/sample-apps/app-vuu-example/login.tsx
+++ b/vuu-ui/sample-apps/app-vuu-example/login.tsx
@@ -1,12 +1,12 @@
 import { authenticate } from "@finos/vuu-data-remote";
 import { LoginPanel } from "@finos/vuu-shell";
-import { ThemeProvider } from "@finos/vuu-utils";
 import React from "react";
 import ReactDOM from "react-dom";
 
 import "@finos/vuu-icons/index.css";
 import "@finos/vuu-theme/index.css";
 import "./login.css";
+import { SaltProvider } from "@salt-ds/core";
 
 async function login(username: string, password = "password") {
   try {
@@ -25,8 +25,8 @@ async function login(username: string, password = "password") {
 }
 
 ReactDOM.render(
-  <ThemeProvider applyThemeClasses>
+  <SaltProvider theme="vuu-theme" density="high">
     <LoginPanel onSubmit={login} />
-  </ThemeProvider>,
+  </SaltProvider>,
   document.getElementById("root")
 );