feat: add layout for app redesign

TomatoVan · Apr 17, 2024 · 0a0efef · 0a0efef
1 parent ca3403f
commit 0a0efef
Show file tree

Hide file tree

Showing 24 changed files with 366 additions and 61 deletions.
diff --git a/json-server/db.json b/json-server/db.json
@@ -751,11 +751,12 @@
       ],
       "features": {
         "isArticleRatingEnabled": true,
-        "isCounterEnabled": true
+        "isCounterEnabled": true,
+        "isAppRedesigned": true
       },
       "avatar": "https://mobimg.b-cdn.net/v3/fetch/22/2207633df03a819cd72889249c8361a8.jpeg?w=1470&r=0.5625",
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_dark_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true
@@ -772,7 +773,10 @@
         "isArticleRatingEnabled": false,
         "isCounterEnabled": false
       },
-      "avatar": "https://i.pinimg.com/originals/9a/e0/2d/9ae02d4b4288396108ef77830a59e060.jpg"
+      "avatar": "https://i.pinimg.com/originals/9a/e0/2d/9ae02d4b4288396108ef77830a59e060.jpg",
+      "jsonSettings": {
+        "isArticlesPageWasOpened": true
+      }
     },
     {
       "id": "3",
@@ -785,7 +789,10 @@
         "isArticleRatingEnabled": false,
         "isCounterEnabled": true
       },
-      "avatar": "https://s1.1zoom.ru/big3/992/367659-alexfas01.jpg"
+      "avatar": "https://s1.1zoom.ru/big3/992/367659-alexfas01.jpg",
+      "jsonSettings": {
+        "isArticlesPageWasOpened": true
+      }
     },
     {
       "id": "4",

diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<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:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+	<title>Document</title>
 </head>
 <body>
 <div id="root"></div>
 </body>
 </html>
+
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -9,6 +9,8 @@ import { getUserInited, initAuthData } from '@/entities/User';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import { PageLoader } from '@/features/PageLoader';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { MainLayout } from '@/shared/layouts/MainLayout';
 
 function App() {
     const { theme } = useTheme();
@@ -24,15 +26,31 @@ function App() {
     }
 
     return (
-        <div className={classNames('app', {}, [theme])}>
-            <Suspense fallback="">
-                <Navbar />
-                <div className="content-page">
-                    <Sidebar />
-                    {inited && <AppRouter />}
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <div className={classNames('app_redesigned', {}, [theme])}>
+                    <Suspense fallback="">
+                        <MainLayout
+                            header={<Navbar />}
+                            content={<AppRouter />}
+                            sidebar={<Sidebar />}
+                        />
+                    </Suspense>
                 </div>
-            </Suspense>
-        </div>
+            }
+            off={
+                <div className={classNames('app', {}, [theme])}>
+                    <Suspense fallback="">
+                        <Navbar />
+                        <div className="content-page">
+                            <Sidebar />
+                            <AppRouter />
+                        </div>
+                    </Suspense>
+                </div>
+            }
+        />
     );
 }
 

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -14,6 +14,13 @@ body {
     min-height: 100vh;
 }
 
+.app_redesigned {
+    background: var(--bg-redesigned);
+    min-height: 100vh;
+    font: var(--font-m-redesigned);
+    color: var(--text-redesigned);
+}
+
 .content-page {
     display: flex;
 }

diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
@@ -6,6 +6,17 @@
     --inverted-primary-color: #0232c2;
     --inverted-secondary-color: #0452ff;
 
+    // redesigned
+    --dark-bg-redesigned: #090f11;
+    --bg-redesigned: #0c1214;
+    --light-bg-redesigned: #151c1f;
+    --text-redesigned: #dbdbdb;
+    --hint-redesigned: #555;
+    --cancel-redesigned: #d95757;
+    --save-redesigned: #6cd98b;
+    --icon-redesigned: #74a2b2;
+    --accent-redesigned: #5ed3f3;
+
     // skeleton
     --skeleton-color: #1515ad;
     --skeleton-shadow: #2b2be8;

diff --git a/src/app/styles/themes/normal.scss b/src/app/styles/themes/normal.scss
@@ -6,6 +6,17 @@
     --inverted-primary-color: #04ff04;
     --inverted-secondary-color: #049604;
 
+    // redesigned
+    --dark-bg-redesigned: #fff;
+    --bg-redesigned: #eff5f6;
+    --light-bg-redesigned: #e2eef1;
+    --text-redesigned: #141c1f;
+    --hint-redesigned: #adbcc0;
+    --cancel-redesigned: #f77;
+    --save-redesigned: #62de85;
+    --icon-redesigned: #5ed3f3;
+    --accent-redesigned: #00c8ff;
+
     // skeleton
     --skeleton-color: #fff;
     --skeleton-shadow: rgba(0 0 0 / 20%);

diff --git a/src/app/styles/themes/orange.scss b/src/app/styles/themes/orange.scss
@@ -6,6 +6,17 @@
     --inverted-primary-color: #dbd5dc;
     --inverted-secondary-color: #faf4fb;
 
+    // redesigned
+    --dark-bg-redesigned: #fff3d6;
+    --bg-redesigned: #f0c048;
+    --light-bg-redesigned: #f2d791;
+    --text-redesigned: #1b1311;
+    --hint-redesigned: #b8b2a2;
+    --cancel-redesigned: #ff5e5e;
+    --save-redesigned: #52fa81;
+    --icon-redesigned: #4875f0;
+    --accent-redesigned: #1d59ff;
+
     // skeleton
     --skeleton-color: #fff;
     --skeleton-shadow: rgba(0 0 0 / 20%);

diff --git a/src/app/styles/variables/global.scss b/src/app/styles/variables/global.scss
@@ -1,14 +1,24 @@
 :root {
     --font-family-main: consolas, "Times New Roman", serif;
+    --font-family-text-redesigned: "Nunito Sans", sans-serif;
+    --font-family-header-redesigned: "Roboto", sans-serif;
+
+    // s
     --font-size-s: 12px;
     --font-line-s: 20px;
     --font-s: var(--font-size-s) / var(--font-line-s) var(--font-family-main);
+
+    // m
     --font-size-m: 16px;
     --font-line-m: 24px;
     --font-m: var(--font-size-m) / var(--font-line-m) var(--font-family-main);
+
+    // l
     --font-size-l: 24px;
     --font-line-l: 32px;
     --font-l: var(--font-size-l) / var(--font-line-l) var(--font-family-main);
+
+    // xl
     --font-size-xl: 32px;
     --font-line-xl: 40px;
     --font-xl: var(--font-size-xl) / var(--font-line-xl) var(--font-family-main);
@@ -26,4 +36,18 @@
     --overlay-color: rgba(0 0 0 / 60%);
     --red-light: #f00;
     --red-dark: #ce0505;
+
+    // redesigned
+
+    // 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-header-redesigned);
+
+    // xl
+    --font-xl-redesigned: var(--font-size-xl) / var(--font-line-xl) var(--font-family-header-redesigned);
 }
diff --git a/src/shared/assets/icons/app-image.svg b/src/shared/assets/icons/app-image.svg
diff --git a/src/shared/layouts/MainLayout/MainLayout.module.scss b/src/shared/layouts/MainLayout/MainLayout.module.scss
@@ -0,0 +1,37 @@
+.MainLayout {
+    min-height: 100vh;
+    display: grid;
+    grid-template-areas: "sidebar content rightbar";
+    grid-template-columns: 284px 1fr 176px;
+}
+
+.sidebar {
+    grid-area: sidebar;
+    justify-self: center;
+    padding: 32px;
+}
+
+.content {
+    grid-area: content;
+    max-width: 1200px;
+    justify-self: center;
+    padding: 32px;
+}
+
+.rightbar {
+    grid-area: rightbar;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.rightbar,
+.sidebar {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+}
+
+.toolbar {
+    height: 100%;
+}
diff --git a/src/shared/layouts/MainLayout/MainLayout.stories.tsx b/src/shared/layouts/MainLayout/MainLayout.stories.tsx
@@ -0,0 +1,30 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { MainLayout } from './MainLayout';
+
+export default {
+    title: 'shared/MainLayout',
+    component: MainLayout,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof MainLayout>;
+
+const Template: ComponentStory<typeof MainLayout> = (args) => (
+    <MainLayout {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+    className: 'custom-class',
+    header: <div>Header</div>,
+    content: <div>Content</div>,
+    sidebar: <div>Sidebar</div>,
+    toolbar: <div>Toolbar</div>,
+};
+
+export const WithoutToolbar = Template.bind({});
+WithoutToolbar.args = {
+    header: <div>Header</div>,
+    content: <div>Content</div>,
+    sidebar: <div>Sidebar</div>,
+};
diff --git a/src/shared/layouts/MainLayout/MainLayout.tsx b/src/shared/layouts/MainLayout/MainLayout.tsx
@@ -0,0 +1,26 @@
+import { memo, ReactElement } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import cls from './MainLayout.module.scss';
+
+interface MainLayoutProps {
+    className?: string;
+    header: ReactElement;
+    content: ReactElement;
+    sidebar: ReactElement;
+    toolbar?: ReactElement;
+}
+
+export const MainLayout = memo((props: MainLayoutProps) => {
+    const { className, content, toolbar, header, sidebar } = props;
+
+    return (
+        <div className={classNames(cls.MainLayout, {}, [className])}>
+            <div className={cls.content}>{content}</div>
+            <div className={cls.sidebar}>{sidebar}</div>
+            <div className={cls.rightbar}>
+                <div className={cls.header}>{header}</div>
+                <div className={cls.toolbar}>{toolbar}</div>
+            </div>
+        </div>
+    );
+});
diff --git a/src/shared/layouts/MainLayout/index.ts b/src/shared/layouts/MainLayout/index.ts
@@ -0,0 +1 @@
+export { MainLayout } from './MainLayout';
diff --git a/src/shared/types/featureFlags.ts b/src/shared/types/featureFlags.ts
@@ -1,4 +1,5 @@
 export interface FeatureFlags {
     isArticleRatingEnabled?: boolean;
     isCounterEnabled?: boolean;
+    isAppRedesigned?: boolean;
 }
diff --git a/src/shared/ui/AppImage/AppImage.tsx b/src/shared/ui/AppImage/AppImage.tsx
@@ -42,5 +42,6 @@ export const AppImage = memo((props: AppImageProps) => {
     if (hasError && errorFallback) {
         return errorFallback;
     }
-    return <img src={src} alt={alt} className={className} {...otherProps} />;
+    return <img src={src} alt={alt} className={className}
+{...otherProps} />;
 });
diff --git a/src/shared/ui/AppLogo/AppLogo.module.scss b/src/shared/ui/AppLogo/AppLogo.module.scss
@@ -0,0 +1,21 @@
+.appLogoWrapper {
+    position: relative;
+}
+
+.gradientBig {
+    position: absolute;
+    background: radial-gradient(57.05% 57.05% at 49.84% 42.95%, rgb(94 211 243 / 20%) 0%, rgb(94 211 243 / 13.2%) 7.81%, rgb(94 211 243 / 8.3%) 29.69%, rgb(94 211 243 / 3.86%) 56.77%, rgb(94 211 243 / 2.19%) 77.6%, rgb(94 211 243 / 0%) 100%);
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    opacity: 0.6;
+}
+
+.gradientSmall {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(30.29% 30.29% at 50% 50%, rgb(94 211 243 / 18%) 0%, rgb(94 211 243 / 10.6%) 25.55%, rgb(94 211 243 / 7%) 47.27%, rgb(94 211 243 / 3.8%) 69.66%, rgb(94 211 243 / 0%) 100%);
+    border-radius: 50%;
+    opacity: 0.6;
+}
diff --git a/src/shared/ui/AppLogo/AppLogo.tsx b/src/shared/ui/AppLogo/AppLogo.tsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import cls from './AppLogo.module.scss';
+import { HStack } from '../Stack';
+import AppSvg from '@/shared/assets/icons/app-image.svg';
+import { classNames } from '@/shared/lib/classNames/classNames';
+
+interface AppLogoProps {
+    className?: string;
+}
+
+export const AppLogo = memo(({ className }: AppLogoProps) => (
+    <HStack
+        max
+        justify="center"
+        className={classNames(cls.appLogoWrapper, {}, [className])}
+    >
+        <div className={cls.gradientBig} />
+        <div className={cls.gradientSmall} />
+        <AppSvg className={cls.appLogo} />
+    </HStack>
+));
diff --git a/src/shared/ui/AppLogo/index.ts b/src/shared/ui/AppLogo/index.ts
@@ -0,0 +1 @@
+export { AppLogo } from './AppLogo';
diff --git a/src/widgets/Navbar/ui/Navbar.module.scss b/src/widgets/Navbar/ui/Navbar.module.scss
@@ -7,6 +7,10 @@
     padding: 20px;
 }
 
+.NavbarRedesigned {
+    padding: 16px;
+}
+
 .links,
 .actions {
     margin-left: auto;