feat: redesign modals, drawers, scroll

TomatoVan · Apr 24, 2024 · c8ef753 · c8ef753
1 parent be35c8d
commit c8ef753
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 189 deletions.
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -1,113 +1,114 @@
 {
-    "": "",
-    "123": "123",
-    "Admin panel": "",
-    "All": "",
-    "Article ratings coming soon!": "",
-    "Articles app": "",
-    "Articles not found": "",
-    "Ascending": "",
-    "Back to list": "",
-    "Cancel": "",
-    "Choose ": "",
-    "Choose country": "",
-    "Choose currency": "",
-    "Comments": "",
-    "Comments is loading": "",
-    "Create new article": "",
-    "Creation date": "",
-    "Descending": "",
-    "Design options": "",
-    "Economics": "",
-    "Edit": "",
-    "Enter ": "",
-    "Enter comment text": "",
-    "Enter cooment text": "",
-    "Error while loading articles": "",
-    "Error with getting article data": "",
-    "Error with getting profile data": "",
-    "Exit": "",
-    "Here you can search and view articles on various topics": "",
-    "IT": "",
-    "Incorrect age": "",
-    "Incorrect country": "",
-    "Incorrect user data": "",
-    "Leave your feedback on the article, it will help improve the quality": "",
-    "Name": "",
-    "New": "",
-    "No data": "",
-    "Old": "",
-    "PROFILE PAGE": "",
-    "Profile": "",
-    "Rate the article": "",
-    "Read more": {
-        "": {
-            "": {
-                "": ""
-            }
-        }
-    },
-    "Recommend": "",
-    "Save": "",
-    "Science": "",
-    "Search": "",
-    "Send": "",
-    "Server error": "",
-    "Sort by": "",
-    "Sorting by": "",
-    "Thanks for review!": "",
-    "Try to reload page": "",
-    "User settings": "",
-    "Views": "",
-    "Welcome to the articles page!": "",
-    "You don`t have access to this page!": "",
-    "Your name": "",
-    "article_not_found": "",
-    "articles": "",
-    "articles page": "",
-    "articles_details": "",
-    "articles_details page": "",
-    "articles_detals": "",
-    "ascending": "",
-    "auth_form": "",
-    "auth_password": "",
-    "auth_username": "",
-    "by": "",
-    "comments": "",
-    "creation date": "",
-    "decrement": "",
-    "descending": "",
-    "exit": "",
-    "increment": "",
-    "login": "",
-    "login_error": "",
-    "name": "",
-    "no articles found": "",
-    "no comments": "",
-    "no profile found": "",
-    "read more": "",
-    "throw error": "throw error",
-    "views": "",
-    "Айти": "",
-    "Ваш отзыв": "",
-    "Все статьи": "",
-    "Главная страница": "",
-    "Закрыть": "",
-    "Наука": "",
-    "Обновить страницу": "",
-    "Отправить": "",
-    "Оценка статей скоро появится!": "",
-    "Поиск": "",
-    "Попробуйте обновить страницу": "",
-    "Произошла непредвиденная ошибка": "",
-    "Произошла ошибка при загрузке профиля": "",
-    "Сортировать ПО": "",
-    "Статьи не найдены": "",
-    "Экономика": "",
-    "возрастанию": "",
-    "дате создания": "",
-    "названию": "",
-    "по": "",
-    "просмотрам": "",
-    "убыванию": ""
+  "": "",
+  "123": "123",
+  "Admin panel": "",
+  "All": "",
+  "Article ratings coming soon!": "",
+  "Articles app": "",
+  "Articles not found": "",
+  "Ascending": "",
+  "Back to list": "",
+  "Cancel": "",
+  "Choose ": "",
+  "Choose country": "",
+  "Choose currency": "",
+  "Comments": "",
+  "Comments is loading": "",
+  "Create new article": "",
+  "Creation date": "",
+  "Descending": "",
+  "Design options": "",
+  "Economics": "",
+  "Edit": "",
+  "Enter ": "",
+  "Enter comment text": "",
+  "Enter cooment text": "",
+  "Error while loading articles": "",
+  "Error with getting article data": "",
+  "Error with getting profile data": "",
+  "Exit": "",
+  "Here you can search and view articles on various topics": "",
+  "IT": "",
+  "Incorrect age": "",
+  "Incorrect country": "",
+  "Incorrect user data": "",
+  "Leave your feedback on the article, it will help improve the quality": "",
+  "Name": "",
+  "New": "",
+  "No data": "",
+  "Old": "",
+  "PROFILE PAGE": "",
+  "Profile": "",
+  "Rate the article": "",
+  "Read more": {
+    "": {
+      "": {
+        "": ""
+      }
+    }
+  },
+  "Recommend": "",
+  "Save": "",
+  "Science": "",
+  "Search": "",
+  "Send": "",
+  "Server error": "",
+  "Sort by": "",
+  "Sorting by": "",
+  "Thanks for review!": "",
+  "Try to reload page": "",
+  "User settings": "",
+  "Views": "",
+  "Welcome to the articles page!": "",
+  "You don`t have access to this page!": "",
+  "Your name": "",
+  "Your review": "",
+  "article_not_found": "",
+  "articles": "",
+  "articles page": "",
+  "articles_details": "",
+  "articles_details page": "",
+  "articles_detals": "",
+  "ascending": "",
+  "auth_form": "",
+  "auth_password": "",
+  "auth_username": "",
+  "by": "",
+  "comments": "",
+  "creation date": "",
+  "decrement": "",
+  "descending": "",
+  "exit": "",
+  "increment": "",
+  "login": "",
+  "login_error": "",
+  "name": "",
+  "no articles found": "",
+  "no comments": "",
+  "no profile found": "",
+  "read more": "",
+  "throw error": "throw error",
+  "views": "",
+  "Айти": "",
+  "Ваш отзыв": "",
+  "Все статьи": "",
+  "Главная страница": "",
+  "Закрыть": "",
+  "Наука": "",
+  "Обновить страницу": "",
+  "Отправить": "",
+  "Оценка статей скоро появится!": "",
+  "Поиск": "",
+  "Попробуйте обновить страницу": "",
+  "Произошла непредвиденная ошибка": "",
+  "Произошла ошибка при загрузке профиля": "",
+  "Сортировать ПО": "",
+  "Статьи не найдены": "",
+  "Экономика": "",
+  "возрастанию": "",
+  "дате создания": "",
+  "названию": "",
+  "по": "",
+  "просмотрам": "",
+  "убыванию": ""
 }
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -25,7 +25,7 @@ function App() {
     }
 
     return (
-        <div className={classNames('app_redesigned', {}, [theme])}>
+        <div id="app" className={classNames('app', {}, [theme])}>
             <Suspense fallback="">
                 <MainLayout
                     header={<Navbar />}

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -4,38 +4,28 @@
 @import "./themes/dark";
 @import "./themes/orange";
 
-body {
-    font: var(--font-m);
-    color: var(--primary-color);
-}
-
 .app {
-    background: var(--bg-color);
-    min-height: 100vh;
-}
-
-.app_redesigned {
     background: var(--bg-redesigned);
-    min-height: 100vh;
     font: var(--font-m-redesigned);
     color: var(--text-redesigned);
+    min-height: 100vh;
 }
 
 .content-page {
     display: flex;
 }
 
 *::-webkit-scrollbar {
-    width: 12px;               /* ширина scrollbar */
+    width: 12px;
     height: 8px;
 }
 
 *::-webkit-scrollbar-track {
-    background: var(--card-bg);        /* цвет дорожки */
+    background: var(--light-bg-redesigned);
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: var(--inverted-primary-color);    /* цвет плашки */
-    border-radius: 20px;       /* закругления плашки */
-    border: 2px solid var(--primary-color);  /* padding вокруг плашки */
+    background-color: var(--icon-redesigned);
+    border-radius: 20px;
+    border: 1px solid var(--accent-redesigned);
 }
diff --git a/src/entities/Rating/ui/RatingCard.tsx b/src/entities/Rating/ui/RatingCard.tsx
@@ -5,11 +5,11 @@ import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { Card } from '@/shared/ui/deprecated/Card';
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button';
 import { Text } from '@/shared/ui/deprecated/Text';
-import { StarRating } from '@/shared/ui/deprecated/StarRating';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Input } from '@/shared/ui/deprecated/Input';
-import { Modal } from '@/shared/ui/deprecated/Modal';
-import { Drawer } from '@/shared/ui/deprecated/Drawer';
+import { StarRating } from '@/shared/ui/deprecated/StarRating';
+import { Modal } from '@/shared/ui/redesigned/Modal';
+import { Drawer } from '@/shared/ui/redesigned/Drawer';
 
 interface RatingCardProps {
     className?: string;
@@ -65,7 +65,7 @@ export const RatingCard = memo((props: RatingCardProps) => {
                 data-testid="RatingCard.Input"
                 value={feedback}
                 onChange={setFeedback}
-                placeholder={t('Ваш отзыв')}
+                placeholder={t('Your review')}
             />
         </>
     );
@@ -115,7 +115,7 @@ export const RatingCard = memo((props: RatingCardProps) => {
                             onClick={acceptHandle}
                             size={ButtonSize.L}
                         >
-                            {t('Отправить')}
+                            {t('Send')}
                         </Button>
                     </VStack>
                 </Drawer>

diff --git a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { memo, useCallback } from 'react';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Text, TextTheme } 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 {
     DynamicModuleLoader,
@@ -16,7 +16,8 @@ import { getLoginError } from '../../model/selectors/getLoginError/getLoginError
 import cls from './LoginForm.module.scss';
 import { loginActions, loginReducer } from '../../model/slice/loginSlice';
 import { loginByUsername } from '../../model/services/loginByUsername/loginByUsername';
-import { Input } from '@/shared/ui/deprecated/Input';
+import { Input } from '@/shared/ui/redesigned/Input';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 
 export interface LoginFormProps {
     className?: string;
@@ -59,34 +60,33 @@ const LoginForm = memo(({ className, onSuccess }: LoginFormProps) => {
     return (
         <DynamicModuleLoader reducers={initialReducers}>
             <div className={classNames(cls.LoginForm, {}, [className])}>
-                <Text title={t('auth_form')} />
-                {error && (
-                    <Text text={t('login_error')} theme={TextTheme.ERROR} />
-                )}
-                <Input
-                    autofocus
-                    type="text"
-                    className={cls.input}
-                    placeholder={t('auth_username')}
-                    onChange={onChangeUsername}
-                    value={username}
-                />
-                <Input
-                    type="text"
-                    className={cls.input}
-                    placeholder={t('auth_password')}
-                    onChange={onChangePassword}
-                    value={password}
-                />
-
-                <Button
-                    onClick={onLoginClick}
-                    theme={ButtonTheme.OUTLINE}
-                    className={cls.loginBtn}
-                    isDisabled={isLoading}
-                >
-                    {t('login')}
-                </Button>
+                <VStack gap="8">
+                    <Text title={t('auth_form')} />
+                    {error && <Text text={t('login_error')} variant="error" />}
+                    <Input
+                        autofocus
+                        type="text"
+                        className={cls.input}
+                        placeholder={t('auth_username')}
+                        onChange={onChangeUsername}
+                        value={username}
+                    />
+                    <Input
+                        type="text"
+                        className={cls.input}
+                        placeholder={t('auth_password')}
+                        onChange={onChangePassword}
+                        value={password}
+                    />
+                    <Button
+                        onClick={onLoginClick}
+                        variant="outline"
+                        className={cls.loginBtn}
+                        isDisabled={isLoading}
+                    >
+                        {t('login')}
+                    </Button>
+                </VStack>
             </div>
         </DynamicModuleLoader>
     );