fix vuu=theme issues

finos · May 15, 2024 · 84e6f46 · 84e6f46
1 parent e3de32e
commit 84e6f46
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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);
+        }
+
+
+    }
+
+}
diff --git a/vuu-ui/sample-apps/app-vuu-example/demo.tsx b/vuu-ui/sample-apps/app-vuu-example/demo.tsx
@@ -1,12 +1,13 @@
 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";
 
 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
@@ -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")
 );