Add layout for redesigned app

vladislav0sidorov · Sep 10, 2023 · 653d1e4 · 653d1e4
1 parent 6413507
commit 653d1e4
Show file tree

Hide file tree

Showing 31 changed files with 361 additions and 35 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ npm run start:dev или npm run start:dev:vite - запуск сервера +
 В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.
 
 Также для строгого контроля главных архитектурных принципов
-используется собственный eslint plugin _eslint-plugin-ulbi-tv-plugin_,
+используется eslint plugin _eslint-plugin-ulbi-tv-plugin_,
 который содержит 3 правила
 
 1. path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
@@ -183,17 +183,18 @@ Clear.args = {
 в него передается объект с опциями
 
 {
-   name: название фича-флага,
-   on: функция, которая отработает после Включения фичи
-   of: функция, которая отработает после ВЫключения фичи
+name: название фича-флага,
+on: функция, которая отработает после Включения фичи
+of: функция, которая отработает после ВЫключения фичи
 }
 
 Для автоматического удаления фичи использовать скрипт remove-feature.ts,
 который принимает 2 аргумента
+
 1. Название удаляемого фича-флага
 2. Состояние (on\off)
 
-----
+---
 
 ## Сущности (entities)
 

diff --git a/json-server/db.json b/json-server/db.json
@@ -113,10 +113,11 @@
         "ADMIN"
       ],
       "features": {
-        "isArticleRaitingEnebled": true
+        "isArticleRaitingEnebled": true,
+        "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_dark_theme",
         "isArticlePageWasOpen": true
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"

diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,20 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet" />
-    <title>Ulbi TV Course</title>
-  </head>
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,700&family=Raleway:wght@500&family=Roboto:wght@400;500;700&display=swap"
+    rel="stylesheet" />
+  <title>My blog</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
 
-  <body>
-    <div id="root"></div>
-  </body>
 </html>
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useTheme } from '@/app/providers/ThemeProvider'
@@ -9,20 +10,20 @@ import { Sidebar } from '@/widgets/Sidebar'
 import { getUserInited, initAuthData } from '@/entities/User'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { PageLoader } from '@/widgets/PageLoader'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { MainLayout } from '@/shared/layouts/MainLayout'
 
 function App() {
   const { theme } = useTheme()
   const dispatch = useAppDispatch()
   const inited = useSelector(getUserInited)
-
-  //* Есть баг в этом участке, следует разобраться
-  // const inited = useSelector(getUserInited);
+  const { t } = useTranslation()
 
   React.useEffect(() => {
     dispatch(initAuthData())
   }, [dispatch])
 
-  let content = (
+  let deprecatedContent = (
     <React.Suspense fallback="">
       <Navbar />
       <div className="content-page">
@@ -32,15 +33,33 @@ function App() {
     </React.Suspense>
   )
 
+  let redesignedContent = (
+    <React.Suspense fallback="">
+      <MainLayout header={<Navbar />} sidebar={<Sidebar />} content={<AppRouter />} toolbar={t('Toolbar')} />
+    </React.Suspense>
+  )
+
   if (!inited) {
-    content = (
+    deprecatedContent = (
       <div className={classNames('app', {}, [theme])}>
         <PageLoader />
       </div>
     )
+
+    redesignedContent = (
+      <div className={classNames('app_redesigned', {}, [theme])}>
+        <PageLoader />
+      </div>
+    )
   }
 
-  return <div className={classNames('app', {}, [theme])}>{content}</div>
+  return (
+    <ToggleFeaturesComponent
+      featureName="isAppRedesigned"
+      on={<div className={classNames('app_redesigned', {}, [theme])}>{redesignedContent}</div>}
+      off={<div className={classNames('app', {}, [theme])}>{deprecatedContent}</div>}
+    />
+  )
 }
 
 export default App
diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -15,6 +15,13 @@ body {
   min-height: 100vh;
 }
 
+.app_redesigned {
+  font: var(--font-m-redesigned);
+  color: var(--text-redesigned);
+  background: var(--bg-redesigned);
+  min-height: 100vh;
+}
+
 .content-page {
   display: flex;
 }

diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
@@ -8,6 +8,17 @@
   --inverted-secondary-color: #262223;
   --inverted-third-color: #fbf4f6;
 
+  // redesigned
+  --dark-bg-redesigned: #090f11;
+  --bg-redesigned: #0c1214;
+  --light-bg-redesigned: #151c1f;
+  --text-redesigned: #dbdbdb;
+  --hint-redesigned: #555555;
+  --cancel-redesigned: #d95757;
+  --save-redesigned: #6cd98b;
+  --icon-redesigned: #74a2b2;
+  --accent-redesigned: #5ed3f3;
+
   // Skeleton
   --skeleton-color: #585252;
   --skeleton-shadow: #1a1919;

diff --git a/src/app/styles/themes/light.scss b/src/app/styles/themes/light.scss
@@ -8,6 +8,17 @@
   --inverted-secondary-color: #fbf7f4;
   --inverted-third-color: #161313;
 
+  // redesigned
+  --dark-bg-redesigned: #ffffff;
+  --bg-redesigned: #eff5f6;
+  --light-bg-redesigned: #e2eef1;
+  --text-redesigned: #141c1f;
+  --hint-redesigned: #adbcc0;
+  --cancel-redesigned: #ff7777;
+  --save-redesigned: #62de85;
+  --icon-redesigned: #5ed3f3;
+  --accent-redesigned: #00c8ff;
+
   // Skeleton
   --skeleton-color: #ededed;
   --skeleton-shadow: #d0cbc7;

diff --git a/src/app/styles/variables/global.scss b/src/app/styles/variables/global.scss
@@ -1,5 +1,5 @@
 :root {
-  --font-family-main: "Raleway", sans-serif;
+  --font-family-main: 'Raleway', sans-serif;
 
   // S
   --font-size-s: 10px;
@@ -40,4 +40,20 @@
   --overlay-color: rgba(0 0 0 / 60%);
   --red-light: #db0000;
   --red-dark: #c90000;
+
+  // *Redesigned variavles
+  --font-family-text-redesigned: 'Nunito Sans', sans-serif;
+  --font-family-title-redesigned: font-family: 'Roboto', sans-serif;
+
+  // S
+  --font-s-redesigned: var(--font-size-s) / var(--font-line-s) var(--font-family-text-redesigned);
+
+  // M
+  --font-m-redesigned: var(--font-size-m) / var(--font-line-m) var(--font-family-text-redesigned);
+
+  // L
+  --font-l-redesigned: var(--font-size-l) / var(--font-line-l) var(--font-family-title-redesigned);
+
+  // XL
+  --font-xl-redesigned: var(--font-size-xl) / var(--font-line-xl) var(--font-family-title-redesigned);
 }
diff --git a/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx b/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx
@@ -12,7 +12,7 @@ import { Page } from '@/widgets/Page'
 import { VStack } from '@/shared/ui/Stack'
 import { ArticleRecomendationsList } from '@/features/ArticleRecomendationsList'
 import { ArticleRating } from '@/features/ArticleRating'
-import { ToggleFeaturesComponent, toggleFeatures } from '@/shared/lib/features'
+import { toggleFeatures } from '@/shared/lib/features'
 import { Card } from '@/shared/ui/Card'
 
 interface ArticleDetailsPageProps {

diff --git a/src/pages/HomePage/ui/HomePage.tsx b/src/pages/HomePage/ui/HomePage.tsx
@@ -6,12 +6,10 @@ import { RatingCart } from '@/entities/Rating'
 
 const HomePage = () => {
   const { t } = useTranslation('home')
-  // const isArticleRaitingEnabled = getFeatureFlag('isArticleRaitingEnebled')
 
   return (
     <Page data-testid="HomePage">
       <Text text={t('Домашняя страница')} />
-      {/* {isArticleRaitingEnabled && >} */}
       <RatingCart hasFeedback feedbackTitle={t('Как вам сервис?')} />
     </Page>
   )

diff --git a/src/shared/.DS_Store b/src/shared/.DS_Store
diff --git a/src/shared/assets/.DS_Store b/src/shared/assets/.DS_Store