diff --git a/public/locales/en/profileSetting.json b/public/locales/en/profileSetting.json index bb4b664..e8dc332 100644 --- a/public/locales/en/profileSetting.json +++ b/public/locales/en/profileSetting.json @@ -40,6 +40,7 @@ "notDetermined": "Not determined", "successfulChangePhone": "Phone number changed successfully", "phoneNumberIsInvalid": "Phone number is invalid", - "thisFieldIsRequired": "This field is requried" + "thisFieldIsRequired": "This field is required", + "changePicture": "Change picture" } } diff --git a/public/locales/fa/profileSetting.json b/public/locales/fa/profileSetting.json index c48cd73..1a591e7 100644 --- a/public/locales/fa/profileSetting.json +++ b/public/locales/fa/profileSetting.json @@ -40,6 +40,7 @@ "notDetermined": "تعیین نشده", "successfulChangePhone": "شماره تماس با موفقیت تغییر کرد", "phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد", - "thisFieldIsRequired": "این فیلد الزامی است" + "thisFieldIsRequired": "این فیلد الزامی است", + "changePicture": "تغییر تصویر" } } diff --git a/src/App.tsx b/src/App.tsx index 4fd2f1b..21371ee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import './App.css'; import { LanguageManager } from './components/LanguageManager'; import { Settings } from './features/profile/routes/SettingPage'; + function App() { return ( <> diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx index 798b25a..ad90026 100644 --- a/src/components/CardContainer.tsx +++ b/src/components/CardContainer.tsx @@ -1,19 +1,21 @@ import React from 'react'; import { Box, Typography } from '@mui/material'; +interface CardContainerProps { + title: string; + subtitle: string; + action?: React.ReactNode; + children?: React.ReactNode; + highlighted?: boolean; +} + export function CardContainer({ title, subtitle, action, children, highlighted, -}: { - title: string; - subtitle: string; - action?: React.ReactNode; - children?: React.ReactNode; - highlighted?: boolean; -}) { +}: CardContainerProps) { return ( - - - - - - {t('active.deletDevicesButton')} @@ -116,7 +109,11 @@ export function ActiveDevices() { order: { xs: 2, sm: 2 }, }} > - + {device.deviceModel} @@ -138,22 +135,22 @@ export function ActiveDevices() { sx={{ flexBasis: { xs: '100%', sm: 'auto' }, mb: { xs: 1, sm: 0 }, - textAlign: { xs: 'left', sm: 'center' }, minWidth: { sm: '138px' }, order: { xs: 4, sm: 4 }, + alignItems: 'center', + justifyContent: 'center', }} > {device.current && ( diff --git a/src/features/profile/components/security/PasswordSecurity.tsx b/src/features/profile/components/security/PasswordSecurity.tsx index cf908f6..f60e4c6 100644 --- a/src/features/profile/components/security/PasswordSecurity.tsx +++ b/src/features/profile/components/security/PasswordSecurity.tsx @@ -9,7 +9,6 @@ import { import { useTranslation } from 'react-i18next'; import { CardContainer } from '@/components/CardContainer'; import { PageWrapper } from '../PageWrapper'; -import Logo from '@/components/Logo'; import { PasswordDialog } from './PasswordDialog'; import { Toast } from '@/components/Toast'; @@ -66,10 +65,6 @@ export function PasswordSecurity() { return ( - - - - {changePassword @@ -121,7 +113,6 @@ export function PasswordSecurity() { )} - {/* New PasswordDialog component usage */} - - + {data.map((d) => ( v && setDraftLanguage(v.code); @@ -63,16 +62,10 @@ export function Setting() { sx={{ display: 'flex', flexDirection: 'column', - minHeight: '100vh', }} > - - - - @@ -103,16 +96,11 @@ export function Setting() { size="large" variant="outlined" sx={{ - textTransform: 'none', border: '1px solid', borderColor: 'primary.main', - borderRadius: '4px', - bgcolor: isEditing ? 'primary.main' : 'background.paper', + borderRadius: 1, + bgcolor: isEditing ? 'primary.main' : 'background.default', color: isEditing ? 'primary.contrastText' : 'primary.main', - px: { xs: 2, sm: '22px' }, - py: { xs: '6px', sm: '8px' }, - width: { xs: '100%', sm: isEditing ? '85px' : '93px' }, - fontSize: { xs: '0.9rem', sm: '1rem' }, }} > {isEditing @@ -130,7 +118,6 @@ export function Setting() { flexDirection: 'column', gap: 2, bgcolor: 'background.paper', - width: '100%', }} > diff --git a/src/features/profile/components/userInformation/PersonalInformation.tsx b/src/features/profile/components/userInformation/PersonalInformation.tsx index 829f620..3c9dc5d 100644 --- a/src/features/profile/components/userInformation/PersonalInformation.tsx +++ b/src/features/profile/components/userInformation/PersonalInformation.tsx @@ -1,74 +1,53 @@ -import { useState } from 'react'; -import { Box, Button, useTheme, useMediaQuery } from '@mui/material'; +import { useState, useEffect } from 'react'; +import { Box, Button } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { CardContainer } from '@/components/CardContainer'; -import { ProfileImage } from './personlInformation/ProfileImage'; -import { InfoRowDisplay } from './personlInformation/InfoRowDisplay'; -import { InfoRowEdit } from './personlInformation/InfoRowEdit'; -import Logo from '@/components/Logo'; +import { ProfileImage } from './personalInformation/ProfileImage'; +import { InfoRowDisplay } from './personalInformation/InfoRowDisplay'; +import { InfoRowEdit } from './personalInformation/InfoRowEdit'; import { PageWrapper } from '../PageWrapper'; +import { Gender, type InfoRowData } from '../../types'; export function PersonalInformation() { const { t } = useTranslation('profileSetting'); const [isEditing, setIsEditing] = useState(false); - const [gender, setGender] = useState(''); const [uploadedImageUrl, setUploadedImageUrl] = useState(null); - const theme = useTheme(); - const isMdUp = useMediaQuery(theme.breakpoints.up('lg')); - const initialData = { + const initialData: InfoRowData = { firstName: 'محمد حسین', lastName: 'برزه‌گر', country: 'قطر', - gender: 'مرد', nationalCode: '', + gender: Gender.None, }; - const [data, setData] = useState(initialData); + + const [data, setData] = useState(initialData); + const [gender, setGender] = useState(Gender.None); + + useEffect(() => { + if (Object.values(Gender).includes(data.gender)) { + setGender(data.gender); + } + }, [data.gender]); const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`; const toggleEdit = () => { - setIsEditing((prev) => !prev); if (isEditing) { setData((prev) => ({ ...prev, - gender: - gender === 'male' - ? t('settingForm.man') - : gender === 'female' - ? t('settingForm.woman') - : '', + gender: gender, })); } else { setGender( - data.gender === t('settingForm.man') - ? 'male' - : data.gender === t('settingForm.woman') - ? 'female' - : '', + Object.values(Gender).includes(data.gender) ? data.gender : Gender.None, ); } + setIsEditing(!isEditing); }; return ( - {isMdUp && ( - <> - - - - - - )} {t('settingForm.rejectButton')} @@ -95,16 +74,9 @@ export function PersonalInformation() { size="large" variant="outlined" sx={{ - textTransform: 'none', - border: '1px solid', - borderColor: 'primary.main', - borderRadius: '4px', - bgcolor: isEditing ? 'primary.main' : 'background.paper', + borderRadius: 1, + bgcolor: isEditing ? 'primary.main' : 'background.default', color: isEditing ? 'primary.contrastText' : 'primary.main', - px: { xs: 2, sm: '22px' }, - py: { xs: '6px', sm: '8px' }, - width: { xs: '100%', sm: isEditing ? '85px' : '93px' }, - fontSize: { xs: '0.9rem', sm: '1rem' }, }} > {isEditing @@ -116,7 +88,7 @@ export function PersonalInformation() { > { - const file = e.target.files?.[0]; - if (file) { - const reader = new FileReader(); - reader.onload = () => - setUploadedImageUrl(reader.result as string); - reader.readAsDataURL(file); - } + onImageChange={(file) => { + const reader = new FileReader(); + reader.onload = () => + setUploadedImageUrl(reader.result as string); + reader.readAsDataURL(file); }} + onRemoveImage={() => setUploadedImageUrl(null)} /> )} diff --git a/src/features/profile/components/userInformation/SocialMedia.tsx b/src/features/profile/components/userInformation/SocialMedia.tsx index a393023..636e909 100644 --- a/src/features/profile/components/userInformation/SocialMedia.tsx +++ b/src/features/profile/components/userInformation/SocialMedia.tsx @@ -29,7 +29,6 @@ export function SocialMedia() { const emailList = [ { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' }, { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' }, - { email: 'emailtemp@icloud.com', provider: 'apple', time: '1 ماه پیش' }, ] as const; return ( diff --git a/src/features/profile/components/userInformation/personlInformation/DisplayField.tsx b/src/features/profile/components/userInformation/personalInformation/DisplayField.tsx similarity index 75% rename from src/features/profile/components/userInformation/personlInformation/DisplayField.tsx rename to src/features/profile/components/userInformation/personalInformation/DisplayField.tsx index f6690fd..f74e331 100644 --- a/src/features/profile/components/userInformation/personlInformation/DisplayField.tsx +++ b/src/features/profile/components/userInformation/personalInformation/DisplayField.tsx @@ -1,18 +1,21 @@ import { Box, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; -export function DisplayField({ - label, - value, -}: { +interface DisplayFieldProps { label: string; value: string; -}) { +} + +export function DisplayField({ label, value }: DisplayFieldProps) { const { t } = useTranslation('profileSetting'); const displayValue = value?.trim() || t('settingForm.notDetermined'); return ( - + {label} diff --git a/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx b/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx new file mode 100644 index 0000000..7cbff85 --- /dev/null +++ b/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx @@ -0,0 +1,106 @@ +import { Box, Typography, Avatar } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { CountryFlag } from '@/components/CountryFlag'; +import { DisplayField } from './DisplayField'; +import { Gender } from '@/features/profile/types'; + +interface InfoRowData { + firstName: string; + lastName: string; + country: string; + gender: Gender | ''; + nationalCode: string; +} + +interface InfoRowDisplayProps { + data: InfoRowData; + uploadedImageUrl: string | null; + initials: string; +} + +export function InfoRowDisplay({ + data, + uploadedImageUrl, + initials, +}: InfoRowDisplayProps) { + const { t } = useTranslation('profileSetting'); + const displayValue = (value: string) => + value?.trim() || t('settingForm.notDetermined'); + const getGenderLabel = (gender: Gender | '') => { + switch (gender) { + case Gender.Male: + return t('settingForm.man'); + case Gender.Female: + return t('settingForm.woman'); + default: + return t('settingForm.notDetermined'); + } + }; + return ( + + + + + + {t('settingForm.name')} و {t('settingForm.familyName')} + + + + {initials} + + + {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`} + + + + + + + {t('settingForm.country')} + + + + + + + + + + + + ); +} diff --git a/src/features/profile/components/userInformation/personlInformation/InfoRowEdit.tsx b/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx similarity index 55% rename from src/features/profile/components/userInformation/personlInformation/InfoRowEdit.tsx rename to src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx index 5969583..f4887ca 100644 --- a/src/features/profile/components/userInformation/personlInformation/InfoRowEdit.tsx +++ b/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx @@ -8,29 +8,45 @@ import { } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { CountryFlag, countryCodeMap } from '@/components/CountryFlag'; +import { Gender } from '@/features/profile/types'; +import { type InfoRowData } from '@/features/profile/types'; -export function InfoRowEdit({ data, setData, gender, setGender }: any) { +interface InfoRowEditProps { + data: InfoRowData; + setData: React.Dispatch>; + gender: Gender; + setGender: React.Dispatch>; +} + +export function InfoRowEdit({ + data, + setData, + gender, + setGender, +}: InfoRowEditProps) { const { t } = useTranslation('profileSetting'); + const labels = [ + { + name: 'firstName' as keyof InfoRowData, + label: t('settingForm.name'), + value: data.firstName, + }, + { + name: 'lastName' as keyof InfoRowData, + label: t('settingForm.familyName'), + value: data.lastName, + }, + { + name: 'nationalCode' as keyof InfoRowData, + label: t('settingForm.nationalCode'), + value: data.nationalCode, + }, + ]; + return ( - - {[ - { - name: 'firstName', - label: t('settingForm.name'), - value: data.firstName, - }, - { - name: 'lastName', - label: t('settingForm.familyName'), - value: data.lastName, - }, - { - name: 'nationalCode', - label: t('settingForm.nationalCode'), - value: data.nationalCode, - }, - ].map((field, idx) => ( + + {labels.map((field, idx) => ( - setData((prev: any) => ({ + setData((prev) => ({ ...prev, [field.name]: e.target.value, })) @@ -54,24 +70,22 @@ export function InfoRowEdit({ data, setData, gender, setGender }: any) { @@ -81,7 +95,7 @@ export function InfoRowEdit({ data, setData, gender, setGender }: any) { options={Object.keys(countryCodeMap)} value={data.country} onChange={(_, newValue) => - setData((prev: any) => ({ ...prev, country: newValue || '' })) + setData((prev) => ({ ...prev, country: newValue || '' })) } renderOption={(props, option) => ( diff --git a/src/features/profile/components/userInformation/personalInformation/ProfileImage.tsx b/src/features/profile/components/userInformation/personalInformation/ProfileImage.tsx new file mode 100644 index 0000000..869196c --- /dev/null +++ b/src/features/profile/components/userInformation/personalInformation/ProfileImage.tsx @@ -0,0 +1,112 @@ +import React, { useState } from 'react'; +import { Box, Avatar, Typography, Button, IconButton } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { Camera, Trash } from 'iconsax-react'; +import { Icon } from '@rkheftan/harmony-ui'; + +const MAX_FILE_SIZE_MB = 10; + +interface ProfileImageProps { + initials: string; + uploadedImageUrl: string | null; + onImageChange: (file: File) => void; + onRemoveImage?: () => void; +} + +export function ProfileImage({ + initials, + uploadedImageUrl, + onImageChange, + onRemoveImage, +}: ProfileImageProps) { + const { t } = useTranslation('profileSetting'); + const [error, setError] = useState(null); + + const handleImageChange = (e: React.ChangeEvent) => { + setError(null); + const file = e.target.files?.[0]; + if (!file) return; + + const fileSizeMB = file.size / (1024 * 1024); + if (fileSizeMB > MAX_FILE_SIZE_MB) { + setError(t('settingForm.fileSizeError', { size: MAX_FILE_SIZE_MB })); + return; + } + + onImageChange(file); + }; + + return ( + + + {initials} + + + + {t('settingForm.profilePicture')} + + + {t('settingForm.allowedFormat')} + + {error && ( + + {error} + + )} + + + + {uploadedImageUrl && onRemoveImage && ( + + + + )} + + + + ); +} diff --git a/src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx b/src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx deleted file mode 100644 index d838f37..0000000 --- a/src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { Box, Typography, Avatar } from '@mui/material'; -import { useTranslation } from 'react-i18next'; -import { CountryFlag } from '@/components/CountryFlag'; -import { DisplayField } from './DisplayField'; - -export function InfoRowDisplay({ - data, - uploadedImageUrl, - initials, -}: { - data: any; - uploadedImageUrl: string | null; - initials: string; -}) { - const { t } = useTranslation('profileSetting'); - const displayValue = (value: string) => - value?.trim() || t('settingForm.notDetermined'); - - return ( - - - - - {t('settingForm.name')} و {t('settingForm.familyName')} - - - - {initials} - - - {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`} - - - - - - - {t('settingForm.country')} - - - - - - - - - - - ); -} diff --git a/src/features/profile/components/userInformation/personlInformation/ProfileImage.tsx b/src/features/profile/components/userInformation/personlInformation/ProfileImage.tsx deleted file mode 100644 index 3d848c8..0000000 --- a/src/features/profile/components/userInformation/personlInformation/ProfileImage.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Box, Avatar, Typography, Button } from '@mui/material'; -import { useTranslation } from 'react-i18next'; -import { Camera } from 'iconsax-react'; - -export function ProfileImage({ - initials, - uploadedImageUrl, - onImageChange, -}: { - initials: string; - uploadedImageUrl: string | null; - onImageChange: (e: React.ChangeEvent) => void; -}) { - const { t } = useTranslation('profileSetting'); - - return ( - - - {initials} - - - - {t('settingForm.profilePicture')} - - - {t('settingForm.allowedFormat')} - - - - - - - ); -} diff --git a/src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx b/src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx index 8329ebb..a20e577 100644 --- a/src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx +++ b/src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx @@ -1,14 +1,16 @@ import { Box, Button } from '@mui/material'; +interface PhoneActionButtonsProps { + isEditing: boolean; + toggleEdit: () => void; + t: (key: string) => string; +} + export default function PhoneActionButtons({ isEditing, toggleEdit, t, -}: { - isEditing: boolean; - toggleEdit: () => void; - t: (key: string) => string; -}) { +}: PhoneActionButtonsProps) { return ( {isEditing && ( @@ -19,7 +21,7 @@ export default function PhoneActionButtons({ sx={{ color: 'primary.main', textTransform: 'none', - width: '43px', + width: { xs: '100%', sm: 'auto' }, }} > {t('settingForm.rejectButton')} @@ -30,13 +32,9 @@ export default function PhoneActionButtons({ size="large" variant="outlined" sx={{ - textTransform: 'none', - border: '1px solid', - borderColor: 'primary.main', - borderRadius: '4px', - bgcolor: isEditing ? 'primary.main' : 'background.paper', + borderRadius: 1, + bgcolor: isEditing ? 'primary.main' : 'background.default', color: isEditing ? 'primary.contrastText' : 'primary.main', - width: { xs: '100%', sm: isEditing ? '85px' : '161px' }, whiteSpace: 'nowrap', }} > diff --git a/src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx b/src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx index a922ae4..72f5733 100644 --- a/src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx +++ b/src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx @@ -1,31 +1,55 @@ import { Box, Typography } from '@mui/material'; +import { Icon } from '@rkheftan/harmony-ui'; +import { Mobile } from 'iconsax-react'; -export default function PhoneDisplay({ - phones, -}: { +interface PhoneDisplayProps { phones: { phone: string; time: string }[]; -}) { +} + +export default function PhoneDisplay({ phones }: PhoneDisplayProps) { return ( - + <> {phones.map((item, index) => ( - - {item.phone} - - - {item.time} - + + + + + + + {item.phone} + + + {item.time} + + ))} - + ); } diff --git a/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx b/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx index 2dd7695..4875e71 100644 --- a/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx +++ b/src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx @@ -1,8 +1,41 @@ -import { Box, Typography, TextField, IconButton, Button } from '@mui/material'; -import { Edit, Refresh, TickCircle } from 'iconsax-react'; +import { + Box, + Typography, + TextField, + Button, + IconButton, + InputAdornment, + CircularProgress, +} from '@mui/material'; +import { Edit2, TickCircle } from 'iconsax-react'; import { CountDownTimer } from '@/components/CountDownTimer'; import { Toast } from '@/components/Toast'; import { CountryCodeSelector } from '../../CountryCodeSelector'; +import { Icon } from '@rkheftan/harmony-ui'; + +interface PhoneEditFormProps { + phoneNumber: string; + setPhoneNumber: (v: string) => void; + countryCode: string; + setCountryCode: (v: string) => void; + verificationCode: string; + setVerificationCode: (v: string) => void; + isVerified: boolean; + isVerifying: boolean; + buttonState: 'default' | 'counting'; + setButtonState: (v: 'default' | 'counting') => void; + handleSendCode: () => void; + handleVerifyClick: () => void; + error?: string; + inputError: boolean; + handleBlur: () => void; + textFieldRef: React.RefObject; + inputRef: React.RefObject; + phones: { phone: string; time: string; withCode: string }[]; + showToast: boolean; + setShowToast: (v: boolean) => void; + t: (key: string) => string; +} export default function PhoneEditForm({ phoneNumber, @@ -26,41 +59,34 @@ export default function PhoneEditForm({ showToast, setShowToast, t, -}: { - phoneNumber: string; - setPhoneNumber: (v: string) => void; - countryCode: string; - setCountryCode: (v: string) => void; - verificationCode: string; - setVerificationCode: (v: string) => void; - isVerified: boolean; - isVerifying: boolean; - buttonState: 'default' | 'counting'; - setButtonState: (v: 'default' | 'counting') => void; - handleSendCode: () => void; - handleVerifyClick: () => void; - error?: string; - inputError: boolean; - handleBlur: () => void; - textFieldRef: React.RefObject; - inputRef: React.RefObject; - phones: { phone: string; time: string; withCode: string }[]; - showToast: boolean; - setShowToast: (v: boolean) => void; - t: (key: string) => string; -}) { +}: PhoneEditFormProps) { + const isValidPhoneNumber = (phone: string) => { + const digitsOnly = phone.replace(/\D/g, ''); + return digitsOnly.length >= 8 && digitsOnly.length <= 15; + }; + return ( - - - {t('settingForm.editPhoneNumber')} - - {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)}) - {t('settingForm.verb')} - + <> + + + + {t('settingForm.editPhoneNumber')} + + + {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)}) + {t('settingForm.verb')} + + setPhoneNumber(e.target.value)} - sx={{ flex: '1 1 240px', minWidth: 0 }} + sx={{ flex: '1 1 220px', minWidth: 0 }} placeholder="09123456789" - inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }} InputProps={{ endAdornment: buttonState === 'counting' ? ( - { - setButtonState('default'); - setPhoneNumber(''); - }} - sx={{ mr: 1 }} - > - - - ) : null, - }} - slotProps={{ - htmlInput: { - dir: 'auto', - sx: { lineHeight: 1.5, paddingX: 0 }, - }, - input: { - endAdornment: ( + + { + setButtonState('default'); + setPhoneNumber(''); + setVerificationCode(''); + }} + edge="end" + > + + + + ) : ( ), - }, }} /> {isVerified ? ( - - - - {t('settingForm.successButton')} - + + + {t('settingForm.successButton')} ) : ( - - - - - {t('settingForm.or')} - - - - - - - - ); diff --git a/src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx b/src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx index 75c83de..443c5fc 100644 --- a/src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx +++ b/src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx @@ -1,16 +1,17 @@ import { Box, Typography, IconButton } from '@mui/material'; -import { Google, Apple, Sms, Trash } from 'iconsax-react'; +import { Google, Sms, Trash } from 'iconsax-react'; +import { Icon } from '@rkheftan/harmony-ui'; -export default function SocialMediaList({ - emailList, -}: { +interface SocialMediaListProps { t: (key: string) => string; emailList: readonly { email: string; provider: 'email' | 'google' | 'apple'; time: string; }[]; -}) { +} + +export default function SocialMediaList({ emailList }: SocialMediaListProps) { return ( {emailList.map((item, index) => ( @@ -33,15 +34,34 @@ export default function SocialMediaList({ minWidth: 0, }} > - {item.provider === 'google' && ( - - )} - {item.provider === 'apple' && ( - - )} - {item.provider === 'email' && ( - - )} + + {item.provider === 'google' && ( + + )} + {item.provider === 'email' && ( + + )} + @@ -53,8 +73,8 @@ export default function SocialMediaList({ - - + + ))} diff --git a/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx b/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx index 006550b..ed0f652 100644 --- a/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx +++ b/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx @@ -8,27 +8,35 @@ import { ListItemText, } from '@mui/material'; import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react'; +import { Icon } from '@rkheftan/harmony-ui'; + +interface SocialMediaMenuProps { + t: (key: string) => string; + onOpenDialog: () => void; +} export default function SocialMediaMenu({ t, onOpenDialog, -}: { - t: (key: string) => string; - onOpenDialog: () => void; -}) { +}: SocialMediaMenuProps) { const [anchor, setAnchor] = useState(null); const openMenu = Boolean(anchor); + const [open, setOpen] = useState(false); - const handleClickMenu = (e: React.MouseEvent) => + const handleClickMenu = (e: React.MouseEvent) => { + setOpen(true); setAnchor(e.currentTarget); - const handleCloseMenu = () => setAnchor(null); + }; + const handleCloseMenu = () => { + setOpen(false); + setAnchor(null); + }; return ( @@ -38,40 +46,28 @@ export default function SocialMediaMenu({ flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'stretch', sm: 'flex-start' }, gap: 1, - width: '100%', }} > @@ -81,7 +77,7 @@ export default function SocialMediaMenu({ onClose={handleCloseMenu} PaperProps={{ sx: { - minWidth: 240, + minWidth: 187, maxWidth: '90vw', }, }} @@ -95,19 +91,19 @@ export default function SocialMediaMenu({ }} > - + {t('settingForm.email')} - + {t('settingForm.google')} - + {t('settingForm.apple')} diff --git a/src/features/profile/types.ts b/src/features/profile/types.ts new file mode 100644 index 0000000..66caa4f --- /dev/null +++ b/src/features/profile/types.ts @@ -0,0 +1,13 @@ +export enum Gender { + Male = 'male', + Female = 'female', + None = '', +} + +export interface InfoRowData { + firstName: string; + lastName: string; + nationalCode: string; + country: string; + gender: Gender; +} diff --git a/src/providers/CustomThemeProvider.tsx b/src/providers/CustomThemeProvider.tsx index 29df78d..0b19f41 100644 --- a/src/providers/CustomThemeProvider.tsx +++ b/src/providers/CustomThemeProvider.tsx @@ -27,6 +27,15 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({ }, spacing: 8, typography: typography, + components: { + MuiButton: { + defaultProps: { + sx: { + textTransform: 'none', + }, + }, + }, + }, }); }, [i18n]);