fix: border color of dark mode

.npmrc

@@ -1,2 +1,2 @@
 @rkheftan:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=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
+//npm.pkg.github.com/:_authToken=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

package-lock.json

@@ -15,7 +15,7 @@
         "@mui/stylis-plugin-rtl": "^7.2.0",
         "@mui/x-data-grid-premium": "^8.10.0",
         "@mui/x-date-pickers": "^8.10.0",
-        "@rkheftan/harmony-ui": "^0.1.8",
+        "@rkheftan/harmony-ui": "^0.2.86",
         "@rollup/rollup-win32-x64-msvc": "^4.46.3",
         "axios": "^1.11.0",
         "date-fns": "^4.1.0",
@@ -1843,17 +1843,19 @@
       }
     },
     "node_modules/@rkheftan/harmony-ui": {
-      "version": "0.1.8",
+      "version": "0.2.86",
-      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.8/ceb42e35ecc6f5ec4ab312dba32c73d8175ab861",
+      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.2.86/db9acf1a2c0b61cc5ccf04e6b4be31e51ca09815",
-      "integrity": "sha512-taau98lOVAqd8Oc4SuP8l0Yo6qTTLH24HPWIs/MLAcaKQrVR0et5gZ+PdQswoUko6/019fe+4Wx9871AiulLLg==",
+      "integrity": "sha512-oECk47uxn/CTeZI2YW0cPCWIbPE+xKkUaY5UpNrATYBFZ8PviH2CarHFxpnJOoxKmTj59eEmWa57Qu4oQl5P5Q==",
       "peerDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/material": "^7.3.1",
         "@mui/x-data-grid-premium": "^8.10.0",
+        "i18next": "^25.3.0",
         "iconsax-react": "^0.0.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-i18next": "^15.6.0",
         "react-router-dom": "^7.8.0"
       }
     },

package.json

@@ -18,7 +18,7 @@
     "@mui/stylis-plugin-rtl": "^7.2.0",
     "@mui/x-data-grid-premium": "^8.10.0",
     "@mui/x-date-pickers": "^8.10.0",
-    "@rkheftan/harmony-ui": "^0.1.8",
+    "@rkheftan/harmony-ui": "^0.2.86",
     "@rollup/rollup-win32-x64-msvc": "^4.46.3",
     "axios": "^1.11.0",
     "date-fns": "^4.1.0",

public/locales/en/setting.json

@@ -16,7 +16,8 @@
     "familyName": "Family Name",
     "country": "Country",
     "gender": "Gender",
-    "nationalCode": "National code(Op",
+    "nationalCode": "National code",
+    "optionalNationalCode": "National code(Optional)",
     "man": "Male",
     "woman": "Female",
     "genderPlaceholder": "Male",

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={() => {
+            onClick={handleSendCode}
-              setCodeSent(true);
-              handleSendCode();
-            }}
             sx={{
               color: 'primary.main',
               width: { xs: '100%', sm: 208 },
@@ -148,8 +146,7 @@ export default function PhoneEditForm({
           </Button>
         )}
       </Box>
-      {/* buttonState === 'counting' && !isVerified && */}
+      {isCodeSent && !isSendingCode && !isVerified && (
-      {codeSent && !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,
 };