web/css: fix background colors again

This commit is contained in:
Tulir Asokan 2024-12-25 14:20:04 +02:00
parent eda7d6790e
commit 6aa4e91c0a
2 changed files with 14 additions and 8 deletions

View file

@ -70,18 +70,18 @@ function App() {
</div> : null
if (connState?.error && !afterConnectError) {
return errorOverlay
return <div className="pre-main">{errorOverlay}</div>
} else if ((!connState?.connected && !afterConnectError) || !clientState) {
const msg = connState?.connected ?
"Waiting for client state..." : "Connecting to backend..."
return <div className="pre-connect">
return <div className="pre-main waiting-to-connect">
<ScaleLoader width="2rem" height="2rem" color="var(--primary-color)"/>
{msg}
</div>
} else if (!clientState.is_logged_in) {
return <LoginScreen client={client} clientState={clientState}/>
return <div className="pre-main"><LoginScreen client={client} clientState={clientState}/></div>
} else if (!clientState.is_verified) {
return <VerificationScreen client={client} clientState={clientState}/>
return <div className="pre-main"><VerificationScreen client={client} clientState={clientState}/></div>
} else {
return <ClientContext value={client}>
<LightboxWrapper>

View file

@ -158,7 +158,7 @@ body {
font-family: var(--font-stack);
margin: 0;
padding: 0;
background-color: var(--login-background-color);
background-color: var(--background-color);
line-height: 1.5;
font-size: 16px;
touch-action: none;
@ -248,9 +248,15 @@ div.connection-error-wrapper {
}
}
div.pre-connect {
margin-top: 2rem;
div.pre-main {
position: fixed;
inset: 0;
background-color: var(--login-background-color);
&.waiting-to-connect {
padding-top: 2rem;
text-align: center;
}
}
a {