fix(auth): style buttons/inputs on all auth screens, not just login#170
Conversation
…169) The brand-* classes (.brand-btn, .brand-text, .brand-focus, .brand-info-box) were defined in Login.vue's <style scoped>, so only the login screen got them. The other auth screens — forgot/reset password, signup, email verification — use the same classes but rendered their primary buttons and inputs unstyled (white text, no background), which read as broken/ugly. Moves the shared brand-* rules to global src/style.css with a --brand-color fallback (blue-500 when no org branding is set), and drops the now-redundant scoped block from Login. All auth screens now render consistently. Closes #169.
unidoc-alip
left a comment
unidoc-alip
left a comment
There was a problem hiding this comment.
Closes #169. Root cause confirmed: .brand-btn/.brand-text/.brand-text-hover/.brand-focus/.brand-info-box were scoped to Login.vue, so ForgotPassword, Signup, VerifyEmail and VerifyEmailChange referenced the same classes but never got the CSS — verified via grep that all five views use these classes. Moving the rules to global src/style.css with a var(--brand-color, #3b82f6) fallback fixes all four screens at once; the fallback matches App.vue's existing --brand-color: #3b82f6 root default, so Login renders identically to before. No other view defines conflicting .brand-* classes, so going global introduces no collisions. Pure CSS/markup change — no logic, no user input, no security implications. Straightforward, well-scoped fix.
looks good to me
2 participants
Closes #169 — the reset/forgot-password button looked unstyled ("ugly").
Root cause (not just that one button): the brand-* auth classes —
.brand-btn,.brand-text,.brand-text-hover,.brand-focus,.brand-info-box— were defined inLogin.vue's<style scoped>. Scoped styles only apply to Login, so ForgotPassword, Signup, VerifyEmail and VerifyEmailChange all use those classes but never received the CSS — their primary buttons rendered with white text and no background, and inputs had no brand focus ring.Fix: move the shared brand-* rules to global
src/style.css(with avar(--brand-color, #3b82f6)fallback so they work even when an org hasn't set a branding color), and remove the scoped block from Login. One change fixes all four screens; Login is unchanged visually.just build-webgreen. No logic/API change.