From 86bca4d4a6c6b6d261d95dde1e5e4359a89205ba Mon Sep 17 00:00:00 2001 From: Sajad Mirjalili Date: Fri, 26 Sep 2025 10:52:38 +0330 Subject: [PATCH] fix: border color of dark mode --- .npmrc | 2 +- package-lock.json | 10 ++++++---- package.json | 2 +- public/locales/en/setting.json | 3 ++- src/components/Layout/ProductsMenu.tsx | 2 +- src/components/Layout/Toolbar.tsx | 2 +- src/data/products.ts | 4 ++-- .../components/userInformation/PhoneNumber.tsx | 4 ++++ .../userInformation/phoneNumber/PhoneEditForm.tsx | 15 ++++++--------- src/features/profile/types/settingsType.ts | 3 +++ src/theme/color.type.ts | 4 ++++ src/theme/colors.ts | 4 ++++ src/theme/palette.ts | 2 ++ 13 files changed, 37 insertions(+), 20 deletions(-) diff --git a/.npmrc b/.npmrc index 538d79a..34e83bb 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ @rkheftan:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=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 \ No newline at end of file +//npm.pkg.github.com/:_authToken=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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e60d105..3171695 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.8/ceb42e35ecc6f5ec4ab312dba32c73d8175ab861", - "integrity": "sha512-taau98lOVAqd8Oc4SuP8l0Yo6qTTLH24HPWIs/MLAcaKQrVR0et5gZ+PdQswoUko6/019fe+4Wx9871AiulLLg==", + "version": "0.2.86", + "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.2.86/db9acf1a2c0b61cc5ccf04e6b4be31e51ca09815", + "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" } }, diff --git a/package.json b/package.json index 32132f3..816f93e 100644 --- a/package.json +++ b/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", diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 97a0663..f80413c 100644 --- a/public/locales/en/setting.json +++ b/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", diff --git a/src/components/Layout/ProductsMenu.tsx b/src/components/Layout/ProductsMenu.tsx index 299287a..cb9d650 100644 --- a/src/components/Layout/ProductsMenu.tsx +++ b/src/components/Layout/ProductsMenu.tsx @@ -55,7 +55,7 @@ export default function ProductsMenu({ {productsData.map((product) => ( = ({ 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', diff --git a/src/data/products.ts b/src/data/products.ts index e71cb90..cd82aee 100644 --- a/src/data/products.ts +++ b/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 ]; diff --git a/src/features/profile/components/userInformation/PhoneNumber.tsx b/src/features/profile/components/userInformation/PhoneNumber.tsx index c065c1b..ebb7d03 100644 --- a/src/features/profile/components/userInformation/PhoneNumber.tsx +++ b/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([]); const [countryCode, setCountryCode] = useState('+98'); const [phoneNumberError, setPhoneNumberError] = useState(); @@ -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} diff --git a/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx b/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx index 70f570d..56252a8 100644 --- a/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx +++ b/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(null); const inputRef = useRef(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({ )} - {/* buttonState === 'counting' && !isVerified && */} - {codeSent && !isSendingCode && !isVerified && ( + {isCodeSent && !isSendingCode && !isVerified && ( ; buttonState: 'default' | 'counting'; setButtonState: (v: 'default' | 'counting') => void; handleSendCode: () => void; diff --git a/src/theme/color.type.ts b/src/theme/color.type.ts index 1df6250..88e2179 100644 --- a/src/theme/color.type.ts +++ b/src/theme/color.type.ts @@ -47,4 +47,8 @@ export interface Palette { dark: PaletteColorOptions; light: PaletteColorOptions; }; + divider: { + dark: string; + light: string; + }; } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index abe739d..ab81341 100644 --- a/src/theme/colors.ts +++ b/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)', + }, }; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index c835ddb..2b638b6 100644 --- a/src/theme/palette.ts +++ b/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, };