From a3a9a18f46b9c89aef3108c05414091a85aacb3c Mon Sep 17 00:00:00 2001 From: Nothingg Date: Mon, 30 Oct 2023 17:16:05 -0500 Subject: [PATCH] Redesign login form, Profile card header --- json-server/db.json | 2 +- .../ui/LoginForm/LoginForm.module.scss | 2 +- .../AuthByUserName/ui/LoginForm/LoginForm.tsx | 112 +++++++++++++----- .../EditableProfileCard.tsx | 3 +- .../EditableProfileCardHeader.tsx | 87 +++++++++++--- .../ui/redesigned/Button/Button.module.scss | 19 +-- src/shared/ui/redesigned/Button/Button.tsx | 6 +- 7 files changed, 168 insertions(+), 63 deletions(-) diff --git a/json-server/db.json b/json-server/db.json index bdb9229..dcdf93c 100644 --- a/json-server/db.json +++ b/json-server/db.json @@ -1209,7 +1209,7 @@ "isAppRedesigned": true }, "jsonSettings": { - "theme": "app_sand_theme", + "theme": "app_light_theme", "isArticlesPageWasOpenedOnce": true }, "avatar": "https://source.boringavatars.com/pixel/120/Stefan?colors=26a653,2a1d8f,79646a" diff --git a/src/features/AuthByUserName/ui/LoginForm/LoginForm.module.scss b/src/features/AuthByUserName/ui/LoginForm/LoginForm.module.scss index 4ad9841..3b30bd2 100644 --- a/src/features/AuthByUserName/ui/LoginForm/LoginForm.module.scss +++ b/src/features/AuthByUserName/ui/LoginForm/LoginForm.module.scss @@ -1,8 +1,8 @@ .LoginForm { + width: 500px; display: flex; flex-direction: column; gap: 10px; - width: 400px; } .loginBtn { diff --git a/src/features/AuthByUserName/ui/LoginForm/LoginForm.tsx b/src/features/AuthByUserName/ui/LoginForm/LoginForm.tsx index 87e7709..98eafa8 100644 --- a/src/features/AuthByUserName/ui/LoginForm/LoginForm.tsx +++ b/src/features/AuthByUserName/ui/LoginForm/LoginForm.tsx @@ -1,13 +1,18 @@ import { FC, memo, useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Input } from '@/shared/ui/deprecated/Input'; -import { Text, TextTheme } from '@/shared/ui/deprecated/Text'; +import { useAppTranslation } from '@/shared/lib/hooks/useAppTranslation'; +import { Input as InputDeprecated } from '@/shared/ui/deprecated/Input'; +import { Text as TextDeprecated, TextTheme as TextThemeDeprecated } from '@/shared/ui/deprecated/Text'; +import { Button as ButtonDeprecated, ButtonTheme as ButtonThemeDeprecated } from '@/shared/ui/deprecated/Button'; import { VStack } from '@/shared/ui/redesigned/Stack'; -import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button'; +import { Text } from '@/shared/ui/redesigned/Text'; +import { Input } from '@/shared/ui/redesigned/Input'; +import { Button } from '@/shared/ui/redesigned/Button'; import { classNames } from '@/shared/lib/classNames/classNames'; import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch'; import { useAppSelector } from '@/shared/lib/hooks/useAppSelector'; import { DynamicModuleWrapper, ReducersList } from '@/shared/lib/components/DynamicModuleWrapper'; +import { ToggleFeatures } from '@/shared/lib/features'; + import { loginActions, loginReducer } from '../../model/slices/loginSlice'; import { getLoginState } from '../../model/selectors/getLoginState/getLoginState'; import { loginByUsername } from '../../model/services/loginByUsername/loginByUsername'; @@ -23,7 +28,7 @@ const initialReducers: ReducersList = { }; const LoginForm: FC = memo(({ className, onSuccess }) => { - const { t } = useTranslation('navbar'); + const { t } = useAppTranslation('navbar'); const { username, password, isLoading, error } = useAppSelector(getLoginState); const dispatch = useAppDispatch(); @@ -39,39 +44,82 @@ const LoginForm: FC = memo(({ className, onSuccess }) => { const result = await dispatch(loginByUsername({ username, password })); if (result.meta.requestStatus === 'fulfilled') { - // dispatch(initAuthData()); onSuccess(); } }, [dispatch, username, password, onSuccess]); + /** + * @deprecated + */ + const LoginFormDeprecated = ( + + + {error && ( + + )} + + + + {t('login')} + + + ); + + const LoginFormRedesigned = ( + + + {error && } + + + + + ); + return ( - - - {error && } - - - - + ); }); diff --git a/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx b/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx index 06280f2..9e9ac18 100644 --- a/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx +++ b/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { FC, useCallback } from 'react'; import { useForm } from 'react-hook-form'; import { DynamicModuleWrapper, ReducersList } from '@/shared/lib/components/DynamicModuleWrapper'; @@ -63,7 +62,7 @@ export const EditableProfileCard: FC = ({ className, i return ( - + = memo((props) => { - const { t } = useTranslation('profile'); + const { t } = useAppTranslation('profile'); const { className, getValues, reset, isValid, profileData, readonly } = props; const { updateProfile, setReadonly, cancelEdit } = useProfileActions(); @@ -46,39 +51,89 @@ export const EditableProfileCardHeader: FC = mem dispatch(updateProfileData()); }, [dispatch, getValues, setReadonly, updateProfile]); - return ( - - + /** + * @deprecated + */ + const EditableProfileCardHeaderDeprecated = ( + <> + {canEdit && (readonly ? ( - + ) : ( - - + ) )} + + ); + + const EditableProfileCardHeaderRedesigned = ( + + + + {canEdit && (readonly + ? ( + + ) + : ( + + + + + ) + )} + + + ); + + return ( + + ); }); diff --git a/src/shared/ui/redesigned/Button/Button.module.scss b/src/shared/ui/redesigned/Button/Button.module.scss index 72c470f..121d0f8 100644 --- a/src/shared/ui/redesigned/Button/Button.module.scss +++ b/src/shared/ui/redesigned/Button/Button.module.scss @@ -28,22 +28,25 @@ } .outlined { - border: 2px solid var(--icon); background: transparent; outline: none; border-radius: 32px; + &.normal { + border: 2px solid var(--icon); + } + &:hover { border: 2px solid var(--accent) !important; } -} -.success { - border: 2px solid var(--save) !important; -} - -.cancel { - border: 2px solid var(--cancel) !important; + &.success { + border: 2px solid var(--save); + } + + &.cancel { + border: 2px solid var(--cancel); + } } .addon-left, .addon-right { diff --git a/src/shared/ui/redesigned/Button/Button.tsx b/src/shared/ui/redesigned/Button/Button.tsx index 795ee42..4fddb09 100644 --- a/src/shared/ui/redesigned/Button/Button.tsx +++ b/src/shared/ui/redesigned/Button/Button.tsx @@ -5,7 +5,7 @@ import { classNames, Mods } from '@/shared/lib/classNames/classNames'; import cls from './Button.module.scss'; export type ButtonVariant = 'clear' | 'outlined' | 'contained'; -export type ButtonColor = 'success' | 'cancel'; +export type ButtonColor = 'success' | 'cancel' | 'normal'; export type ButtonSize = 's' | 'm' | 'l'; interface ButtonProps extends ButtonHTMLAttributes { @@ -31,7 +31,7 @@ export const Button: FC = memo(forwardRef = memo(forwardRef {addonLeft && {addonLeft}} {children}