feat: redesign modals, login and profile btn, add btn colors variants

TomatoVan · Apr 26, 2024 · 431ccef · 431ccef
1 parent c56a8c0
commit 431ccef
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 95 deletions.
diff --git a/extractedTranslations/en/profile.json b/extractedTranslations/en/profile.json
@@ -1,30 +1,30 @@
 {
-    "": "",
-    "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": "",
-    "Попробуйте обновить страницу": "",
-    "Произошла ошибка при загрузке профиля": ""
+  "": "",
+  "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/json-server/db.json b/json-server/db.json
@@ -762,7 +762,7 @@
       },
       "avatar": "https://mobimg.b-cdn.net/v3/fetch/22/2207633df03a819cd72889249c8361a8.jpeg?w=1470&r=0.5625",
       "jsonSettings": {
-        "theme": "app_dark_theme",
+        "theme": "app_light_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true
@@ -817,7 +817,7 @@
   "profile": [
     {
       "id": "1",
-      "first": "timurasdasd",
+      "first": "leotestt",
       "lastname": "ulbi",
       "age": 465,
       "currency": "RUB",

diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx b/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx
@@ -105,7 +105,7 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
                 cls[view],
             ])}
         >
-            <Card className={cls.card} border="round" padding="0">
+            <Card className={cls.card} border="partial" padding="0">
                 <AppImage
                     alt={article.title}
                     src={article.img}

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -47,7 +47,7 @@ export const CommentCard = memo(
         }
 
         return (
-            <Card padding="24" max>
+            <Card border="partial" padding="24" max>
                 <VStack
                     data-testid="CommentCard.Content"
                     max

diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx
@@ -49,7 +49,7 @@ export const ProfileCard = (props: ProfileCardProps) => {
 
     if (isLoading) {
         return (
-            <Card padding="24" max>
+            <Card border="partial" padding="24" max>
                 <VStack gap="32">
                     <HStack max justify="center">
                         <Skeleton border="100%" width={128} height={128} />
@@ -89,6 +89,7 @@ export const ProfileCard = (props: ProfileCardProps) => {
 
     return (
         <Card
+            border="partial"
             padding="24"
             max
             className={classNames(cls.ProfileCardRedesigned, {}, [className])}

diff --git a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx
@@ -38,7 +38,7 @@ export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => {
             className={classNames(cls.ArticleViewSelectorRedesigned, {}, [
                 className,
             ])}
-            border="round"
+            border="partial"
         >
             <HStack gap="8">
                 {viewTypes.map((viewType) => (

diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
@@ -51,7 +51,7 @@ const AddCommentForm = memo((props: AddCommentFormProps) => {
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <Card padding="24" border="round" max>
+            <Card padding="24" border="partial" max>
                 <HStack
                     data-testid="AddCommentForm"
                     justify="between"

diff --git a/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx b/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx
@@ -121,7 +121,7 @@ export const EditableProfileCard = memo((props: EditableProfileCardProps) => {
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <VStack max gap="8" className={classNames('', {}, [className])}>
+            <VStack max gap="16" className={classNames('', {}, [className])}>
                 <EditableProfileCardHeader />
                 {validateErrors?.length &&
                     validateErrors.map((err) => (

diff --git a/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx b/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx
@@ -2,15 +2,16 @@ import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { HStack } from '@/shared/ui/redesigned/Stack';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Text } from '@/shared/ui/deprecated/Text';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import { getUserAuthData } from '../../../../entities/User';
 import { profileActions } from '../../model/slice/profileSlice';
 import { getProfileData } from '../../model/selectors/getProfileData/getProfileData';
 import { getProfileReadonly } from '../../model/selectors/getProfileReadonly/getProfileReadonly';
 import { updateProfileData } from '../../model/services/updateProfileData/updateProfileData';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 interface EditableProfileCardHeaderProps {
     className?: string;
@@ -40,43 +41,44 @@ export const EditableProfileCardHeader = memo(
         }, [dispatch]);
 
         return (
-            <HStack
-                max
-                justify="between"
-                className={classNames('', {}, [className])}
-            >
-                <Text title={t('Profile')} />
-                {canEdit && (
-                    <>
-                        {readonly ? (
-                            <Button
-                                theme={ButtonTheme.OUTLINE}
-                                onClick={onEdit}
-                                data-testid="EditableProfileCardHeader.EditButton"
-                            >
-                                {t('Edit')}
-                            </Button>
-                        ) : (
-                            <HStack gap="8">
+            <Card border="partial" padding="24" max>
+                <HStack
+                    max
+                    justify="between"
+                    className={classNames('', {}, [className])}
+                >
+                    <Text title={t('Profile')} />
+                    {canEdit && (
+                        <>
+                            {readonly ? (
                                 <Button
-                                    theme={ButtonTheme.OUTLINE_RED}
-                                    onClick={onCancelEdit}
-                                    data-testid="EditableProfileCardHeader.CancelButton"
+                                    onClick={onEdit}
+                                    data-testid="EditableProfileCardHeader.EditButton"
                                 >
-                                    {t('Cancel')}
+                                    {t('Edit')}
                                 </Button>
-                                <Button
-                                    theme={ButtonTheme.OUTLINE}
-                                    onClick={onSave}
-                                    data-testid="EditableProfileCardHeader.SaveButton"
-                                >
-                                    {t('Save')}
-                                </Button>
-                            </HStack>
-                        )}
-                    </>
-                )}
-            </HStack>
+                            ) : (
+                                <HStack gap="8">
+                                    <Button
+                                        color="error"
+                                        onClick={onCancelEdit}
+                                        data-testid="EditableProfileCardHeader.CancelButton"
+                                    >
+                                        {t('Cancel')}
+                                    </Button>
+                                    <Button
+                                        color="success"
+                                        onClick={onSave}
+                                        data-testid="EditableProfileCardHeader.SaveButton"
+                                    >
+                                        {t('Save')}
+                                    </Button>
+                                </HStack>
+                            )}
+                        </>
+                    )}
+                </HStack>
+            </Card>
         );
     },
 );
diff --git a/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.tsx b/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.tsx
@@ -23,7 +23,7 @@ export const AdditionalInfoContainer = memo(() => {
     }
 
     return (
-        <Card padding="24" border="round" className={cls.card}>
+        <Card padding="24" border="partial" className={cls.card}>
             <ArticleAdditionalInfo
                 onEdit={onEditArticle}
                 author={article.user}

diff --git a/src/shared/ui/redesigned/Button/Button.module.scss b/src/shared/ui/redesigned/Button/Button.module.scss
@@ -45,12 +45,23 @@
 
 .outline {
     background: none;
-    border: 2px solid var(--icon-redesigned);
     border-radius: 34px;
 
     &:hover {
         border: 2px solid var(--accent-redesigned);
     }
+
+    &.normal {
+        border: 2px solid var(--icon-redesigned);
+    }
+
+    &.error {
+        border: 2px solid var(--cancel-redesigned);
+    }
+
+    &.success {
+        border: 2px solid var(--save-redesigned);
+    }
 }
 
 .square {
@@ -86,7 +97,6 @@
 
 .isDisabled {
     opacity: 0.5;
-    pointer-events: none;
 }
 
 .fullWidth {

diff --git a/src/shared/ui/redesigned/Button/Button.tsx b/src/shared/ui/redesigned/Button/Button.tsx
@@ -3,6 +3,7 @@ import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import cls from './Button.module.scss';
 
 export type ButtonVariant = 'clear' | 'outline' | 'filled';
+export type ButtonColor = 'normal' | 'success' | 'error';
 
 export type ButtonSize = 'm' | 'l' | 'xl';
 
@@ -16,6 +17,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     fullWidth?: boolean;
     addonLeft?: ReactNode;
     addonRight?: ReactNode;
+    color?: ButtonColor;
 }
 
 export const Button = memo((props: ButtonProps) => {
@@ -29,6 +31,8 @@ export const Button = memo((props: ButtonProps) => {
         fullWidth,
         addonLeft,
         addonRight,
+        color = 'normal',
+
         ...otherProps
     } = props;
 
@@ -41,7 +45,7 @@ export const Button = memo((props: ButtonProps) => {
         [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight),
     };
 
-    const additional = [className, cls[variant], cls[size]];
+    const additional = [className, cls[variant], cls[size], cls[color]];
 
     return (
         <button

diff --git a/src/shared/ui/redesigned/Card/Card.module.scss b/src/shared/ui/redesigned/Card/Card.module.scss
@@ -22,6 +22,10 @@
     border-radius: 12px;
 }
 
+.partial {
+    border-radius: 20px;
+}
+
 .round {
     border-radius: 40px;
 }

diff --git a/src/shared/ui/redesigned/Card/Card.tsx b/src/shared/ui/redesigned/Card/Card.tsx
@@ -4,7 +4,7 @@ import cls from './Card.module.scss';
 
 export type CardVariant = 'normal' | 'outlined' | 'light';
 export type CardPadding = '0' | '8' | '16' | '24';
-export type CardBorder = 'normal' | 'round';
+export type CardBorder = 'normal' | 'partial' | 'round';
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;

diff --git a/src/widgets/Navbar/ui/Navbar.module.scss b/src/widgets/Navbar/ui/Navbar.module.scss
@@ -1,13 +1,4 @@
 .Navbar {
-    width: 100%;
-    height: var(--navbar-height);
-    background: var(--inverted-bg-color);
-    display: flex;
-    align-items: center;
-    padding: 20px;
-}
-
-.NavbarRedesigned {
     padding: 16px;
 }
 

diff --git a/src/widgets/Navbar/ui/Navbar.tsx b/src/widgets/Navbar/ui/Navbar.tsx
@@ -2,7 +2,7 @@ import React, { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { HStack } from '@/shared/ui/redesigned/Stack';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button } from '@/shared/ui/redesigned/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { LoginModal } from '@/features/AuthByUsername';
 import { NotificationButton } from '@/features/notificationButton';
@@ -29,9 +29,7 @@ export const Navbar = memo(({ className }: NavbarProps) => {
 
     if (authData) {
         return (
-            <header
-                className={classNames(cls.NavbarRedesigned, {}, [className])}
-            >
+            <header className={classNames(cls.Navbar, {}, [className])}>
                 <HStack gap="16" className={cls.actions}>
                     <NotificationButton />
                     <AvatarDropDown />
@@ -42,11 +40,7 @@ export const Navbar = memo(({ className }: NavbarProps) => {
 
     return (
         <header className={classNames(cls.Navbar, {}, [className])}>
-            <Button
-                theme={ButtonTheme.CLEAR_INVERTED}
-                className={cls.links}
-                onClick={onShowModal}
-            >
+            <Button variant="clear" className={cls.links} onClick={onShowModal}>
                 {t('login')}
             </Button>
             {isAuthModal && (