feat: redesign modals

sashtje · Oct 16, 2023 · 7b29f6b · 7b29f6b
1 parent 3c1a49a
commit 7b29f6b
Show file tree

Hide file tree

Showing 13 changed files with 266 additions and 99 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -67,6 +67,7 @@ module.exports = {
           'variant',
           'size',
           'wrap',
+          'color',
         ],
       },
     ],

diff --git a/.loki/reference/chrome_iphone7_features_EditableProfileCard_Normal.png b/.loki/reference/chrome_iphone7_features_EditableProfileCard_Normal.png
diff --git a/.loki/reference/chrome_laptop_features_EditableProfileCard_Normal.png b/.loki/reference/chrome_laptop_features_EditableProfileCard_Normal.png
diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx
@@ -49,7 +49,12 @@ export const ProfileCard = (props: ProfileCardProps) => {
 
   if (isLoading) {
     return (
-      <Card className={classNames(cls.profileCard, {}, [className])} fullwidth padding="24">
+      <Card
+        className={classNames(cls.profileCard, {}, [className])}
+        fullwidth
+        padding="24"
+        borderRadius="partial"
+      >
         <VStack gap="32" max>
           <HStack justify="center" max>
             <Skeleton width={120} height={120} borderRadius="50%" />
@@ -77,23 +82,35 @@ export const ProfileCard = (props: ProfileCardProps) => {
 
   if (error) {
     return (
-      <HStack
-        className={classNames(cls.profileCard, {}, [className, cls.error])}
-        justify="center"
-        max
+      <Card
+        className={classNames(cls.profileCard, {}, [className])}
+        fullwidth
+        padding="24"
+        borderRadius="partial"
       >
-        <Text
-          variant="error"
-          title={t('Произошла ошибка при загрузке профиля')}
-          text={t('Попробуйте обновить страницу')}
-          align="center"
-        />
-      </HStack>
+        <HStack
+          className={classNames(cls.profileCard, {}, [className, cls.error])}
+          justify="center"
+          max
+        >
+          <Text
+            variant="error"
+            title={t('Произошла ошибка при загрузке профиля')}
+            text={t('Попробуйте обновить страницу')}
+            align="center"
+          />
+        </HStack>
+      </Card>
     );
   }
 
   return (
-    <Card className={classNames(cls.profileCard, {}, [className])} fullwidth padding="24">
+    <Card
+      className={classNames(cls.profileCard, {}, [className])}
+      fullwidth
+      padding="24"
+      borderRadius="partial"
+    >
       <VStack gap="32">
         <HStack justify="center" max>
           <Avatar src={data?.avatar} alt={t('Аватар')} size={120} />

diff --git a/src/features/authByUsername/ui/LoginForm/LoginForm.tsx b/src/features/authByUsername/ui/LoginForm/LoginForm.tsx
@@ -3,15 +3,20 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { classNames } from '@/shared/lib/classNames';
-import { Input } from '@/shared/ui/deprecated/Input';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Text, TextTheme } from '@/shared/ui/deprecated/Text';
+import { Input as InputDeprecated } from '@/shared/ui/deprecated/Input';
+import { Input } from '@/shared/ui/redesigned/Input';
+import { Button as ButtonDeprecated, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { Text as TextDeprecated, TextTheme } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import {
   DynamicModuleLoader,
   ReducersList,
 } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
 import { useTheme } from '@/shared/lib/hooks/useTheme/useTheme';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 
 import { getLoginUsername } from '../../model/selectors/getLoginUsername/getLoginUsername';
 import { getLoginPassword } from '../../model/selectors/getLoginPassword/getLoginPassword';
@@ -70,37 +75,72 @@ export const LoginForm = memo((props: LoginFormProps) => {
 
   return (
     <DynamicModuleLoader reducers={initialReducers} removeAfterUnmount>
-      <div className={classNames(cls.loginForm, {}, [className])}>
-        <Text title={t('Форма авторизации')} />
-
-        {error && <Text text={t('Неверный логин или пароль')} theme={TextTheme.ERROR} />}
-
-        <Input
-          autofocus
-          type="text"
-          placeholder={t('Введите username')}
-          className={cls.input}
-          value={username}
-          onChange={onChangeUsername}
-        />
-
-        <Input
-          type="text"
-          placeholder={t('Введите пароль')}
-          className={cls.input}
-          value={password}
-          onChange={onChangePassword}
-        />
-
-        <Button
-          theme={ButtonTheme.OUTLINE}
-          className={cls.loginBtn}
-          onClick={onLoginClick}
-          disabled={isLoading}
-        >
-          {t('Войти')}
-        </Button>
-      </div>
+      <ToggleFeatures
+        feature="isAppRedesigned"
+        on={
+          <VStack gap="16" className={classNames(cls.loginForm, {}, [className])}>
+            <Text title={t('Форма авторизации')} />
+
+            {error && <Text text={t('Неверный логин или пароль')} variant="error" />}
+
+            <Input
+              autofocus
+              type="text"
+              placeholder={t('Введите username')}
+              className={cls.input}
+              value={username}
+              onChange={onChangeUsername}
+            />
+
+            <Input
+              type="text"
+              placeholder={t('Введите пароль')}
+              className={cls.input}
+              value={password}
+              onChange={onChangePassword}
+            />
+
+            <Button className={cls.loginBtn} onClick={onLoginClick} disabled={isLoading}>
+              {t('Войти')}
+            </Button>
+          </VStack>
+        }
+        off={
+          <div className={classNames(cls.loginForm, {}, [className])}>
+            <TextDeprecated title={t('Форма авторизации')} />
+
+            {error && (
+              <TextDeprecated text={t('Неверный логин или пароль')} theme={TextTheme.ERROR} />
+            )}
+
+            <InputDeprecated
+              autofocus
+              type="text"
+              placeholder={t('Введите username')}
+              className={cls.input}
+              value={username}
+              onChange={onChangeUsername}
+            />
+
+            <InputDeprecated
+              type="text"
+              placeholder={t('Введите пароль')}
+              className={cls.input}
+              value={password}
+              onChange={onChangePassword}
+            />
+
+            <ButtonDeprecated
+              theme={ButtonTheme.OUTLINE}
+              className={cls.loginBtn}
+              onClick={onLoginClick}
+              disabled={isLoading}
+            >
+              {t('Войти')}
+            </ButtonDeprecated>
+          </div>
+        }
+      />
     </DynamicModuleLoader>
   );
 });
diff --git a/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx b/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx
@@ -7,14 +7,16 @@ import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect';
 import { Currency } from '@/entities/Currency';
 import { Country } from '@/entities/Country';
-import { Text, TextTheme } from '@/shared/ui/deprecated/Text';
+import { Text as TextDeprecated, TextTheme } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { ProfileCardFactory } from '@/entities/Profile';
 import {
   DynamicModuleLoader,
   ReducersList,
 } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
 import { VStack } from '@/shared/ui/redesigned/Stack';
 import { AppRoutes } from '@/shared/const/router';
+import { ToggleFeatures } from '@/shared/lib/features';
 
 import { ValidateProfileError } from '../../model/consts/consts';
 import { EditableProfileCardHeader } from '../EditableProfileCardHeader/EditableProfileCardHeader';
@@ -126,16 +128,29 @@ export const EditableProfileCard = memo((props: EditableProfileCardProps) => {
 
   return (
     <DynamicModuleLoader reducers={reducers} removeAfterUnmount>
-      <VStack gap="8" max className={classNames('', {}, [className])}>
+      <VStack gap="24" max className={classNames('', {}, [className])}>
         <EditableProfileCardHeader />
 
         {!!validateErrors?.length &&
           validateErrors.map((err) => (
-            <Text
-              key={err}
-              theme={TextTheme.ERROR}
-              text={validateErrorTranslates[err]}
-              data-testid="EditableProfileCard.Error"
+            <ToggleFeatures
+              feature="isAppRedesigned"
+              on={
+                <Text
+                  key={err}
+                  variant="error"
+                  text={validateErrorTranslates[err]}
+                  data-testid="EditableProfileCard.Error"
+                />
+              }
+              off={
+                <TextDeprecated
+                  key={err}
+                  theme={TextTheme.ERROR}
+                  text={validateErrorTranslates[err]}
+                  data-testid="EditableProfileCard.Error"
+                />
+              }
             />
           ))}
 

diff --git a/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx b/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx
@@ -6,9 +6,13 @@ import { classNames } from '@/shared/lib/classNames';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
 import { getUserAuthData } from '@/entities/User';
 import { HStack } from '@/shared/ui/redesigned/Stack';
-import { Text } from '@/shared/ui/deprecated/Text';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Text as TextDeprecated } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Button as ButtonDeprecated, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button } from '@/shared/ui/redesigned/Button';
 import { AppRoutes } from '@/shared/const/router';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 import { profileActions } from '../../model/slice/profileSlice';
 import { updateProfileData } from '../../model/services/updateProfileData/updateProfileData';
@@ -42,38 +46,75 @@ export const EditableProfileCardHeader = memo((props: EditableProfileCardHeaderP
   }, [dispatch]);
 
   return (
-    <HStack className={classNames('', {}, [className])} justify="between" max>
-      <Text title={t('Профиль')} />
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <Card borderRadius="partial" padding="24" fullwidth>
+          <HStack className={classNames('', {}, [className])} justify="between" max>
+            <Text title={t('Профиль')} />
 
-      {canEdit &&
-        (readonly ? (
-          <Button
-            theme={ButtonTheme.OUTLINE}
-            onClick={onEdit}
-            data-testid="EditableProfileCardHeader.EditButton"
-          >
-            {t('Редактировать')}
-          </Button>
-        ) : (
-          <HStack gap="8">
-            <Button
-              theme={ButtonTheme.OUTLINE_RED}
-              onClick={onCancelEdit}
-              data-testid="EditableProfileCardHeader.CancelButton"
-            >
-              {t('Отменить')}
-            </Button>
+            {canEdit &&
+              (readonly ? (
+                <Button onClick={onEdit} data-testid="EditableProfileCardHeader.EditButton">
+                  {t('Редактировать')}
+                </Button>
+              ) : (
+                <HStack gap="8">
+                  <Button
+                    onClick={onCancelEdit}
+                    color="error"
+                    data-testid="EditableProfileCardHeader.CancelButton"
+                  >
+                    {t('Отменить')}
+                  </Button>
 
-            <Button
-              theme={ButtonTheme.OUTLINE}
-              onClick={onSave}
-              data-testid="EditableProfileCardHeader.SaveButton"
-            >
-              {t('Сохранить')}
-            </Button>
+                  <Button
+                    onClick={onSave}
+                    color="success"
+                    data-testid="EditableProfileCardHeader.SaveButton"
+                  >
+                    {t('Сохранить')}
+                  </Button>
+                </HStack>
+              ))}
           </HStack>
-        ))}
-    </HStack>
+        </Card>
+      }
+      off={
+        <HStack className={classNames('', {}, [className])} justify="between" max>
+          <TextDeprecated title={t('Профиль')} />
+
+          {canEdit &&
+            (readonly ? (
+              <ButtonDeprecated
+                theme={ButtonTheme.OUTLINE}
+                onClick={onEdit}
+                data-testid="EditableProfileCardHeader.EditButton"
+              >
+                {t('Редактировать')}
+              </ButtonDeprecated>
+            ) : (
+              <HStack gap="8">
+                <ButtonDeprecated
+                  theme={ButtonTheme.OUTLINE_RED}
+                  onClick={onCancelEdit}
+                  data-testid="EditableProfileCardHeader.CancelButton"
+                >
+                  {t('Отменить')}
+                </ButtonDeprecated>
+
+                <ButtonDeprecated
+                  theme={ButtonTheme.OUTLINE}
+                  onClick={onSave}
+                  data-testid="EditableProfileCardHeader.SaveButton"
+                >
+                  {t('Сохранить')}
+                </ButtonDeprecated>
+              </HStack>
+            ))}
+        </HStack>
+      }
+    />
   );
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,7 @@ module.exports = { @@
               'variant',
               'size',
               'wrap',
+              'color',
             ],
           },
         ],
@@ Expand Down @@