Skip to content

Commit 6b9b01e

Browse files
amethystaniamethystani
committed
style: Improve UI styling and responsiveness across the sidebar, notification center, and demo call interfaces.
1 parent 4cfa78a commit 6b9b01e

File tree

5 files changed

+74
-59
lines changed

5 files changed

+74
-59
lines changed

‎src/components/AppSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ export function AppSidebar({ activeTab, setActiveTab, hasAccess = false, ...prop
7575
isDark
7676
? [
7777
"text-white/70 hover:text-white hover:bg-white/5",
78-
"data-[active=true]:text-white data-[active=true]:bg-[linear-gradient(145deg,#151515_0%,#0B0B0B_100%)]",
78+
"data-[active=true]:!text-white data-[active=true]:!bg-[linear-gradient(145deg,#151515_0%,#0B0B0B_100%)]",
7979
"data-[active=true]:before:bg-[radial-gradient(circle_at_20%_15%,rgba(255,138,91,0.18),transparent_55%)]",
8080
"data-[active=true]:after:bg-[url('/noise.webp')] data-[active=true]:after:bg-[length:30%] data-[active=true]:after:opacity-[0.12]",
8181
].join(" ")
8282
: [
8383
"text-gray-600 hover:text-gray-900 hover:bg-black/5",
84-
"data-[active=true]:text-[#5B2A16] data-[active=true]:bg-[linear-gradient(145deg,#FFF6F0_0%,#FFFFFF_100%)]",
84+
"data-[active=true]:!text-[#5B2A16] data-[active=true]:!bg-[linear-gradient(145deg,#FFF6F0_0%,#FFFFFF_100%)]",
8585
"data-[active=true]:before:bg-[radial-gradient(circle_at_20%_15%,rgba(255,138,91,0.14),transparent_55%)]",
8686
"data-[active=true]:after:bg-[url('/noise.webp')] data-[active=true]:after:bg-[length:30%] data-[active=true]:after:opacity-[0.08]",
8787
].join(" ")

‎src/components/DashboardViews/NotificationCenter.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -130,11 +130,12 @@ export default function NotificationCenter({ isDark, className }: NotificationCe
130130
const rect = btn.getBoundingClientRect();
131131
const isMobileViewport = window.innerWidth < 640;
132132
const width = Math.min(380, Math.floor(window.innerWidth * 0.92));
133+
const margin = 12;
134+
const maxHeight = Math.min(520, window.innerHeight - margin * 2);
133135
const left = isMobileViewport
134136
? (window.innerWidth - width) / 2
135137
: Math.min(Math.max(rect.right - width, 8), window.innerWidth - width - 8);
136-
const top = Math.min(rect.bottom + 12, window.innerHeight - 16);
137-
const maxHeight = Math.max(240, window.innerHeight - top - 16);
138+
const top = Math.min(rect.bottom + margin, window.innerHeight - margin - maxHeight);
138139
setDropdownStyle({
139140
position: 'fixed',
140141
top,
@@ -187,17 +188,17 @@ export default function NotificationCenter({ isDark, className }: NotificationCe
187188
ref={buttonRef}
188189
onClick={() => setOpen(!open)}
189190
className={cn(
190-
"relative inline-flex h-8 w-8 items-center justify-center rounded-full border transition-colors",
191+
"relative inline-flex h-7 w-7 items-center justify-center rounded-full border transition-colors backdrop-blur-sm",
191192
isDark
192193
? "border-white/10 bg-white/5 text-white/70 hover:bg-white/10 hover:text-white"
193194
: "border-black/10 bg-black/5 text-black/60 hover:bg-black/10 hover:text-black"
194195
)}
195196
>
196-
<Bell className="h-4 w-4" />
197+
<Bell className="h-3.5 w-3.5" />
197198
{unreadCount > 0 && (
198199
<span
199200
className={cn(
200-
"absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#FF8A5B] text-[9px] font-bold text-white leading-none ring-2",
201+
"absolute -top-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#FF8A5B] text-[8px] font-bold text-white leading-none ring-2 shadow-[0_0_12px_rgba(255,138,91,0.5)]",
201202
isDark ? "ring-[#0A0A0A]" : "ring-white"
202203
)}
203204
>

‎src/components/DemoCall/UserPhoneInterface.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -254,16 +254,16 @@ export default function UserPhoneInterface({
254254
)}
255255

256256
{/* Main Content Area */}
257-
<div className="flex-1 flex flex-col items-center justify-center relative px-6 z-10 w-full max-w-lg mx-auto">
257+
<div className="flex-1 flex flex-col items-center justify-center relative px-6 z-10 w-full max-w-[92vw] sm:max-w-lg mx-auto">
258258

259259
{/* Avatar / Visualizer */}
260-
<div className="relative mb-12">
260+
<div className="relative mb-8 sm:mb-12">
261261
<motion.div
262262
animate={{
263263
scale: agentStatus === 'speaking' ? [1, 1.1, 1] : 1,
264264
}}
265265
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
266-
className="w-40 h-40 rounded-full flex items-center justify-center text-5xl shadow-2xl border-4 border-white/10 bg-white/5 backdrop-blur-sm relative z-10 text-white"
266+
className="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center text-4xl sm:text-5xl shadow-2xl border-4 border-white/10 bg-white/5 backdrop-blur-sm relative z-10 text-white"
267267
>
268268
<span className="font-bold">AI</span>
269269
</motion.div>
@@ -287,8 +287,8 @@ export default function UserPhoneInterface({
287287
</div>
288288

289289
{/* Call Status */}
290-
<div className="text-center space-y-2 mb-10">
291-
<h2 className="text-3xl font-semibold text-white tracking-tight">
290+
<div className="text-center space-y-2 mb-8 sm:mb-10">
291+
<h2 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">
292292
Alice (AI Agent)
293293
</h2>
294294
<p className="font-mono text-sm text-white/50 tracking-wider uppercase">
@@ -310,16 +310,16 @@ export default function UserPhoneInterface({
310310
{currentTranscript ? (
311311
<>
312312
<p className="text-xs uppercase tracking-widest font-bold opacity-40 mb-2 text-green-400">You</p>
313-
<p className="text-xl font-medium leading-relaxed text-white/90">"{currentTranscript}"</p>
314-
</>
315-
) : (
316-
<>
317-
<p className="text-xs uppercase tracking-widest font-bold opacity-40 mb-2 text-blue-400">Alice</p>
318-
<p className="text-xl font-medium leading-relaxed text-white/90">{lastAgentMessage}</p>
319-
</>
320-
)}
321-
</motion.div>
313+
<p className="text-base sm:text-xl font-medium leading-relaxed text-white/90">"{currentTranscript}"</p>
314+
</>
315+
) : (
316+
<>
317+
<p className="text-xs uppercase tracking-widest font-bold opacity-40 mb-2 text-blue-400">Alice</p>
318+
<p className="text-base sm:text-xl font-medium leading-relaxed text-white/90">{lastAgentMessage}</p>
319+
</>
322320
)}
321+
</motion.div>
322+
)}
323323
</AnimatePresence>
324324
</div>
325325
</div>
@@ -364,13 +364,12 @@ export default function UserPhoneInterface({
364364
return (
365365
<div className="fixed inset-0 h-[100dvh] z-50 flex flex-col bg-black text-white overflow-hidden">
366366
{/* Background Layer */}
367-
<motion.div
368-
className="absolute inset-0 z-0 pointer-events-none"
369-
animate={{
370-
background: 'radial-gradient(circle at center, rgba(16, 185, 129, 0.12) 0%, transparent 80%)'
371-
}}
372-
transition={{ duration: 0.8, ease: "easeInOut" }}
373-
/>
367+
<div className="absolute inset-0 z-0 pointer-events-none">
368+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_15%,rgba(255,138,91,0.18),transparent_60%)]" />
369+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(255,210,184,0.10),transparent_55%)]" />
370+
<div className="absolute inset-0 bg-gradient-to-b from-black/30 via-black/25 to-black" />
371+
<div className="absolute inset-0 opacity-[0.08] bg-[url('/noise.webp')] bg-[length:30%]" />
372+
</div>
374373

375374
{/* Back Button */}
376375
{onBack && (
@@ -386,30 +385,30 @@ export default function UserPhoneInterface({
386385
)}
387386

388387
{/* Main Content Area */}
389-
<div className="flex-1 flex flex-col items-center justify-center relative px-6 z-10 w-full max-w-lg mx-auto">
388+
<div className="flex-1 flex flex-col items-center justify-center relative px-6 z-10 w-full max-w-[92vw] sm:max-w-lg mx-auto">
390389
{/* Avatar */}
391-
<div className="relative mb-12">
390+
<div className="relative mb-8 sm:mb-12">
392391
<motion.div
393392
animate={{
394393
scale: [1, 1.05, 1],
395394
}}
396395
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
397-
className="w-40 h-40 rounded-full flex items-center justify-center text-5xl shadow-2xl border-4 border-emerald-500/20 bg-emerald-500/5 backdrop-blur-sm relative z-10 text-white"
396+
className="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center text-4xl sm:text-5xl shadow-2xl border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(255,209,184,0.35),rgba(255,138,91,0.18)_45%,rgba(12,10,9,0.9)_100%)] backdrop-blur-sm relative z-10 text-white"
398397
>
399398
<span className="font-bold">AI</span>
400399
</motion.div>
401400

402401
{/* Ambient ring */}
403-
<div className="absolute -inset-4 rounded-full border-2 animate-[spin_6s_linear_infinite] border-t-emerald-500/30 border-r-transparent border-b-emerald-500/30 border-l-transparent" />
402+
<div className="absolute -inset-4 rounded-full border-2 animate-[spin_6s_linear_infinite] border-t-[#FF8A5B]/40 border-r-transparent border-b-[#FF8A5B]/30 border-l-transparent" />
404403
</div>
405404

406405
{/* Ready Status */}
407-
<div className="text-center space-y-2 mb-10">
408-
<h2 className="text-3xl font-semibold text-white tracking-tight">
409-
Ready to Connect
406+
<div className="text-center space-y-2 mb-8 sm:mb-10">
407+
<h2 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">
408+
AI Ready to Connect
410409
</h2>
411-
<p className="font-mono text-sm text-white/50 tracking-wider uppercase">
412-
AI Agent Standing By
410+
<p className="font-mono text-xs text-white/55 tracking-[0.35em] uppercase">
411+
Standing By
413412
</p>
414413
</div>
415414

@@ -419,18 +418,21 @@ export default function UserPhoneInterface({
419418
animate={{ opacity: 1, y: 0 }}
420419
transition={{ delay: 0.2, duration: 0.4 }}
421420
onClick={handleStartCall}
422-
className="group relative w-20 h-20 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 shadow-[0_0_40px_rgba(16,185,129,0.4)] hover:shadow-[0_0_60px_rgba(16,185,129,0.6)] transition-shadow duration-300 flex items-center justify-center mb-8"
421+
className="group relative w-20 h-20 sm:w-24 sm:h-24 rounded-full flex items-center justify-center mb-6 sm:mb-8 border border-emerald-300/40 shadow-[0_0_45px_rgba(34,197,94,0.45)] hover:shadow-[0_0_70px_rgba(34,197,94,0.65)] transition-shadow duration-300 overflow-hidden"
423422
>
424-
<Phone className="w-8 h-8 text-white group-hover:scale-110 transition-transform" />
423+
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_30%_30%,#C7F9D8_0%,#22C55E_55%,#0B3D1D_100%)]" />
424+
<div className="absolute inset-0 rounded-full bg-[linear-gradient(155deg,rgba(255,255,255,0.25),transparent_55%)]" />
425+
<div className="absolute inset-0 rounded-full bg-[url('/noise.webp')] opacity-[0.12]" />
426+
<Phone className="relative w-7 h-7 sm:w-8 sm:h-8 text-[#0B1A0F] group-hover:scale-110 transition-transform" />
425427
{/* Pulse ring */}
426428
<motion.div
427429
animate={{ scale: [1, 1.5, 1.5], opacity: [0.6, 0, 0] }}
428430
transition={{ duration: 2, repeat: Infinity, ease: "easeOut" }}
429-
className="absolute inset-0 rounded-full border-2 border-emerald-400"
431+
className="absolute inset-0 rounded-full border-2 border-emerald-300/70"
430432
/>
431433
</motion.button>
432434

433-
<p className="text-sm text-white/40">
435+
<p className="text-sm text-white/45">
434436
Tap to start your voice call
435437
</p>
436438

@@ -453,8 +455,8 @@ export default function UserPhoneInterface({
453455
transition={{ delay: 0.4, duration: 0.4 }}
454456
className="w-full mt-8 p-5 rounded-3xl bg-black/60 backdrop-blur-xl border border-white/10 shadow-2xl text-center"
455457
>
456-
<p className="text-xs uppercase tracking-widest font-bold opacity-40 mb-2 text-emerald-400">Voice Call</p>
457-
<p className="text-base font-medium leading-relaxed text-white/70">
458+
<p className="text-xs uppercase tracking-widest font-bold opacity-40 mb-2 text-[#FFB286]">Voice Call</p>
459+
<p className="text-sm sm:text-base font-medium leading-relaxed text-white/70">
458460
Speak naturally with our AI agent. Your microphone will be activated when the call starts.
459461
</p>
460462
</motion.div>

‎src/components/ui/sidebar.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -200,15 +200,18 @@ const Sidebar = React.forwardRef<
200200
if (isMobile) {
201201
return (
202202
<Drawer open={openMobile} onOpenChange={setOpenMobile}>
203-
<DrawerContent
204-
data-sidebar="sidebar"
205-
data-mobile="true"
206-
className={cn(
207-
"p-0 border-t rounded-t-2xl",
208-
isDark
209-
? "bg-[#0A0A0A] text-white border-white/10 [&>div.bg-muted]:bg-white/20"
210-
: "bg-white text-black border-black/10 [&>div.bg-muted]:bg-black/5"
211-
)}
203+
<DrawerContent
204+
data-sidebar="sidebar"
205+
data-mobile="true"
206+
className={cn(
207+
"relative overflow-hidden p-0 border-t rounded-t-2xl",
208+
"before:content-[''] before:absolute before:inset-0 before:pointer-events-none before:bg-[radial-gradient(circle_at_15%_0%,rgba(255,138,91,0.14),transparent_55%)]",
209+
"after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:bg-[url('/noise.webp')] after:bg-[length:30%] after:opacity-[0.08]",
210+
"[&>div]:relative [&>div]:z-10",
211+
isDark
212+
? "bg-[#0A0A0A] text-white border-white/10 [&>div.bg-muted]:bg-white/10 [&>div.bg-muted]:shadow-[0_0_10px_rgba(255,255,255,0.08)]"
213+
: "bg-white text-black border-black/10 [&>div.bg-muted]:bg-black/10"
214+
)}
212215
style={
213216
{
214217
"--sidebar-width": "100%",

‎src/pages/Solutions.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,17 @@ export default function Solutions() {
7373
suffix: '%',
7474
label: t('solutions.stat1Label'),
7575
description: t('solutions.stat1Desc'),
76-
numberClass: 'text-[#FF8A5B]',
76+
numberClass: 'text-[#FF8A5B] drop-shadow-[0_6px_22px_rgba(255,138,91,0.35)]',
77+
suffixClass: 'text-[#FFB286]',
7778
lineClass: 'bg-[#FF8A5B]',
7879
},
7980
{
8081
value: 92,
8182
suffix: '%',
8283
label: t('solutions.stat2Label'),
8384
description: t('solutions.stat2Desc'),
84-
numberClass: 'text-white',
85+
numberClass: 'text-white drop-shadow-[0_6px_22px_rgba(255,255,255,0.18)]',
86+
suffixClass: 'text-white/70',
8587
lineClass: 'bg-[#FF8A5B]/80',
8688
},
8789
{
@@ -90,15 +92,17 @@ export default function Solutions() {
9092
decimalPlaces: 1,
9193
label: t('solutions.stat3Label'),
9294
description: t('solutions.stat3Desc'),
93-
numberClass: 'text-white',
95+
numberClass: 'text-white drop-shadow-[0_6px_22px_rgba(255,255,255,0.18)]',
96+
suffixClass: 'text-white/70',
9497
lineClass: 'bg-[#FF8A5B]/65',
9598
},
9699
{
97100
value: 24,
98101
suffix: '/7',
99102
label: t('solutions.stat4Label'),
100103
description: t('solutions.stat4Desc'),
101-
numberClass: 'text-white',
104+
numberClass: 'text-white drop-shadow-[0_6px_22px_rgba(255,255,255,0.18)]',
105+
suffixClass: 'text-white/70',
102106
lineClass: 'bg-[#FF8A5B]/50',
103107
},
104108
];
@@ -286,15 +290,20 @@ export default function Solutions() {
286290
className={`${stat.numberClass} text-[2.6rem] font-semibold tracking-[-0.08em] sm:text-5xl`}
287291
delay={0.12 + index * 0.04}
288292
/>
289-
<span className="mb-1 text-lg font-semibold tracking-[-0.05em] text-[#FF8A5B]/78 sm:text-2xl">
293+
<span
294+
className={cn(
295+
"mb-1 text-lg font-semibold tracking-[-0.05em] sm:text-2xl",
296+
stat.suffixClass ?? "text-[#FF8A5B]/78"
297+
)}
298+
>
290299
{stat.suffix}
291300
</span>
292301
</div>
293302

294-
<h3 className="mt-3 text-base font-medium tracking-[-0.02em] text-white sm:mt-4 sm:text-lg">
303+
<h3 className="mt-3 text-base font-medium tracking-[-0.02em] !text-white sm:mt-4 sm:text-lg">
295304
{stat.label}
296305
</h3>
297-
<p className="mt-2 max-w-xs text-sm leading-6 text-white/60">
306+
<p className="mt-2 max-w-xs text-sm leading-6 !text-white/70">
298307
{stat.description}
299308
</p>
300309
</div>

0 commit comments

Comments
 (0)