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 </div> : null
if (connState?.error && !afterConnectError) { if (connState?.error && !afterConnectError) {
return errorOverlay return <div className="pre-main">{errorOverlay}</div>
} else if ((!connState?.connected && !afterConnectError) || !clientState) { } else if ((!connState?.connected && !afterConnectError) || !clientState) {
const msg = connState?.connected ? const msg = connState?.connected ?
"Waiting for client state..." : "Connecting to backend..." "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)"/> <ScaleLoader width="2rem" height="2rem" color="var(--primary-color)"/>
{msg} {msg}
</div> </div>
} else if (!clientState.is_logged_in) { } 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) { } else if (!clientState.is_verified) {
return <VerificationScreen client={client} clientState={clientState}/> return <div className="pre-main"><VerificationScreen client={client} clientState={clientState}/></div>
} else { } else {
return <ClientContext value={client}> return <ClientContext value={client}>
<LightboxWrapper> <LightboxWrapper>

View file

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