mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-24 16:49:48 +00:00
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:
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user