fix: add dark mode support to email confirmation UI

Refactored RegisterVerify component to use xstyled for styling
with proper dark mode color values instead of hardcoded light theme colors.
This commit is contained in:
Ahmed Bouhuolia
2026-02-23 00:48:32 +02:00
parent 64a10053e3
commit fcee85e358
2 changed files with 19 additions and 23 deletions

View File

@@ -1,18 +0,0 @@
.root {
text-align: center;
}
.title{
font-size: 18px;
font-weight: 600;
margin-bottom: 0.5rem;
color: #252A31;
}
.description{
margin-bottom: 1rem;
font-size: 15px;
line-height: 1.45;
color: #404854;
}

View File

@@ -1,12 +1,13 @@
// @ts-nocheck // @ts-nocheck
import { Button, Intent } from '@blueprintjs/core'; import { Button, Intent } from '@blueprintjs/core';
import { x } from '@xstyled/emotion';
import AuthInsider from './AuthInsider'; import AuthInsider from './AuthInsider';
import { AuthInsiderCard } from './_components'; import { AuthInsiderCard } from './_components';
import styles from './RegisterVerify.module.scss';
import { AppToaster, Stack } from '@/components'; import { AppToaster, Stack } from '@/components';
import { useAuthActions, useAuthUserVerifyEmail } from '@/hooks/state'; import { useAuthActions, useAuthUserVerifyEmail } from '@/hooks/state';
import { useAuthSignUpVerifyResendMail } from '@/hooks/query'; import { useAuthSignUpVerifyResendMail } from '@/hooks/query';
import { AuthContainer } from './AuthContainer'; import { AuthContainer } from './AuthContainer';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export default function RegisterVerify() { export default function RegisterVerify() {
const { setLogout } = useAuthActions(); const { setLogout } = useAuthActions();
@@ -14,6 +15,7 @@ export default function RegisterVerify() {
useAuthSignUpVerifyResendMail(); useAuthSignUpVerifyResendMail();
const emailAddress = useAuthUserVerifyEmail(); const emailAddress = useAuthUserVerifyEmail();
const isDarkMode = useIsDarkMode();
const handleResendMailBtnClick = () => { const handleResendMailBtnClick = () => {
resendSignUpVerifyMail() resendSignUpVerifyMail()
@@ -37,12 +39,24 @@ export default function RegisterVerify() {
return ( return (
<AuthContainer> <AuthContainer>
<AuthInsider> <AuthInsider>
<AuthInsiderCard className={styles.root}> <AuthInsiderCard textAlign="center">
<h2 className={styles.title}>Please verify your email</h2> <x.h2
<p className={styles.description}> fontSize="18px"
fontWeight={600}
mb="0.5rem"
color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#252A31'}
>
Please verify your email
</x.h2>
<x.p
mb="1rem"
fontSize="15px"
lineHeight="1.45"
color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#404854'}
>
We sent an email to <strong>{emailAddress}</strong> Click the link We sent an email to <strong>{emailAddress}</strong> Click the link
inside to get started. inside to get started.
</p> </x.p>
<Stack spacing={4}> <Stack spacing={4}>
<Button <Button