finos#778 Update styling of Visualizer

oliviajanejohns · Jan 14, 2025 · b55eac6 · b55eac6
1 parent fbf7661
commit b55eac6
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 31 deletions.
diff --git a/calm-visualizer/index.html b/calm-visualizer/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="cupcake">
+<html lang="en" data-theme="emerald">
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx b/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx
@@ -169,8 +169,9 @@ const CytoscapeRenderer = ({
     return (
         <div className="relative flex m-auto border">
             {title && (
-                <div className="graph-title absolute m-5 bg-primary-content shadow-md">
-                    <span className="text-m">Architecture: {title}</span>
+                <div className="graph-title absolute m-5 bg-primary shadow-md">
+                    <span className="text-m font-thin">Architecture: </span>
+                    <span className="text-m font-semibold">{title}</span>
                 </div>
             )}
             <div

diff --git a/calm-visualizer/src/components/cytoscape-renderer/cytoscape.css b/calm-visualizer/src/components/cytoscape-renderer/cytoscape.css
@@ -40,7 +40,3 @@
     margin-top: 10px;
     color: black;
 }
-
-.relationship-label {
-    background-color: white;
-}
diff --git a/calm-visualizer/src/components/navbar/Navbar.tsx b/calm-visualizer/src/components/navbar/Navbar.tsx
@@ -18,19 +18,19 @@ function Navbar({
     };
 
     return (
-        <div className="navbar bg-base-300">
+        <div className="navbar bg-secondary text-secondary-content">
             <div className="flex-1">
-                <a className="btn btn-ghost text-xl">CALM</a>
+                <a className="btn btn-ghost text-2xl">CALM</a>
                 <div className="divider divider-horizontal"></div>
-                <span className="text-lg">Visualizer</span>
+                <span className="text-lg font-thin">Visualizer</span>
             </div>
             <div className="flex-none">
                 <ul className="menu menu-horizontal px-1" aria-label="navbar-menu-items">
                     <li>
                         <details>
                             <summary>Upload</summary>
                             <ul className="p-2 z-1" aria-label="upload-dropdown-items">
-                                <li>
+                                <li className=" text-secondary">
                                     <label>
                                         Architecture
                                         <input
@@ -54,7 +54,9 @@ function Navbar({
                         <div className="divider divider-horizontal"></div>
                         <div className="toggles menu-horizontal">
                             <label className="label cursor-pointer">
-                                <span className="label label-text">Connection Descriptions</span>
+                                <span className="label label-text text-secondary-content">
+                                    Connection Descriptions
+                                </span>
                                 <input
                                     type="checkbox"
                                     className="toggle"
@@ -64,7 +66,9 @@ function Navbar({
                                 />
                             </label>
                             <label className="label cursor-pointer">
-                                <span className="label label-text">Node Descriptions</span>
+                                <span className="label label-text text-secondary-content">
+                                    Node Descriptions
+                                </span>
                                 <input
                                     type="checkbox"
                                     className="toggle"

diff --git a/calm-visualizer/src/components/sidebar/Sidebar.tsx b/calm-visualizer/src/components/sidebar/Sidebar.tsx
@@ -40,23 +40,20 @@ function Sidebar({ selectedData, closeSidebar }: SidebarProps) {
                         <div className="text-xl font-bold mb-2">Node Details</div>
                         <div className="space-y-2">
                             <p>
-                                <span className="font-semibold">unique-id: {selectedData.id}</span>
+                                <span className="font-light">unique-id: </span>
+                                <span className="font-semibold">{selectedData.id}</span>
                             </p>
-
                             <p>
-                                <span className="font-semibold">name: {selectedData.label}</span>
+                                <span className="font-light">name: </span>
+                                <span className="font-semibold">{selectedData.label}</span>
                             </p>
-
                             <p>
-                                <span className="font-semibold">
-                                    node-type: {selectedData.type}
-                                </span>
+                                <span className="font-light">node-type: </span>
+                                <span className="font-semibold">{selectedData.type}</span>
                             </p>
-
                             <p>
-                                <span className="font-semibold">
-                                    description: {selectedData.description}
-                                </span>
+                                <span className="font-light">description: </span>
+                                <span className="font-semibold">{selectedData.description}</span>
                             </p>
                         </div>
                     </div>
@@ -67,21 +64,23 @@ function Sidebar({ selectedData, closeSidebar }: SidebarProps) {
                         <div className="text-xl font-bold mb-2">Edge Details</div>
                         <div className="space-y-2">
                             <p>
-                                <span className="font-semibold">unique-id: {selectedData.id}</span>
+                                <span className="font-light">unique-id: </span>
+                                <span className="font-semibold">{selectedData.id}</span>
                             </p>
 
                             <p>
-                                <span className="font-semibold">
-                                    description: {selectedData.label}
-                                </span>
+                                <span className="font-light">description: </span>
+                                <span className="font-semibold">{selectedData.label}</span>
                             </p>
 
                             <p>
-                                <span className="font-semibold">source: {selectedData.source}</span>
+                                <span className="font-light">source: </span>
+                                <span className="font-semibold">{selectedData.label}</span>
                             </p>
 
                             <p>
-                                <span className="font-semibold">target: {selectedData.target}</span>
+                                <span className="font-light">target: </span>
+                                <span className="font-semibold">{selectedData.target}</span>
                             </p>
                         </div>
                     </div>

diff --git a/calm-visualizer/tailwind.config.cjs b/calm-visualizer/tailwind.config.cjs
@@ -6,6 +6,6 @@ module.exports = {
     },
     plugins: [require('@tailwindcss/typography'), require('daisyui')],
     daisyui: {
-        themes: ['light', 'dark', 'winter'],
+        themes: ['light', 'dark', 'emerald'],
     },
 };