Remove Logo from sign up and login flow

This commit is contained in:
Mo Tarbin
2026-07-29 00:30:58 -04:00
parent 99b467488f
commit 9950d8ff6c
4 changed files with 28 additions and 25 deletions

View File

@@ -1,18 +1,7 @@
import { Capacitor } from '@capacitor/core'
import { Box, Sheet, Typography } from '@mui/joy'
import Logo from '../../Logo'
const Wordmark = () => (
<Typography
level='h3'
sx={{ fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}
>
Done
<Box component='span' sx={{ color: 'primary.500' }}>
tick
</Box>
</Typography>
)
/**
* Full-height auth layout: edge-to-edge on phones, a centered surface card from
* the `sm` breakpoint up. The route renders without a navbar, so the shell owns
@@ -24,7 +13,13 @@ const AuthShell = ({
action,
children,
footer,
logoSize = 64,
logoSize = 48,
// In the app the user already came through the app icon and the Get Started
// mark, so repeating it here is noise. On the web these routes are the first
// thing a visitor sees — often on a self-hosted domain, and with no navbar —
// so the mark is the only thing identifying the app. Views reached from an
// emailed link override this to always show it.
showLogo = !Capacitor.isNativePlatform(),
}) => {
return (
<Box
@@ -67,18 +62,20 @@ const AuthShell = ({
<Box sx={{ position: 'absolute', top: 0, right: 0 }}>{action}</Box>
)}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 1,
mb: 3,
}}
>
<Logo size={`${logoSize}px`} />
<Wordmark />
</Box>
{/* Mark only: the wordmark sat at nearly the same size and weight as
the title below it, so the two competed instead of forming a
hierarchy. */}
{showLogo && (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
mb: 2,
}}
>
<Logo size={`${logoSize}px`} />
</Box>
)}
{title && (
<Typography

View File

@@ -420,6 +420,7 @@ const LoginView = () => {
? 'Pick up right where you left off.'
: 'Sign in to your account to continue.'
}
logoSize={0}
footer={<LegalLinks />}
action={
Capacitor.isNativePlatform() ? (

View File

@@ -130,6 +130,7 @@ const SignupView = () => {
title='Create your account'
subtitle='Track chores and tasks together, in one shared place.'
footer={<LegalLinks />}
logoSize={0}
>
<Box
component='form'

View File

@@ -96,6 +96,7 @@ const UpdatePasswordView = () => {
title='This link is not valid'
subtitle='The password reset link is incomplete or has already been used. Request a new one to continue.'
footer={<LegalLinks />}
showLogo
>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Button
@@ -127,6 +128,9 @@ const UpdatePasswordView = () => {
title='Set a new password'
subtitle='Choose a password you have not used on this account before.'
footer={<LegalLinks />}
// Reached from an emailed link, usually in a browser: an unbranded page
// asking for a new password is the exact shape of a phishing screen.
showLogo
>
<Box
component='form'