Skip to content

Commit d0f3eef

Browse files
amitharoramitharor
authored
Merge pull request #140 from oslabs-beta/user0824/feat/dashboard
User0824/feat/dashboard
2 parents 3f1d485 + 0af4d89 commit d0f3eef

File tree

2 files changed

+123
-133
lines changed

2 files changed

+123
-133
lines changed

‎client/src/App.tsx

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ import Dashboard from './components/Dashboard';
88
import HistoricalData from './components/HistoricalData';
99
import NavigationBar from './components/NavigationBar';
1010
import Header from './components/Header';
11-
import { SignedIn, SignedOut, useClerk } from '@clerk/clerk-react';
11+
import { SignedIn, SignedOut } from '@clerk/clerk-react';
1212
import { Routes, Route } from 'react-router-dom';
1313
import { ClusterProvider } from './contexts/ClusterContext';
14-
import { IconMoon, IconSun } from '@tabler/icons-react';
1514

1615
const App = () => {
17-
const { signOut } = useClerk();
1816
const [isDark, setIsDark] = useState(() => {
1917
const savedTheme = localStorage.getItem('theme');
2018
if (savedTheme) {
@@ -23,6 +21,9 @@ const App = () => {
2321
return window.matchMedia('(prefers-color-scheme: dark)').matches;
2422
});
2523

24+
// ----------------------------------------------------------
25+
// * USEEFFECT for light/dark mode toggle
26+
// ----------------------------------------------------------
2627
useEffect(() => {
2728
if (isDark) {
2829
document.documentElement.classList.add('dark');
@@ -48,38 +49,8 @@ const App = () => {
4849
>
4950
{/* Global width constraint container */}
5051
<div className="max-w-9xl relative mx-auto px-10">
51-
{/* TOP RIGHT CONTROLS */}
52-
<div className="absolute right-3 top-3 z-[60] flex items-center justify-end gap-8">
53-
{/* SIGN OUT BUTTON - Only visible when signed in */}
54-
<SignedIn>
55-
<button
56-
onClick={() =>
57-
signOut(() => {
58-
window.location.href = '/';
59-
})
60-
}
61-
className="duration-800 text-muted-foreground flex justify-center text-lg font-semibold transition-colors hover:text-red-500/70"
62-
title="Sign Out"
63-
>
64-
logout
65-
</button>
66-
</SignedIn>
67-
68-
{/* DARK MODE TOGGLE */}
69-
<label className="swap swap-rotate cursor-pointer hover:[&_.swap-off]:text-amber-500 hover:[&_.swap-on]:text-yellow-200/90">
70-
<input
71-
type="checkbox"
72-
checked={isDark}
73-
onChange={toggleTheme}
74-
className="sr-only"
75-
/>
76-
<IconMoon className="duration-800 text-muted-foreground swap-on h-6 w-6 transition-all" />
77-
<IconSun className="duration-800 text-muted-foreground swap-off h-6 w-6 transition-all" />
78-
</label>
79-
</div>
80-
81-
{/* CLERK AUTH CONTROLS */}
82-
<Header />
52+
{/* CLERK AUTH CONTROLS WITH THEME TOGGLE */}
53+
<Header isDark={isDark} toggleTheme={toggleTheme} />
8354

8455
{/* CONDITIONAL CONTENT WITH ROUTES */}
8556
<SignedOut>

‎client/src/components/Header.tsx

Lines changed: 117 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,19 @@ import {
88
SignInButton,
99
SignUpButton,
1010
useUser,
11+
useClerk,
1112
} from '@clerk/clerk-react';
1213
import React from 'react';
14+
import { IconMoon, IconSun } from '@tabler/icons-react';
1315

14-
const Header: React.FC = () => {
16+
interface HeaderProps {
17+
isDark: boolean;
18+
toggleTheme: () => void;
19+
}
20+
21+
const Header: React.FC<HeaderProps> = ({ isDark, toggleTheme }) => {
1522
const { user } = useUser();
23+
const { signOut } = useClerk();
1624

1725
const getWhimsicalGreeting = (isMobile = false) => {
1826
const hour = new Date().getHours();
@@ -92,77 +100,68 @@ const Header: React.FC = () => {
92100
'Winding down with monitoring',
93101
'Evening cluster zen',
94102
'Time to relax and monitor',
95-
'Evening brew master',
103+
'Smooth sailing this evening',
96104
],
97105
night: [
98-
'Late evening session',
99-
'Night time monitoring',
100-
'Almost bedtime',
106+
'Night shift activated',
107+
'Late night monitoring',
108+
'Almost time for bed',
101109
'Final cluster check',
102-
'Ready to call it a day',
110+
'Keeping watch tonight',
103111
],
104112
};
105113

106-
// Weekend variations (shorter for mobile)
107-
const weekendGreetings = {
108-
mobile: {
109-
lateNight: [
110-
'Weekend night owl',
111-
'Saturday night coding',
112-
'Weekend warrior',
113-
],
114-
morning: ['Weekend vibes', 'Lazy morning', 'Weekend coffee time'],
115-
afternoon: ['Weekend bliss', 'Chill monitoring', 'Weekend check'],
116-
evening: ['Weekend wind-down', 'Sunday prep', 'Weekend wrap-up'],
117-
},
118-
desktop: {
119-
lateNight: [
120-
'Weekend night owl',
121-
'Saturday night coding session',
122-
'Weekend warrior mode',
123-
],
124-
morning: [
125-
'Weekend vibes',
126-
'Lazy morning monitoring',
127-
'Weekend coffee time',
128-
],
129-
afternoon: [
130-
'Weekend afternoon bliss',
131-
'Relaxed weekend monitoring',
132-
'Weekend maintenance mode',
133-
],
134-
evening: [
135-
'Weekend wind-down',
136-
'Sunday evening prep',
137-
'Weekend cluster check',
138-
],
139-
},
140-
};
141-
142114
const greetings = isMobile ? mobileGreetings : desktopGreetings;
143-
const weekendVariations = isMobile
144-
? weekendGreetings.mobile
145-
: weekendGreetings.desktop;
146115

147-
let timeBasedGreetings;
116+
// Weekend variations
117+
const weekendVariations = {
118+
morning: isWeekend
119+
? isMobile
120+
? ['Weekend vibes', 'Lazy Saturday', 'Sunday funday']
121+
: [
122+
'Weekend monitoring mode',
123+
'Lazy Saturday cluster check',
124+
'Sunday funday monitoring',
125+
]
126+
: [],
127+
afternoon: isWeekend
128+
? isMobile
129+
? ['Weekend mode', 'Chill Saturday', 'Sunday relaxation']
130+
: [
131+
'Weekend afternoon vibes',
132+
'Saturday chill monitoring',
133+
'Sunday relaxation mode',
134+
]
135+
: [],
136+
evening: isWeekend
137+
? isMobile
138+
? ['Weekend evening', 'Saturday night', 'Sunday night']
139+
: [
140+
'Saturday night monitoring',
141+
'Sunday evening wind down',
142+
'Weekend evening cluster zen',
143+
]
144+
: [],
145+
};
146+
147+
let timeBasedGreetings: string[] = [];
148148

149-
// Determine time period and get appropriate greetings
150149
if (hour >= 0 && hour < 5) {
151-
timeBasedGreetings = isWeekend
152-
? [...greetings.lateNight, ...weekendVariations.lateNight]
153-
: greetings.lateNight;
150+
timeBasedGreetings = greetings.lateNight;
154151
} else if (hour >= 5 && hour < 9) {
155-
timeBasedGreetings = greetings.earlyMorning;
152+
timeBasedGreetings = [
153+
...greetings.earlyMorning,
154+
...weekendVariations.morning,
155+
];
156156
} else if (hour >= 9 && hour < 12) {
157-
timeBasedGreetings = isWeekend
158-
? [...greetings.morning, ...weekendVariations.morning]
159-
: greetings.morning;
157+
timeBasedGreetings = [...greetings.morning, ...weekendVariations.morning];
160158
} else if (hour >= 12 && hour < 14) {
161159
timeBasedGreetings = greetings.lunch;
162160
} else if (hour >= 14 && hour < 18) {
163-
timeBasedGreetings = isWeekend
164-
? [...greetings.afternoon, ...weekendVariations.afternoon]
165-
: greetings.afternoon;
161+
timeBasedGreetings = [
162+
...greetings.afternoon,
163+
...weekendVariations.afternoon,
164+
];
166165
} else if (hour >= 18 && hour < 22) {
167166
timeBasedGreetings = isWeekend
168167
? [...greetings.evening, ...weekendVariations.evening]
@@ -208,48 +207,68 @@ const Header: React.FC = () => {
208207
>
209208
<div className="main-content-wrapper">
210209
<div className="flex items-center justify-between py-1">
211-
{' '}
212-
{/* Reduced from py-3 to py-1 */}
213-
<SignedOut>
214-
<div
215-
className="flex gap-4 text-base font-bold sm:text-lg"
216-
style={{
217-
color: 'var(--primary)',
218-
}}
219-
>
220-
<SignInButton
221-
mode="modal" // opens in popup
222-
// afterSignInUrl="/" // redirect
223-
// redirectUrl="/" // Optional redirect
224-
/>{' '}
225-
/
226-
<SignUpButton
227-
mode="modal" // opens in popup
228-
// afterSignUpUrl="/" // redirect
229-
// redirectUrl="/" // Optional redirect
210+
{/* Left side content */}
211+
<div className="flex-1">
212+
<SignedOut>
213+
<div
214+
className="flex gap-4 text-base font-bold sm:text-lg"
215+
style={{
216+
color: 'var(--primary)',
217+
}}
218+
>
219+
<SignInButton mode="modal" /> /
220+
<SignUpButton mode="modal" />
221+
</div>
222+
</SignedOut>
223+
<SignedIn>
224+
{/* Enhanced Responsive Greeting */}
225+
<div
226+
className="text-lg font-semibold italic sm:text-xl md:text-xl lg:text-2xl xl:text-2xl"
227+
style={{
228+
color: 'var(--primary)',
229+
}}
230+
>
231+
{/* Mobile version - shorter greeting */}
232+
<span className="block sm:hidden">
233+
{getWhimsicalGreeting(true)}, {getDisplayName()}!
234+
</span>
235+
{/* Desktop version - full greeting */}
236+
<span className="hidden sm:block">
237+
{getWhimsicalGreeting(false)}, {getDisplayName()}!
238+
</span>
239+
</div>
240+
</SignedIn>
241+
</div>
242+
243+
{/* Right side controls - Always present */}
244+
<div className="flex flex-shrink-0 items-center gap-6">
245+
{/* SIGN OUT BUTTON - Only visible when signed in */}
246+
<SignedIn>
247+
<button
248+
onClick={() =>
249+
signOut(() => {
250+
window.location.href = '/';
251+
})
252+
}
253+
className="duration-800 text-muted-foreground flex justify-center text-sm font-semibold transition-colors hover:text-red-500/70 sm:text-lg"
254+
title="Sign Out"
255+
>
256+
logout
257+
</button>
258+
</SignedIn>
259+
260+
{/* DARK MODE TOGGLE - Always visible */}
261+
<label className="swap swap-rotate cursor-pointer hover:[&_.swap-off]:text-amber-500 hover:[&_.swap-on]:text-yellow-200/90">
262+
<input
263+
type="checkbox"
264+
checked={isDark}
265+
onChange={toggleTheme}
266+
className="sr-only"
230267
/>
231-
</div>
232-
{/* Empty div to maintain layout */}
233-
<div></div>
234-
</SignedOut>
235-
<SignedIn>
236-
{/* Left side - Enhanced Responsive Greeting */}
237-
<div
238-
className="text-lg font-semibold italic sm:text-xl md:text-xl lg:text-2xl xl:text-2xl" // Reduced max sizes
239-
style={{
240-
color: 'var(--primary)',
241-
}}
242-
>
243-
{/* Mobile version - shorter greeting */}
244-
<span className="block sm:hidden">
245-
{getWhimsicalGreeting(true)}, {getDisplayName()}!
246-
</span>
247-
{/* Desktop version - full greeting */}
248-
<span className="hidden sm:block">
249-
{getWhimsicalGreeting(false)}, {getDisplayName()}!
250-
</span>
251-
</div>
252-
</SignedIn>
268+
<IconMoon className="duration-800 text-muted-foreground swap-on transition-all" />
269+
<IconSun className="duration-800 text-muted-foreground swap-off transition-all" />
270+
</label>
271+
</div>
253272
</div>
254273
</div>
255274
</header>

0 commit comments

Comments
 (0)