feat: change sidebar, icons, buttons, links

TomatoVan · Apr 18, 2024 · 3f63cf3 · 3f63cf3
1 parent 9657f90
commit 3f63cf3
Show file tree

Hide file tree

Showing 23 changed files with 645 additions and 76 deletions.
diff --git a/src/features/LangSwitcher/ui/LangSwitcher/LangSwitcher.tsx b/src/features/LangSwitcher/ui/LangSwitcher/LangSwitcher.tsx
@@ -1,7 +1,12 @@
 import { useTranslation } from 'react-i18next';
 import React, { memo } from 'react';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import {
+    Button as ButtonDeprecated,
+    ButtonTheme,
+} from '@/shared/ui/deprecated/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Button } from '@/shared/ui/redesigned/Button';
 
 interface LangSwitcherProps {
     className?: string;
@@ -16,12 +21,26 @@ export const LangSwitcher = memo(({ className, short }: LangSwitcherProps) => {
     };
 
     return (
-        <Button
-            className={classNames('', {}, [className])}
-            theme={ButtonTheme.CLEAR}
-            onClick={toggle}
-        >
-            {t(short ? 'EN' : 'English')}
-        </Button>
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <Button
+                    className={classNames('', {}, [className])}
+                    variant="clear"
+                    onClick={toggle}
+                >
+                    {t(short ? 'EN' : 'English')}
+                </Button>
+            }
+            off={
+                <ButtonDeprecated
+                    className={classNames('', {}, [className])}
+                    theme={ButtonTheme.CLEAR}
+                    onClick={toggle}
+                >
+                    {t(short ? 'EN' : 'English')}
+                </ButtonDeprecated>
+            }
+        />
     );
 });
diff --git a/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx b/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx
@@ -1,11 +1,17 @@
 import React, { useCallback } from 'react';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import {
+    Button as ButtonDeprecated,
+    ButtonTheme,
+} from '@/shared/ui/deprecated/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import ThemeIcon from '../../../shared/assets/icons/theme-light.svg';
+import ThemeIconDeprecated from '../../../shared/assets/icons/theme-light.svg';
+import ThemeIcon from '../../../shared/assets/icons/theme.svg';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { saveJsonSettings } from '@/entities/User';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
-import { Icon } from '@/shared/ui/deprecated/Icon';
+import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Icon } from '@/shared/ui/redesigned/Icon';
 
 interface ThemeSwitcherProps {
     className?: string;
@@ -23,12 +29,23 @@ export const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
     }, [dispatch, toggleTheme]);
 
     return (
-        <Button
-            theme={ButtonTheme.CLEAR}
-            className={classNames('', {}, [className])}
-            onClick={onToggleHandler}
-        >
-            <Icon Svg={ThemeIcon} width={40} height={40} inverted />
-        </Button>
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={<Icon Svg={ThemeIcon} clickable onClick={onToggleHandler} />}
+            off={
+                <ButtonDeprecated
+                    theme={ButtonTheme.CLEAR}
+                    className={classNames('', {}, [className])}
+                    onClick={onToggleHandler}
+                >
+                    <IconDeprecated
+                        Svg={ThemeIconDeprecated}
+                        width={40}
+                        height={40}
+                        inverted
+                    />
+                </ButtonDeprecated>
+            }
+        />
     );
 };
diff --git a/src/shared/layouts/MainLayout/MainLayout.module.scss b/src/shared/layouts/MainLayout/MainLayout.module.scss
@@ -2,12 +2,11 @@
     min-height: 100vh;
     display: grid;
     grid-template-areas: "sidebar content rightbar";
-    grid-template-columns: 284px 1fr 176px;
+    grid-template-columns: 284px 1fr 100px;
 }
 
 .sidebar {
     grid-area: sidebar;
-    justify-self: center;
     padding: 32px;
 }
 
@@ -16,6 +15,7 @@
     max-width: 1200px;
     justify-self: center;
     padding: 32px;
+    width: 100%;
 }
 
 .rightbar {

diff --git a/src/shared/ui/redesigned/AppLink/AppLink.module.scss b/src/shared/ui/redesigned/AppLink/AppLink.module.scss
@@ -0,0 +1,15 @@
+.primary {
+    color: var(--text-redesigned);
+
+    &:hover {
+        color: var(--accent-redesigned);
+    }
+}
+
+.red {
+    color: var(--cancel-redesigned);
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
diff --git a/src/shared/ui/redesigned/AppLink/AppLink.stories.tsx b/src/shared/ui/redesigned/AppLink/AppLink.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { AppLink } from './AppLink';
+import { Theme } from '@/shared/const/theme';
+
+export default {
+    title: 'shared/AppLink',
+    component: AppLink,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    args: {
+        to: '/',
+    },
+} as ComponentMeta<typeof AppLink>;
+
+const Template: ComponentStory<typeof AppLink> = (args) => (
+    <AppLink {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+    children: 'Text',
+    variant: 'primary',
+};
+
+export const Red = Template.bind({});
+Red.args = {
+    children: 'Text',
+    variant: 'red',
+};
+
+export const PrimaryDark = Template.bind({});
+PrimaryDark.args = {
+    children: 'Text',
+    variant: 'primary',
+};
+PrimaryDark.decorators = [ThemeDecorator(Theme.DARK)];
+
+export const RedDark = Template.bind({});
+RedDark.args = {
+    children: 'Text',
+    variant: 'red',
+};
+RedDark.decorators = [ThemeDecorator(Theme.DARK)];
diff --git a/src/shared/ui/redesigned/AppLink/AppLink.tsx b/src/shared/ui/redesigned/AppLink/AppLink.tsx
@@ -0,0 +1,39 @@
+import { LinkProps, NavLink } from 'react-router-dom';
+import { memo, ReactNode } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import cls from './AppLink.module.scss';
+
+export type AppLinkVariant = 'primary' | 'red';
+
+interface AppLinkProps extends LinkProps {
+    className?: string;
+    variant?: AppLinkVariant;
+    children?: ReactNode;
+    activeClassName?: string;
+}
+
+export const AppLink = memo((props: AppLinkProps) => {
+    const {
+        to,
+        className,
+        children,
+        variant = 'primary',
+        activeClassName = '',
+        ...otherProps
+    } = props;
+
+    return (
+        <NavLink
+            to={to}
+            className={({ isActive }) =>
+                classNames(cls.AppLink, { [activeClassName]: isActive }, [
+                    className,
+                    cls[variant],
+                ])
+            }
+            {...otherProps}
+        >
+            {children}
+        </NavLink>
+    );
+});
diff --git a/src/shared/ui/redesigned/AppLink/index.ts b/src/shared/ui/redesigned/AppLink/index.ts
@@ -0,0 +1 @@
+export * from './AppLink';
diff --git a/...ui/deprecated/AppLogo/AppLogo.module.scss → ...ui/redesigned/AppLogo/AppLogo.module.scss b/...ui/deprecated/AppLogo/AppLogo.module.scss → ...ui/redesigned/AppLogo/AppLogo.module.scss
@@ -9,6 +9,7 @@
     height: 300px;
     border-radius: 50%;
     opacity: 0.6;
+    pointer-events: none;
 }
 
 .gradientSmall {
@@ -18,4 +19,5 @@
     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;
+    pointer-events: none;
 }
diff --git a/src/shared/ui/deprecated/AppLogo/AppLogo.tsx → src/shared/ui/redesigned/AppLogo/AppLogo.tsx b/src/shared/ui/deprecated/AppLogo/AppLogo.tsx → src/shared/ui/redesigned/AppLogo/AppLogo.tsx
@@ -1,25 +1,27 @@
 import React, { memo } from 'react';
 import cls from './AppLogo.module.scss';
-import { HStack } from '../Stack';
+import { HStack } from '../../deprecated/Stack';
 import AppSvg from '@/shared/assets/icons/app-image.svg';
 import { classNames } from '@/shared/lib/classNames/classNames';
 
 interface AppLogoProps {
     className?: string;
+    size?: number;
 }
-/**
- * Устарел, используем новые компоненты из папки redesigned
- * @deprecated
- */
 
-export const AppLogo = memo(({ className }: AppLogoProps) => (
+export const AppLogo = memo(({ className, size = 50 }: AppLogoProps) => (
     <HStack
         max
         justify="center"
         className={classNames(cls.appLogoWrapper, {}, [className])}
     >
         <div className={cls.gradientBig} />
         <div className={cls.gradientSmall} />
-        <AppSvg className={cls.appLogo} />
+        <AppSvg
+            width={size}
+            height={size}
+            color="black"
+            className={cls.appLogo}
+        />
     </HStack>
 ));
diff --git a/src/shared/ui/deprecated/AppLogo/index.ts → src/shared/ui/redesigned/AppLogo/index.ts b/src/shared/ui/deprecated/AppLogo/index.ts → src/shared/ui/redesigned/AppLogo/index.ts
diff --git a/src/shared/ui/redesigned/Button/Button.module.scss b/src/shared/ui/redesigned/Button/Button.module.scss
@@ -0,0 +1,55 @@
+.Button {
+    cursor: pointer;
+    color: var(--text-redesigned);
+    padding: 6px 15px;
+
+    &:hover {
+        color: var(--accent-redesigned);
+    }
+}
+
+.clear {
+    padding: 0;
+    border: none;
+    background: none;
+    outline: none;
+}
+
+.square {
+    padding: 0;
+}
+
+.square.m {
+    width: var(--font-line-m);
+    height: var(--font-line-m);
+}
+
+.square.l {
+    width: var(--font-line-l);
+    height: var(--font-line-l);
+}
+
+.square.xl {
+    width: var(--font-line-xl);
+    height: var(--font-line-xl);
+}
+
+.m {
+    font: var(--font-m-redesigned);
+}
+
+.l {
+    font: var(--font-l-redesigned);
+}
+
+.xl {
+    font: var(--font-xl-redesigned);
+}
+
+.disabled {
+    opacity: 0.5;
+}
+
+.fullWidth {
+    width: 100%;
+}