Skip to content

Commit b9f399d

Browse files
atonixdevatonixdev
committed
commit Update account registration and serializers
1 parent c397e61 commit b9f399d

File tree

4 files changed

+180
-48
lines changed

4 files changed

+180
-48
lines changed

‎frontend/src/components/Lab/DomainSidebar.js‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const domainConfigs = {
7979
const DomainSidebar = ({
8080
domain = 'experimentation',
8181
domainsMeta = {},
82+
theme = 'light',
8283
collapsed = false,
8384
onToggleCollapse,
8485
onNavigate,
@@ -97,30 +98,59 @@ const DomainSidebar = ({
9798
return initials || s.slice(0, 3).toUpperCase();
9899
};
99100

100-
const baseClassName =
101-
variant === 'drawer'
102-
? 'w-72 bg-gradient-to-b from-[#0A0F1F] to-[#0D1425] border-r border-[#1A4FFF]/20'
103-
: 'w-full bg-gradient-to-b from-[#0A0F1F] to-[#0D1425] border-r border-[#1A4FFF]/20';
101+
const baseClassName = (() => {
102+
const width = variant === 'drawer' ? 'w-72' : 'w-full';
103+
if (theme === 'dark') {
104+
return `${width} bg-gradient-to-b from-[#0A0F1F] to-[#0D1425] border-r border-[#1A4FFF]/20`;
105+
}
106+
return `${width} bg-white border-r border-gray-200`;
107+
})();
104108

105109
return (
106110
<aside className={baseClassName}>
107-
<div className={collapsed ? 'px-3 py-4 border-b border-[#1A4FFF]/20' : 'px-6 py-5 border-b border-[#1A4FFF]/20'}>
111+
<div
112+
className={
113+
collapsed
114+
? theme === 'dark'
115+
? 'px-3 py-4 border-b border-[#1A4FFF]/20'
116+
: 'px-3 py-4 border-b border-gray-200'
117+
: theme === 'dark'
118+
? 'px-6 py-5 border-b border-[#1A4FFF]/20'
119+
: 'px-6 py-5 border-b border-gray-200'
120+
}
121+
>
108122
<div className="flex items-start justify-between gap-2">
109123
<div className="min-w-0">
110124
<div
111-
className={collapsed ? 'text-sm font-bold text-white font-[\'Poppins\'] text-center' : "text-lg font-bold text-white font-['Poppins']"}
125+
className={
126+
collapsed
127+
? theme === 'dark'
128+
? 'text-sm font-bold text-white font-[\'Poppins\'] text-center'
129+
: 'text-sm font-bold text-gray-900 font-[\'Poppins\'] text-center'
130+
: theme === 'dark'
131+
? "text-lg font-bold text-white font-['Poppins']"
132+
: "text-lg font-bold text-gray-900 font-['Poppins']"
133+
}
112134
title={title}
113135
>
114136
{collapsed ? abbrev(title) : title}
115137
</div>
116-
{!collapsed && <div className="text-xs text-gray-400 mt-1">{subtitle}</div>}
138+
{!collapsed && (
139+
<div className={theme === 'dark' ? 'text-xs text-gray-400 mt-1' : 'text-xs text-gray-600 mt-1'}>
140+
{subtitle}
141+
</div>
142+
)}
117143
</div>
118144

119145
{variant !== 'drawer' && (
120146
<button
121147
type="button"
122148
onClick={() => onToggleCollapse?.()}
123-
className="hidden md:inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/5 border border-white/10 text-white hover:bg-white/10"
149+
className={
150+
theme === 'dark'
151+
? 'hidden md:inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/5 border border-white/10 text-white hover:bg-white/10'
152+
: 'hidden md:inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white border border-gray-200 text-gray-700 hover:bg-gray-50'
153+
}
124154
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
125155
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
126156
>
@@ -148,9 +178,13 @@ const DomainSidebar = ({
148178
collapsed
149179
? 'flex items-center justify-center px-2 py-2.5 rounded-lg font-semibold transition-all duration-200'
150180
: 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold transition-all duration-200',
151-
isActive
152-
? 'bg-[#1A4FFF]/20 text-[#00E0FF] shadow-lg shadow-[#1A4FFF]/25'
153-
: 'text-gray-400 hover:bg-white/5 hover:text-white',
181+
theme === 'dark'
182+
? isActive
183+
? 'bg-[#1A4FFF]/20 text-[#00E0FF] shadow-lg shadow-[#1A4FFF]/25'
184+
: 'text-gray-400 hover:bg-white/5 hover:text-white'
185+
: isActive
186+
? 'bg-primary-50 text-primary-700'
187+
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
154188
].join(' ')
155189
}
156190
>

‎frontend/src/components/Lab/LabLayout.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,15 @@ const LabLayout = () => {
100100

101101
return (
102102
<div className={`min-h-screen ${themeClasses}`}>
103-
<ResearchDomainNav domainsMeta={domainsMeta} />
103+
<ResearchDomainNav domainsMeta={domainsMeta} theme={theme} />
104104

105105
<div className="flex flex-col md:flex-row">
106106
{/* Desktop sidebar */}
107107
<div className={sidebarCollapsed ? 'hidden md:block w-20' : 'hidden md:block w-72'}>
108108
<DomainSidebar
109109
domain={currentDomain}
110110
domainsMeta={domainsMeta}
111+
theme={theme}
111112
collapsed={sidebarCollapsed}
112113
onToggleCollapse={toggleSidebarCollapsed}
113114
/>
@@ -126,6 +127,7 @@ const LabLayout = () => {
126127
<DomainSidebar
127128
domain={currentDomain}
128129
domainsMeta={domainsMeta}
130+
theme={theme}
129131
variant="drawer"
130132
onNavigate={() => setMobileMenuOpen(false)}
131133
/>

‎frontend/src/components/Lab/LabTopBar.js‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,22 @@ const LabTopBar = ({
1616
user?.full_name || user?.username || user?.user?.first_name || 'User';
1717

1818
return (
19-
<div className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex flex-col md:flex-row md:items-center gap-3 md:gap-4">
19+
<div
20+
className={
21+
theme === 'dark'
22+
? 'bg-[#0D1425] border-b border-[#1A4FFF]/20 px-4 md:px-6 py-4 flex flex-col md:flex-row md:items-center gap-3 md:gap-4'
23+
: 'bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex flex-col md:flex-row md:items-center gap-3 md:gap-4'
24+
}
25+
>
2026
<div className="flex items-center gap-3 flex-1">
2127
<button
2228
type="button"
2329
onClick={onToggleMenu}
24-
className="md:hidden px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold"
30+
className={
31+
theme === 'dark'
32+
? 'md:hidden px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-white hover:bg-white/10 font-semibold'
33+
: 'md:hidden px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold'
34+
}
2535
aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
2636
>
2737
{isMenuOpen ? <FiX /> : <FiMenu />}
@@ -31,15 +41,23 @@ const LabTopBar = ({
3141
value={search}
3242
onChange={(e) => setSearch(e.target.value)}
3343
placeholder="Search experiments / runs"
34-
className="w-full md:max-w-xl px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
44+
className={
45+
theme === 'dark'
46+
? 'w-full md:max-w-xl px-4 py-2 border border-white/10 bg-white/5 text-white placeholder:text-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500'
47+
: 'w-full md:max-w-xl px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500'
48+
}
3549
/>
3650
</div>
3751

3852
<div className="flex flex-wrap items-center gap-3 justify-end">
3953
<button
4054
type="button"
4155
onClick={toggleTheme}
42-
className="px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold flex items-center gap-2"
56+
className={
57+
theme === 'dark'
58+
? 'px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-white hover:bg-white/10 font-semibold flex items-center gap-2'
59+
: 'px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold flex items-center gap-2'
60+
}
4361
aria-label="Toggle theme"
4462
>
4563
{theme === 'dark' ? <FiSun /> : <FiMoon />}
@@ -48,14 +66,24 @@ const LabTopBar = ({
4866

4967
<button
5068
type="button"
51-
className="px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold flex items-center gap-2"
69+
className={
70+
theme === 'dark'
71+
? 'px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-white hover:bg-white/10 font-semibold flex items-center gap-2'
72+
: 'px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold flex items-center gap-2'
73+
}
5274
aria-label="Notifications"
5375
>
5476
<FiBell />
5577
<span className="text-sm hidden sm:inline">Notifications</span>
5678
</button>
5779

58-
<div className="px-3 py-2 rounded-lg bg-primary-100 text-primary-700 font-semibold">
80+
<div
81+
className={
82+
theme === 'dark'
83+
? 'px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white font-semibold'
84+
: 'px-3 py-2 rounded-lg bg-primary-100 text-primary-700 font-semibold'
85+
}
86+
>
5987
<span className="text-sm">{displayName}</span>
6088
</div>
6189
</div>

‎frontend/src/components/Lab/ResearchDomainNav.js‎

Lines changed: 98 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
22
import { NavLink, useLocation } from 'react-router-dom';
33
import { FiZap, FiActivity, FiCpu, FiRadio, FiBarChart, FiMenu, FiX } from 'react-icons/fi';
44

5-
const ResearchDomainNav = ({ domainsMeta = {} }) => {
5+
const ResearchDomainNav = ({ domainsMeta = {}, theme = 'light' }) => {
66
const location = useLocation();
77
const [mobileOpen, setMobileOpen] = useState(false);
88

@@ -46,38 +46,68 @@ const ResearchDomainNav = ({ domainsMeta = {} }) => {
4646
}, [location.pathname, isExperimentationActive, domains]);
4747

4848
return (
49-
<div className="bg-gradient-to-r from-[#0A0F1F] via-[#0D1425] to-[#0A0F1F] border-b border-[#1A4FFF]/20 shadow-xl">
49+
<div
50+
className={
51+
theme === 'dark'
52+
? 'bg-gradient-to-r from-[#0A0F1F] via-[#0D1425] to-[#0A0F1F] border-b border-[#1A4FFF]/20 shadow-xl'
53+
: 'bg-white border-b border-gray-200 shadow-sm'
54+
}
55+
>
5056
<div className="max-w-[1800px] mx-auto px-4 sm:px-6 py-4">
5157
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
5258
<div>
53-
<h1 className="text-2xl font-bold text-white font-['Poppins']">
59+
<h1
60+
className={
61+
theme === 'dark'
62+
? "text-2xl font-bold text-white font-['Poppins']"
63+
: "text-2xl font-bold text-gray-900 font-['Poppins']"
64+
}
65+
>
5466
Atonix Research Lab
5567
</h1>
56-
<p className="text-xs text-gray-400 mt-1">
68+
<p className={theme === 'dark' ? 'text-xs text-gray-400 mt-1' : 'text-xs text-gray-600 mt-1'}>
5769
Unified Command Center for Multi-Domain Research
5870
</p>
5971
</div>
6072

6173
{/* Desktop version */}
62-
<div className="hidden sm:block text-xs text-[#00E0FF] font-semibold tracking-wider sm:text-right">
74+
<div
75+
className={
76+
theme === 'dark'
77+
? 'hidden sm:block text-xs text-[#00E0FF] font-semibold tracking-wider sm:text-right'
78+
: 'hidden sm:block text-xs text-primary-700 font-semibold tracking-wider sm:text-right'
79+
}
80+
>
6381
v2.0.0
6482
</div>
6583

6684
{/* Mobile menu toggle */}
6785
<div className="sm:hidden flex items-center justify-between gap-3">
68-
<div className="text-xs text-gray-300">
69-
<span className="font-semibold text-white">{activeDomain?.label}</span>
70-
<span className="text-gray-500"> — </span>
71-
<span className="text-gray-400">{activeDomain?.description}</span>
86+
<div className={theme === 'dark' ? 'text-xs text-gray-300' : 'text-xs text-gray-700'}>
87+
<span className={theme === 'dark' ? 'font-semibold text-white' : 'font-semibold text-gray-900'}>
88+
{activeDomain?.label}
89+
</span>
90+
<span className={theme === 'dark' ? 'text-gray-500' : 'text-gray-400'}> — </span>
91+
<span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>
92+
{activeDomain?.description}
93+
</span>
7294
</div>
7395
<button
7496
type="button"
7597
onClick={() => setMobileOpen((v) => !v)}
76-
className="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10"
98+
className={
99+
theme === 'dark'
100+
? 'inline-flex items-center justify-center w-10 h-10 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10'
101+
: 'inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 bg-white hover:bg-gray-50'
102+
}
77103
aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
78104
aria-expanded={mobileOpen}
79105
>
80-
{mobileOpen ? <FiX className="text-white" /> : <FiMenu className="text-white" />}
106+
{mobileOpen ? (
107+
<FiX className={theme === 'dark' ? 'text-white' : 'text-gray-700'} />
108+
) : (
109+
<FiMenu className={theme === 'dark' ? 'text-white' : 'text-gray-700'} />
110+
)}
81111
</button>
82112
</div>
83113
</div>
@@ -99,9 +129,13 @@ const ResearchDomainNav = ({ domainsMeta = {} }) => {
99129
return [
100130
'group flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300',
101131
'border backdrop-blur-md w-full min-w-0',
102-
isActive
103-
? 'bg-[#1A4FFF]/20 border-[#1A4FFF]'
104-
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-[#00E0FF]/50',
132+
theme === 'dark'
133+
? isActive
134+
? 'bg-[#1A4FFF]/20 border-[#1A4FFF]'
135+
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-[#00E0FF]/50'
136+
: isActive
137+
? 'bg-primary-50 border-primary-200'
138+
: 'bg-white border-gray-200 hover:bg-gray-50',
105139
].join(' ');
106140
}}
107141
>
@@ -110,19 +144,37 @@ const ResearchDomainNav = ({ domainsMeta = {} }) => {
110144
return (
111145
<>
112146
<Icon
113-
className={`text-lg transition-colors ${
114-
isActive ? 'text-[#00E0FF]' : 'text-gray-400 group-hover:text-[#00E0FF]'
115-
}`}
147+
className={
148+
theme === 'dark'
149+
? `text-lg transition-colors ${
150+
isActive ? 'text-[#00E0FF]' : 'text-gray-400 group-hover:text-[#00E0FF]'
151+
}`
152+
: `text-lg transition-colors ${
153+
isActive ? 'text-primary-700' : 'text-gray-500 group-hover:text-primary-700'
154+
}`
155+
}
116156
/>
117157
<div className="flex flex-col min-w-0">
118158
<span
119-
className={`text-sm font-semibold transition-colors ${
120-
isActive ? 'text-white' : 'text-gray-300 group-hover:text-white'
121-
}`}
159+
className={
160+
theme === 'dark'
161+
? `text-sm font-semibold transition-colors ${
162+
isActive ? 'text-white' : 'text-gray-300 group-hover:text-white'
163+
}`
164+
: `text-sm font-semibold transition-colors ${
165+
isActive ? 'text-gray-900' : 'text-gray-700 group-hover:text-gray-900'
166+
}`
167+
}
122168
>
123169
{domain.label}
124170
</span>
125-
<span className="text-xs text-gray-500 leading-snug truncate">
171+
<span
172+
className={
173+
theme === 'dark'
174+
? 'text-xs text-gray-500 leading-snug truncate'
175+
: 'text-xs text-gray-500 leading-snug truncate'
176+
}
177+
>
126178
{domain.description}
127179
</span>
128180
</div>
@@ -150,9 +202,13 @@ const ResearchDomainNav = ({ domainsMeta = {} }) => {
150202
return [
151203
'group flex items-center gap-3 px-5 py-3 rounded-lg transition-all duration-300',
152204
'border backdrop-blur-md w-full min-w-0',
153-
isActive
154-
? 'bg-[#1A4FFF]/20 border-[#1A4FFF] shadow-lg shadow-[#1A4FFF]/25'
155-
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-[#00E0FF]/50',
205+
theme === 'dark'
206+
? isActive
207+
? 'bg-[#1A4FFF]/20 border-[#1A4FFF] shadow-lg shadow-[#1A4FFF]/25'
208+
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-[#00E0FF]/50'
209+
: isActive
210+
? 'bg-primary-50 border-primary-200'
211+
: 'bg-white border-gray-200 hover:bg-gray-50',
156212
].join(' ');
157213
}}
158214
>
@@ -161,15 +217,27 @@ const ResearchDomainNav = ({ domainsMeta = {} }) => {
161217
return (
162218
<>
163219
<Icon
164-
className={`text-xl transition-colors ${
165-
isActive ? 'text-[#00E0FF]' : 'text-gray-400 group-hover:text-[#00E0FF]'
166-
}`}
220+
className={
221+
theme === 'dark'
222+
? `text-xl transition-colors ${
223+
isActive ? 'text-[#00E0FF]' : 'text-gray-400 group-hover:text-[#00E0FF]'
224+
}`
225+
: `text-xl transition-colors ${
226+
isActive ? 'text-primary-700' : 'text-gray-500 group-hover:text-primary-700'
227+
}`
228+
}
167229
/>
168230
<div className="flex flex-col">
169231
<span
170-
className={`text-sm font-semibold transition-colors ${
171-
isActive ? 'text-white' : 'text-gray-300 group-hover:text-white'
172-
}`}
232+
className={
233+
theme === 'dark'
234+
? `text-sm font-semibold transition-colors ${
235+
isActive ? 'text-white' : 'text-gray-300 group-hover:text-white'
236+
}`
237+
: `text-sm font-semibold transition-colors ${
238+
isActive ? 'text-gray-900' : 'text-gray-700 group-hover:text-gray-900'
239+
}`
240+
}
173241
>
174242
{domain.label}
175243
</span>

0 commit comments

Comments
 (0)