Merge pull request #105 from joelrobin18/feature/dark_light_theme_sup…

…port Dark Theme Support for Agentneo
raga-ai-hub · Jan 15, 2025 · ccfbcd7 · ccfbcd7
2 parents 1e5972f + 5d01d7e
commit ccfbcd7
Show file tree

Hide file tree

Showing 30 changed files with 3,688 additions and 1,931 deletions.
diff --git a/agentneo/ui/dist/index.html b/agentneo/ui/dist/index.html
@@ -8,8 +8,10 @@
   <meta name="description" content="Agentic Observability & Evaluation Framework" />
   <link rel="apple-touch-icon" href="/assets/favicon-Btggvy49.svg" />
   <title>AgentNeo</title>
-  <script type="module" crossorigin src="/assets/index-CjY9R8QG.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-BxKkXIG1.css">
+
+  <script type="module" crossorigin src="/assets/index-Dk5R_t1y.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CHkKqzmw.css">
+
 </head>
 
 <body>

diff --git a/agentneo/ui/src/App.css b/agentneo/ui/src/App.css
@@ -1,19 +1,17 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  @apply max-w-7xl mx-auto p-8 text-center;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
+  @apply h-24 p-6;
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
@@ -34,9 +32,9 @@
 }
 
 .card {
-  padding: 2em;
+  @apply p-8;
 }
 
 .read-the-docs {
-  color: #888;
-}
+  @apply text-gray-500 dark:text-gray-400;
+}
diff --git a/agentneo/ui/src/App.tsx b/agentneo/ui/src/App.tsx
@@ -1,27 +1,30 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { SidebarProvider } from './contexts/SidebarContext';
-import { ProjectProvider } from './contexts/ProjectContext';
-import Overview from './pages/Overview';
-import Analysis from './pages/Analysis';
-import TraceHistory from './pages/TraceHistory';
-import Evaluation from './pages/Evaluation';
+import React from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { SidebarProvider } from './contexts/SidebarContext'
+import { ProjectProvider } from './contexts/ProjectContext'
+import Overview from './pages/Overview'
+import Analysis from './pages/Analysis'
+import TraceHistory from './pages/TraceHistory'
+import Evaluation from './pages/Evaluation'
+import { ThemeProvider } from '@/theme/ThemeProvider'
 
-function App() {
+function App () {
   return (
-    <ProjectProvider>
-      <SidebarProvider>
-        <Router>
-          <Routes>
-            <Route path="/" element={<Overview />} />
-            <Route path="/analysis" element={<Analysis />} />
-            <Route path="/trace-history" element={<TraceHistory />} />
-            <Route path="/evaluation" element={<Evaluation />} />
-          </Routes>
-        </Router>
-      </SidebarProvider>
-    </ProjectProvider>
-  );
+    <ThemeProvider defaultTheme='system' storageKey='vite-ui-theme'>
+      <ProjectProvider>
+        <SidebarProvider>
+          <Router>
+            <Routes>
+              <Route path='/' element={<Overview />} />
+              <Route path='/analysis' element={<Analysis />} />
+              <Route path='/trace-history' element={<TraceHistory />} />
+              <Route path='/evaluation' element={<Evaluation />} />
+            </Routes>
+          </Router>
+        </SidebarProvider>
+      </ProjectProvider>
+    </ThemeProvider>
+  )
 }
 
-export default App;
+export default App