feat: redesign profile card (form), input

TomatoVan · Apr 23, 2024 · 808b8d4 · 808b8d4
1 parent a8969f5
commit 808b8d4
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 121 deletions.
diff --git a/extractedTranslations/en/profile.json b/extractedTranslations/en/profile.json
@@ -1,21 +1,30 @@
 {
-    "": "",
-    "Edit": "",
-    "Error": "",
-    "Error with getting profile data": "",
-    "Error with profile ": "",
-    "Incorrect age": "",
-    "Incorrect country": "",
-    "Incorrect user data": "",
-    "No data": "",
-    "Profile": "",
-    "Server error": "",
-    "Try to reload page": "",
-    "Your age": "",
-    "Your avatar": "",
-    "Your city": "",
-    "Your lastname": "",
-    "Your name": "",
-    "Your surname": "",
-    "Your username": ""
+  "": "",
+  "Age": "",
+  "Avatar": "",
+  "City": "",
+  "Edit": "",
+  "Error": "",
+  "Error with getting profile data": "",
+  "Error with profile ": "",
+  "Incorrect age": "",
+  "Incorrect country": "",
+  "Incorrect user data": "",
+  "Lastname": "",
+  "Name": "",
+  "No data": "",
+  "Profile": "",
+  "Server error": "",
+  "Try to reload page": "",
+  "Username": "",
+  "Username>": "",
+  "Your age": "",
+  "Your avatar": "",
+  "Your city": "",
+  "Your lastname": "",
+  "Your name": "",
+  "Your surname": "",
+  "Your username": "",
+  "Попробуйте обновить страницу": "",
+  "Произошла ошибка при загрузке профиля": ""
 }
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -9,6 +9,7 @@
   "Ascending": "",
   "Back to list": "",
   "Cancel": "",
+  "Choose ": "",
   "Choose country": "",
   "Choose currency": "",
   "Comments": "",
@@ -93,7 +94,9 @@
   "Отправить": "",
   "Оценка статей скоро появится!": "",
   "Поиск": "",
+  "Попробуйте обновить страницу": "",
   "Произошла непредвиденная ошибка": "",
+  "Произошла ошибка при загрузке профиля": "",
   "Сортировать ПО": "",
   "Статьи не найдены": "",
   "Экономика": "",

diff --git a/src/entities/Country/ui/CountrySelect/CountrySelect.tsx b/src/entities/Country/ui/CountrySelect/CountrySelect.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
-import { ListBox } from '@/shared/ui/deprecated/Popups';
+import { ListBox } from '@/shared/ui/redesigned/Popups';
 import { Country } from '../../model/types/country';
 
 interface CountrySelectProps {

diff --git a/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx b/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
-import { ListBox } from '@/shared/ui/deprecated/Popups';
+import { ListBox } from '@/shared/ui/redesigned/Popups';
 import { Currency } from '../../model/types/currency';
 
 interface CurrencySelectProps {

diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx
@@ -1,14 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
-import { Avatar } from '@/shared/ui/deprecated/Avatar';
-import { Text, TextAlign, TextTheme } from '@/shared/ui/deprecated/Text';
-import { classNames, Mods } from '@/shared/lib/classNames/classNames';
+
+import { classNames } from '@/shared/lib/classNames/classNames';
 import { Country, CountrySelect } from '../../../Country';
 import { Currency, CurrencySelect } from '../../../Currency';
 import { Profile } from '../../model/types/profile';
 import cls from './ProfileCard.module.scss';
-import { Loader } from '@/shared/ui/deprecated/Loader';
-import { Input } from '@/shared/ui/deprecated/Input';
+import { Input } from '@/shared/ui/redesigned/Input';
+import { Card } from '@/shared/ui/redesigned/Card';
+import { Avatar } from '@/shared/ui/redesigned/Avatar';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 
 interface ProfileCardProps {
     className?: string;
@@ -47,110 +49,123 @@ export const ProfileCard = (props: ProfileCardProps) => {
 
     if (isLoading) {
         return (
-            <HStack
-                justify="center"
-                max
-                className={classNames(cls.ProfileCard, {}, [
-                    className,
-                    cls.loading,
-                ])}
-            >
-                <Loader />
-            </HStack>
+            <Card padding="24" max>
+                <VStack gap="32">
+                    <HStack max justify="center">
+                        <Skeleton border="100%" width={128} height={128} />
+                    </HStack>
+                    <HStack gap="32" max>
+                        <VStack gap="16" max>
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                        </VStack>
+
+                        <VStack gap="16" max>
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                            <Skeleton width="100%" height={38} />
+                        </VStack>
+                    </HStack>
+                </VStack>
+            </Card>
         );
     }
 
     if (error) {
         return (
-            <HStack
-                justify="center"
-                max
-                className={classNames(cls.ProfileCard, {}, [
-                    className,
-                    cls.error,
-                ])}
-            >
+            <HStack justify="center" max>
                 <Text
-                    theme={TextTheme.ERROR}
+                    variant="error"
                     title={t('Error with getting profile data')}
                     text={t('Try to reload page')}
-                    align={TextAlign.CENTER}
+                    align="center"
                 />
             </HStack>
         );
     }
 
-    const mods: Mods = {
-        [cls.editing]: !readonly,
-    };
-
     return (
-        <VStack
+        <Card
+            padding="24"
             max
-            gap="16"
-            className={classNames(cls.ProfileCard, mods, [className])}
+            className={classNames(cls.ProfileCardRedesigned, {}, [className])}
         >
-            {data?.avatar && (
-                <HStack justify="center" className={cls.avatarWrapper}>
-                    <Avatar src={data?.avatar} alt="avatar img" />
+            <VStack gap="32" align="center">
+                {data?.avatar && (
+                    <HStack justify="center" className={cls.avatarWrapper}>
+                        <Avatar
+                            size={128}
+                            src={data?.avatar}
+                            alt="avatar img"
+                        />
+                    </HStack>
+                )}
+                <HStack gap="24" max>
+                    <VStack gap="16" max>
+                        <Input
+                            value={data?.first}
+                            label={`${t('Name')}:`}
+                            className={cls.input}
+                            onChange={onChangeFirstName}
+                            readonly={readonly}
+                            data-testid="ProfileCard.firstname"
+                        />
+                        <Input
+                            value={data?.lastname}
+                            label={`${t('Lastname')}:`}
+                            className={cls.input}
+                            onChange={onChangeLastName}
+                            readonly={readonly}
+                            data-testid="ProfileCard.lastname"
+                        />
+                        <Input
+                            value={data?.age}
+                            label={`${t('Age')}:`}
+                            className={cls.input}
+                            onChange={onChangeAge}
+                            readonly={readonly}
+                        />
+                        <Input
+                            value={data?.city}
+                            label={`${t('City')}:`}
+                            className={cls.input}
+                            onChange={onChangeCity}
+                            readonly={readonly}
+                        />
+                    </VStack>
+                    <VStack gap="16" max>
+                        <Input
+                            value={data?.avatar}
+                            label={`${t('Avatar')}:`}
+                            className={cls.input}
+                            onChange={onChangeAvatar}
+                            readonly={readonly}
+                        />
+                        <Input
+                            value={data?.username}
+                            label={`${t('Username')}:`}
+                            className={cls.input}
+                            onChange={onChangeUsername}
+                            readonly={readonly}
+                        />
+                        <CurrencySelect
+                            className={cls.input}
+                            value={data?.currency}
+                            onChange={onChangeCurrency}
+                            readonly={readonly}
+                        />
+                        <CountrySelect
+                            className={cls.input}
+                            value={data?.country}
+                            onChange={onChangeCountry}
+                            readonly={readonly}
+                        />
+                    </VStack>
                 </HStack>
-            )}
-            <Input
-                value={data?.first}
-                placeholder={t('Your name')}
-                className={cls.input}
-                onChange={onChangeFirstName}
-                readonly={readonly}
-                data-testid="ProfileCard.firstname"
-            />
-            <Input
-                value={data?.lastname}
-                placeholder={t('Your lastname')}
-                className={cls.input}
-                onChange={onChangeLastName}
-                readonly={readonly}
-                data-testid="ProfileCard.lastname"
-            />
-            <Input
-                value={data?.age}
-                placeholder={t('Your age')}
-                className={cls.input}
-                onChange={onChangeAge}
-                readonly={readonly}
-            />
-            <Input
-                value={data?.city}
-                placeholder={t('Your city')}
-                className={cls.input}
-                onChange={onChangeCity}
-                readonly={readonly}
-            />
-            <Input
-                value={data?.avatar}
-                placeholder={t('Your avatar')}
-                className={cls.input}
-                onChange={onChangeAvatar}
-                readonly={readonly}
-            />
-            <Input
-                value={data?.username}
-                placeholder={t('Your username')}
-                className={cls.input}
-                onChange={onChangeUsername}
-                readonly={readonly}
-            />
-            <CurrencySelect
-                className={cls.input}
-                value={data?.currency}
-                onChange={onChangeCurrency}
-                readonly={readonly}
-            />
-            <CountrySelect
-                className={cls.input}
-                value={data?.country}
-                onChange={onChangeCountry}
-                readonly={readonly}
-            />
-        </VStack>
+            </VStack>
+        </Card>
     );
 };
diff --git a/src/shared/ui/redesigned/Button/Button.module.scss b/src/shared/ui/redesigned/Button/Button.module.scss
@@ -74,8 +74,9 @@
     font: var(--font-xl-redesigned);
 }
 
-.disabled {
+.isDisabled {
     opacity: 0.5;
+    pointer-events: none;
 }
 
 .fullWidth {

diff --git a/src/shared/ui/redesigned/Input/Input.module.scss b/src/shared/ui/redesigned/Input/Input.module.scss
@@ -8,6 +8,18 @@
     width: 100%;
 }
 
+.s {
+    height: 32px;
+}
+
+.m {
+    height: 38px;
+}
+
+.l {
+    height: 44px;
+}
+
 .addonLeft,
 .addonRight {
     display: flex;