admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: US-003 - Responsive login card sizing and dashboard style alignment

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-15 01:50:09 +00:00
parent f28693b0ad
commit 38fdb6fa27
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LoginScreen.tsx
+22 -21
View File
@@ -151,13 +151,14 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
aria-modal="true" aria-modal="true"
> >
<motion.div <motion.div
className="bg-white"
style={{ style={{
width: '320px', width: 'clamp(320px, 28vw, 480px)',
padding: '32px', maxWidth: 'calc(100vw - 32px)',
padding: 'clamp(24px, 2.5vw, 40px)',
borderRadius: '12px', borderRadius: '12px',
border: '1px solid #E5E7EB', border: '1px solid #E4EDEB',
boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)', boxShadow: '0 1px 2px rgba(26,43,42,0.05)',
backgroundColor: 'var(--surface, #FFFFFF)',
}} }}
initial={{ opacity: 0, scale: 0.98 }} initial={{ opacity: 0, scale: 0.98 }}
animate={isExiting ? { scale: 1.03, opacity: 0 } : { scale: 1, opacity: 1 }} animate={isExiting ? { scale: 1.03, opacity: 0 } : { scale: 1, opacity: 1 }}
@@ -179,7 +180,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
width: '32px', width: '32px',
height: '32px', height: '32px',
border: '3px solid #E5E7EB', border: '3px solid #E4EDEB',
borderTopColor: '#0D6E6E', borderTopColor: '#0D6E6E',
borderRadius: '50%', borderRadius: '50%',
}} }}
@@ -222,7 +223,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '13px', fontSize: '13px',
fontWeight: 600, fontWeight: 600,
color: '#64748B', color: 'var(--text-secondary, #5B7A78)',
letterSpacing: '0.01em', letterSpacing: '0.01em',
}} }}
> >
@@ -233,7 +234,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '11px', fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: '#94A3B8', color: 'var(--text-tertiary, #8DA8A5)',
marginTop: '2px', marginTop: '2px',
}} }}
> >
@@ -249,9 +250,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
display: 'block', display: 'block',
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '12px', fontSize: 'clamp(12px, 1vw, 14px)',
fontWeight: 500, fontWeight: 500,
color: '#64748B', color: 'var(--text-secondary, #5B7A78)',
marginBottom: '6px', marginBottom: '6px',
}} }}
> >
@@ -262,9 +263,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
width: '100%', width: '100%',
padding: '9px 11px', padding: '9px 11px',
fontFamily: "'Geist Mono', 'Fira Code', monospace", fontFamily: "'Geist Mono', 'Fira Code', monospace",
fontSize: '13px', fontSize: 'clamp(13px, 1.1vw, 15px)',
backgroundColor: activeField === 'username' ? '#FFFFFF' : '#FAFAFA', backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
border: activeField === 'username' ? '1px solid #0D6E6E' : '1px solid #E5E7EB', border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB',
borderRadius: '4px', borderRadius: '4px',
color: '#111827', color: '#111827',
minHeight: '38px', minHeight: '38px',
@@ -291,9 +292,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
display: 'block', display: 'block',
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '12px', fontSize: 'clamp(12px, 1vw, 14px)',
fontWeight: 500, fontWeight: 500,
color: '#64748B', color: 'var(--text-secondary, #5B7A78)',
marginBottom: '6px', marginBottom: '6px',
}} }}
> >
@@ -304,9 +305,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
width: '100%', width: '100%',
padding: '9px 11px', padding: '9px 11px',
fontFamily: "'Geist Mono', 'Fira Code', monospace", fontFamily: "'Geist Mono', 'Fira Code', monospace",
fontSize: '13px', fontSize: 'clamp(13px, 1.1vw, 15px)',
backgroundColor: activeField === 'password' ? '#FFFFFF' : '#FAFAFA', backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
border: activeField === 'password' ? '1px solid #0D6E6E' : '1px solid #E5E7EB', border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB',
borderRadius: '4px', borderRadius: '4px',
color: '#111827', color: '#111827',
letterSpacing: '0.15em', letterSpacing: '0.15em',
@@ -340,7 +341,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
width: '100%', width: '100%',
padding: '10px 16px', padding: '10px 16px',
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '14px', fontSize: 'clamp(14px, 1.1vw, 16px)',
fontWeight: 600, fontWeight: 600,
color: '#FFFFFF', color: '#FFFFFF',
backgroundColor: buttonBg, backgroundColor: buttonBg,
@@ -394,14 +395,14 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
marginTop: '22px', marginTop: '22px',
paddingTop: '18px', paddingTop: '18px',
borderTop: '1px solid #E5E7EB', borderTop: '1px solid #E4EDEB',
}} }}
> >
<p <p
style={{ style={{
fontFamily: "var(--font-ui)", fontFamily: "var(--font-ui)",
fontSize: '11px', fontSize: '11px',
color: '#94A3B8', color: 'var(--text-tertiary, #8DA8A5)',
textAlign: 'center', textAlign: 'center',
}} }}
> >