Skip to content

Commit 615546f

Browse files
prajjwalkumar17prajjwalkumar17
committed
fix(ui): default dashboard theme to light
1 parent c75762d commit 615546f

8 files changed

Lines changed: 129 additions & 105 deletions

File tree

‎website/dist/assets/index-Bev4T-IW.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

website/dist/assets/index-DOIX840n.js renamed to website/dist/assets/index-CUD99qAK.js

Lines changed: 87 additions & 87 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/dist/assets/index-cq4Fupgx.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<link rel="apple-touch-icon" href="favicon.svg" />
88
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
99
<title>Juspay Decision Engine Dashboard</title>
10-
<script type="module" crossorigin src="/decision-engine/assets/index-DOIX840n.js"></script>
11-
<link rel="stylesheet" crossorigin href="/decision-engine/assets/index-Bev4T-IW.css">
10+
<script type="module" crossorigin src="/decision-engine/assets/index-CUD99qAK.js"></script>
11+
<link rel="stylesheet" crossorigin href="/decision-engine/assets/index-cq4Fupgx.css">
1212
</head>
1313
<body>
1414
<div id="root"></div>

‎website/src/components/layout/AuthGuard.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ export function AuthGuard() {
8686

8787
if (!hasHydrated) {
8888
return (
89-
<div className="dark flex min-h-screen items-center justify-center bg-[#030507] text-white">
90-
<div className="flex items-center gap-3 rounded-2xl border border-[#1d1d23] bg-[#111318] px-5 py-4 text-sm text-[#c7cfdb]">
91-
<Loader2 size={16} className="animate-spin text-[#7ea4ff]" />
89+
<div className="flex min-h-screen items-center justify-center bg-white text-slate-900 dark:bg-[#030507] dark:text-white">
90+
<div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 text-sm text-slate-600 shadow-[0_16px_40px_-30px_rgba(15,23,42,0.35)] dark:border-[#1d1d23] dark:bg-[#111318] dark:text-[#c7cfdb] dark:shadow-none">
91+
<Loader2 size={16} className="animate-spin text-brand-600 dark:text-[#7ea4ff]" />
9292
Restoring session
9393
</div>
9494
</div>
@@ -97,9 +97,9 @@ export function AuthGuard() {
9797
if (!token) return <Navigate to="/login" replace />
9898
if (status === 'checking') {
9999
return (
100-
<div className="dark flex min-h-screen items-center justify-center bg-[#030507] text-white">
101-
<div className="flex items-center gap-3 rounded-2xl border border-[#1d1d23] bg-[#111318] px-5 py-4 text-sm text-[#c7cfdb]">
102-
<Loader2 size={16} className="animate-spin text-[#7ea4ff]" />
100+
<div className="flex min-h-screen items-center justify-center bg-white text-slate-900 dark:bg-[#030507] dark:text-white">
101+
<div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 text-sm text-slate-600 shadow-[0_16px_40px_-30px_rgba(15,23,42,0.35)] dark:border-[#1d1d23] dark:bg-[#111318] dark:text-[#c7cfdb] dark:shadow-none">
102+
<Loader2 size={16} className="animate-spin text-brand-600 dark:text-[#7ea4ff]" />
103103
Validating session
104104
</div>
105105
</div>

‎website/src/components/layout/Sidebar.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,22 @@ import {
1818
} from 'lucide-react'
1919
import { useAuthStore } from '../../store/authStore'
2020
import { apiFetch } from '../../lib/api'
21+
import { getStoredThemePreference, persistThemePreference } from '../../lib/theme'
2122

2223
export function Sidebar() {
2324
const location = useLocation()
2425
const navigate = useNavigate()
2526
const { user, clearAuth } = useAuthStore()
2627
const [pendingPath, setPendingPath] = useState<string | null>(null)
27-
const [isDark, setIsDark] = useState(() => localStorage.getItem('theme') !== 'light')
28+
const [isDark, setIsDark] = useState(() => getStoredThemePreference() === 'dark')
2829
const [accountOpen, setAccountOpen] = useState(false)
2930
const accountRef = useRef<HTMLDivElement>(null)
3031
const selectedPath = pendingPath ?? location.pathname
3132
const assetBaseUrl = import.meta.env.BASE_URL
3233
const initials = user?.email ? user.email.slice(0, 2).toUpperCase() : 'ME'
3334

3435
useEffect(() => {
35-
const root = window.document.documentElement
36-
if (isDark) {
37-
root.classList.add('dark')
38-
localStorage.setItem('theme', 'dark')
39-
} else {
40-
root.classList.remove('dark')
41-
localStorage.setItem('theme', 'light')
42-
}
36+
persistThemePreference(isDark ? 'dark' : 'light')
4337
}, [isDark])
4438

4539
useEffect(() => {

‎website/src/lib/theme.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export type ThemePreference = 'light' | 'dark'
2+
3+
const THEME_STORAGE_KEY = 'theme'
4+
5+
export function getStoredThemePreference(): ThemePreference {
6+
if (typeof window === 'undefined') {
7+
return 'light'
8+
}
9+
10+
return window.localStorage.getItem(THEME_STORAGE_KEY) === 'dark' ? 'dark' : 'light'
11+
}
12+
13+
export function applyThemePreference(theme: ThemePreference = getStoredThemePreference()) {
14+
if (typeof document === 'undefined') {
15+
return
16+
}
17+
18+
document.documentElement.classList.toggle('dark', theme === 'dark')
19+
}
20+
21+
export function persistThemePreference(theme: ThemePreference) {
22+
if (typeof window !== 'undefined') {
23+
window.localStorage.setItem(THEME_STORAGE_KEY, theme)
24+
}
25+
26+
applyThemePreference(theme)
27+
}

‎website/src/main.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
33
import { BrowserRouter } from 'react-router-dom'
44
import App from './App'
55
import { ErrorBoundary } from './ErrorBoundary'
6+
import { applyThemePreference } from './lib/theme'
67
import './index.css'
78

89
const routerBaseName = import.meta.env.BASE_URL.endsWith('/')
@@ -14,6 +15,8 @@ if (import.meta.env.DEV && window.location.hostname === '127.0.0.1') {
1415
nextUrl.hostname = 'localhost'
1516
window.location.replace(nextUrl.toString())
1617
} else {
18+
applyThemePreference()
19+
1720
console.log('\n' + '='.repeat(80))
1821
console.log('[APP STARTUP] Dashboard initializing...')
1922
console.log(`Timestamp: ${new Date().toISOString()}`)

0 commit comments

Comments
 (0)