bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): tokenize reset password colors

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 19:28:12 -07:00
parent 987ccae747
commit e4c4c60cff
1 changed files with 154 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/ResetPassword.tsx
View File

@ -57,7 +57,7 @@ export function ResetPassword() {
</div> </div>
{error && <div className="error-message">{error}</div>} {error && <div className="error-message">{error}</div>}
{message && <div className="success-message" style={{ color: '#00ff88', marginBottom: '20px', textAlign: 'center' }}>{message}</div>} {message && <div className="success-message">{message}</div>}
<Button type="submit" disabled={loading || !!message} className="auth-button"> <Button type="submit" disabled={loading || !!message} className="auth-button">
{loading ? 'Updating...' : 'Update Password'} {loading ? 'Updating...' : 'Update Password'}
@ -70,25 +70,27 @@ export function ResetPassword() {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
background: #0a0b0d; background: var(--background);
color: #fff; color: var(--foreground);
} }
.login-card { .login-card {
background: #14151a; background: var(--card);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border);
padding: 40px; padding: 40px;
border-radius: 16px; border-radius: 16px;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); box-shadow: var(--card-shadow);
} }
h1 { h1 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
background: linear-gradient(90deg, #fff, #00ff88); background: linear-gradient(90deg, var(--foreground), var(--bl-success));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -96,7 +98,8 @@ export function ResetPassword() {
.subtitle { .subtitle {
text-align: center; text-align: center;
color: #929292; color: var(--muted-foreground);
margin-bottom: 32px; margin-bottom: 32px;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -108,31 +111,35 @@ export function ResetPassword() {
label { label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
color: #ccc; color: var(--muted-foreground);
font-size: 0.9rem; font-size: 0.9rem;
} }
input { input {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.05); background: var(--input);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
color: #fff; color: var(--foreground);
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: #00ff88; border-color: var(--bl-focus-ring);
} }
.auth-button { .auth-button {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
background: #00ff88; background: var(--bl-success);
color: #000; color: var(--primary-foreground);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-weight: bold; font-weight: bold;
@ -148,14 +155,21 @@ export function ResetPassword() {
} }
.error-message { .error-message {
color: #ff3366; color: var(--bl-danger);
background: rgba(255, 51, 102, 0.1); background: var(--bl-danger-muted);
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 0.9rem; font-size: 0.9rem;
text-align: center; text-align: center;
} }
.success-message {
color: var(--bl-success);
margin-bottom: 20px;
text-align: center;
}
`}</style> `}</style>
</div> </div>
); );