fix: border color of dark mode

src/components/Layout/ProductsMenu.tsx

@@ -55,7 +55,7 @@ export default function ProductsMenu({
         {productsData.map((product) => (
           <Stack
             key={product.id}
-            direction="row"
+            direction="row-reverse"
             spacing={2}
             alignItems="center"
             width="100%"

src/components/Layout/Toolbar.tsx

@@ -37,7 +37,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         height: (t) => t.spacing(isMobile ? 8 : 10.5),
         bgcolor: 'background.paper',
         px: isMobile ? 3 : 2,
-        borderBottom: (t) => `1px solid ${t.palette.divider}`,
+        borderBottom: `1px solid var(--mui-palette-divider)`,
         boxSizing: 'content-box',
         display: 'flex',
         alignItems: 'center',

src/data/products.ts

@@ -6,7 +6,7 @@ export interface Product {
   titleKey: string;
   descriptionKey: string;
   LogoComponent: FC;
-  demoLink: string;
+  demoLink: string | null;
 }
 
 export const productsData: Product[] = [
@@ -15,7 +15,7 @@ export const productsData: Product[] = [
     titleKey: 'products.harmonyClub.title',
     descriptionKey: 'products.harmonyClub.description',
     LogoComponent: Logo, // Reference the component
-    demoLink: '', // FIXME: update this url
+    demoLink: null, // FIXME: update this url
   },
   // add more products here
 ];

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -29,6 +29,7 @@ export function PhoneNumber() {
     'default',
   );
   const [isVerified, setIsVerified] = useState(false);
+  const [isCodeSent, setIsCodeSent] = useState(false);
   const [phones, setPhones] = useState<Phone[]>([]);
   const [countryCode, setCountryCode] = useState<CountryCode>('+98');
   const [phoneNumberError, setPhoneNumberError] = useState<string>();
@@ -132,6 +133,7 @@ export function PhoneNumber() {
     if (result?.success) {
       setButtonState('counting');
       setIsVerified(false);
+      setIsCodeSent(true);
       toast({
         message: result.message || t('settingForm.codeSentSuccessfully'),
         severity: 'success',
@@ -236,6 +238,8 @@ export function PhoneNumber() {
               isVerified={isVerified}
               isVerifying={isBusy}
               isSendingCode={isSendingCode}
+              isCodeSent={isCodeSent}
+              setIsCodeSent={setIsCodeSent}
               buttonState={buttonState}
               setButtonState={setButtonState}
               handleSendCode={handleSendCode}

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -11,7 +11,7 @@ import { Edit2, TickCircle } from 'iconsax-react';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PhoneEditFormProps } from '@/features/profile/types/settingsType';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CountryCodeSelector } from '@/features/authentication/components/CountryCodeSelector';
 import { LTRTypography } from '@/components/common/LTRTypography';
@@ -26,6 +26,8 @@ export default function PhoneEditForm({
   isVerified,
   isVerifying,
   isSendingCode,
+  isCodeSent,
+  setIsCodeSent,
   buttonState,
   setButtonState,
   handleSendCode,
@@ -36,7 +38,6 @@ export default function PhoneEditForm({
   verificationCodeError,
 }: PhoneEditFormProps) {
   const { t } = useTranslation('setting');
-  const [codeSent, setCodeSent] = useState(false);
 
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -88,8 +89,8 @@ export default function PhoneEditForm({
                     size="small"
                     onClick={() => {
                       setButtonState('default');
-                      setPhoneNumber('');
                       setVerificationCode('');
+                      setIsCodeSent(false);
                     }}
                     edge="end"
                   >
@@ -128,10 +129,7 @@ export default function PhoneEditForm({
           <Button
             variant="text"
             loading={isSendingCode}
-            onClick={() => {
-              setCodeSent(true);
-              handleSendCode();
-            }}
+            onClick={handleSendCode}
             sx={{
               color: 'primary.main',
               width: { xs: '100%', sm: 208 },
@@ -148,8 +146,7 @@ export default function PhoneEditForm({
           </Button>
         )}
       </Box>
-      {/* buttonState === 'counting' && !isVerified && */}
-      {codeSent && !isSendingCode && !isVerified && (
+      {isCodeSent && !isSendingCode && !isVerified && (
         <Box
           sx={{
             display: 'flex',

src/features/profile/types/settingsType.ts

@@ -1,5 +1,6 @@
 import type { CountryCode } from '@/types/commonTypes';
 import type { TFunction } from 'i18next';
+import type { Dispatch } from 'react';
 
 export enum Gender {
   Male = 2,
@@ -115,6 +116,8 @@ export interface PhoneEditFormProps {
   isVerified: boolean;
   isVerifying: boolean;
   isSendingCode: boolean;
+  isCodeSent: boolean;
+  setIsCodeSent: Dispatch<boolean>;
   buttonState: 'default' | 'counting';
   setButtonState: (v: 'default' | 'counting') => void;
   handleSendCode: () => void;

src/theme/color.type.ts

@@ -47,4 +47,8 @@ export interface Palette {
     dark: PaletteColorOptions;
     light: PaletteColorOptions;
   };
+  divider: {
+    dark: string;
+    light: string;
+  };
 }

src/theme/colors.ts

@@ -139,4 +139,8 @@ export const PALETTE: Palette = {
       disabled: '#FFFFFF38',
     },
   },
+  divider: {
+    dark: grey[700],
+    light: 'rgba(0, 0, 0,0.12)',
+  },
 };

src/theme/palette.ts

@@ -43,6 +43,7 @@ export const lightPalette: PaletteOptions = {
   background: PALETTE.background.light,
   text: PALETTE.text.light,
   club: PALETTE.club.light,
+  divider: PALETTE.divider.light,
 };
 
 export const darkPalette: PaletteOptions = {
@@ -57,4 +58,5 @@ export const darkPalette: PaletteOptions = {
   background: PALETTE.background.dark,
   text: PALETTE.text.dark,
   club: PALETTE.club.dark,
+  divider: PALETTE.divider.dark,
 };