From fcee85e358637c894cbba05870ca4af1c9bbde4c Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 23 Feb 2026 00:48:32 +0200
Subject: [PATCH] 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.
---
 .../Authentication/RegisterVerify.module.scss | 18 --------------
 .../Authentication/RegisterVerify.tsx         | 24 +++++++++++++++----
 2 files changed, 19 insertions(+), 23 deletions(-)
 delete mode 100644 packages/webapp/src/containers/Authentication/RegisterVerify.module.scss

diff --git a/packages/webapp/src/containers/Authentication/RegisterVerify.module.scss b/packages/webapp/src/containers/Authentication/RegisterVerify.module.scss
deleted file mode 100644
index f0754f470..000000000
--- a/packages/webapp/src/containers/Authentication/RegisterVerify.module.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Authentication/RegisterVerify.tsx b/packages/webapp/src/containers/Authentication/RegisterVerify.tsx
index 46148a426..d022ff454 100644
--- a/packages/webapp/src/containers/Authentication/RegisterVerify.tsx
+++ b/packages/webapp/src/containers/Authentication/RegisterVerify.tsx
@@ -1,12 +1,13 @@
 // @ts-nocheck
 import { Button, Intent } from '@blueprintjs/core';
+import { x } from '@xstyled/emotion';
 import AuthInsider from './AuthInsider';
 import { AuthInsiderCard } from './_components';
-import styles from './RegisterVerify.module.scss';
 import { AppToaster, Stack } from '@/components';
 import { useAuthActions, useAuthUserVerifyEmail } from '@/hooks/state';
 import { useAuthSignUpVerifyResendMail } from '@/hooks/query';
 import { AuthContainer } from './AuthContainer';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export default function RegisterVerify() {
   const { setLogout } = useAuthActions();
@@ -14,6 +15,7 @@ export default function RegisterVerify() {
     useAuthSignUpVerifyResendMail();
 
   const emailAddress = useAuthUserVerifyEmail();
+  const isDarkMode = useIsDarkMode();
 
   const handleResendMailBtnClick = () => {
     resendSignUpVerifyMail()
@@ -37,12 +39,24 @@ export default function RegisterVerify() {
   return (
     <AuthContainer>
       <AuthInsider>
-        <AuthInsiderCard className={styles.root}>
-          <h2 className={styles.title}>Please verify your email</h2>
-          <p className={styles.description}>
+        <AuthInsiderCard textAlign="center">
+          <x.h2
+            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
             inside to get started.
-          </p>
+          </x.p>
 
           <Stack spacing={4}>
             <Button