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