From 1b98ec42dadeb00bf0df55aa98baefa883a85e6f Mon Sep 17 00:00:00 2001
From: Alexander Morugin <nobilis@bk.ru>
Date: Fri, 17 May 2024 15:39:33 +0300
Subject: [PATCH] enhancement_377_login_form_adaptive_new

---
 .../WrapperForMainContent/wrapper.module.scss |  6 ++--
 .../WidgetButtonsPurchase.module.scss         |  8 ++++++
 .../WidgetButtonsPurchase.tsx                 |  2 +-
 .../login/ui/LoginForm/LoginForm.module.scss  | 28 +++++++++++++------
 .../login/ui/LoginForm/LoginForm.stories.tsx  | 25 +++++++++++++++++
 src/features/login/ui/LoginForm/LoginForm.tsx | 10 +++++--
 src/widgets/Product/Product.module.scss       |  4 +++
 src/widgets/Product/Product.tsx               |  2 +-
 .../CardPreview/CardPreview.module.scss       |  4 +++
 .../ProductItem/CardPreview/CardPreview.tsx   |  2 +-
 10 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 src/features/login/ui/LoginForm/LoginForm.stories.tsx

diff --git a/src/components/WrapperForMainContent/wrapper.module.scss b/src/components/WrapperForMainContent/wrapper.module.scss
index 3a68d41a..8252cd26 100644
--- a/src/components/WrapperForMainContent/wrapper.module.scss
+++ b/src/components/WrapperForMainContent/wrapper.module.scss
@@ -4,15 +4,15 @@
   max-width: 1470px;
   width: 100%;
   margin: 0 auto;
-  padding: 24px;
+  padding: 25px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 48px;
+  gap: 20px;
 
   @include media.respond-to('middle') {
     max-width: 768px;
-    width: 100%;    
+    width: 100%;
   }
 
   @include media.respond-to('small') {
diff --git a/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss
index 8f069f5f..3f5dca0c 100644
--- a/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss
+++ b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss
@@ -1,3 +1,5 @@
+@use '@/shared/styles/utils/variables' as var;
+
 .customButtonsContainer {
   display: flex;
   justify-content: end;
@@ -24,4 +26,10 @@
     width: 25px;
     height: 20px;
   }
+
+  &__iconCart {
+    fill: var.$white;
+    width: 25px;
+    height: 20px;
+  }
 }
diff --git a/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx
index a401df22..a65f904e 100644
--- a/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx
+++ b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx
@@ -37,7 +37,7 @@ export const WidgetButtonsPurchase: FC<TWidgetButtonsPurchase> = ({
         theme={isInCart ? ButtonTheme.SUCCESS : ButtonTheme.PRIMARY}
         size={size}
         onClick={handleAddToCart}>
-        <IconCart className={styles.customButton__svg} />
+        <IconCart className={styles.customButton__iconCart} />
         {isInCart ? 'Перейти в корзину' : 'Купить'}
       </Button>
       <Button
diff --git a/src/features/login/ui/LoginForm/LoginForm.module.scss b/src/features/login/ui/LoginForm/LoginForm.module.scss
index 7b26d256..74a4897c 100644
--- a/src/features/login/ui/LoginForm/LoginForm.module.scss
+++ b/src/features/login/ui/LoginForm/LoginForm.module.scss
@@ -5,11 +5,12 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 16px;
-  margin: 0 auto;
+  margin-left: 25px;
+  margin-right: 25px;
   background-color: var.$white;
-  padding: 32px 24px 42px;
-  width: 450px;
+  padding: 30px;
+  width: 100%;
+  max-width: 450px;
   border-radius: 10px;
 
   & .errorForm {
@@ -22,6 +23,10 @@
   }
 }
 
+.heading {
+  padding-bottom: 20px;
+}
+
 .span {
   color: var.$promo-color;
   font-weight: 100;
@@ -29,11 +34,13 @@
 
 .label {
   position: relative;
+  font-size: 14px;
 }
 
 .input {
-  margin: 12px 0 24px;
-  padding: 12px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 10px 16px;
   border-radius: 10px;
   background-color: var.$body-bg;
   border: 1px solid var.$border-color;
@@ -45,10 +52,9 @@
 
 .error {
   position: absolute;
-  top: 80px;
-  left: 0;
+  top: 67px;
+  left: 15px;
   font-size: 12px;
-  font-weight: 100;
   color: var.$promo-color;
 }
 
@@ -81,3 +87,7 @@
     fill: var.$header-color;
   }
 }
+
+.link {
+  margin-bottom: 20px;
+}
diff --git a/src/features/login/ui/LoginForm/LoginForm.stories.tsx b/src/features/login/ui/LoginForm/LoginForm.stories.tsx
new file mode 100644
index 00000000..8577b918
--- /dev/null
+++ b/src/features/login/ui/LoginForm/LoginForm.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LoginForm from './LoginForm'
+
+const meta = {
+  title: 'features/LoginForm',
+  component: LoginForm,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof LoginForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = () => {
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <LoginForm isModalOpen={true} handleClose={() => {}} />
+    </div>
+  )
+}
+
+Default.args = {}
diff --git a/src/features/login/ui/LoginForm/LoginForm.tsx b/src/features/login/ui/LoginForm/LoginForm.tsx
index e2b18954..47887843 100644
--- a/src/features/login/ui/LoginForm/LoginForm.tsx
+++ b/src/features/login/ui/LoginForm/LoginForm.tsx
@@ -6,7 +6,7 @@ import IconClose from '@/assets/icons/iconHeaderMenuClose.svg'
 import { getErrorAuthStatus } from '@/features/login/model/selectors/getUserAuthStatus'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
-import Heading from '@/shared/ui/Heading/Heading'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import { Input } from '@/shared/ui/Input/Input'
 import Link from '@/shared/ui/Link/Link'
 import Paragraph, { ParagraphTheme } from '@/shared/ui/Paragraph/Paragraph'
@@ -58,7 +58,9 @@ const LoginForm: FC<LoginFormProps> = ({ isModalOpen, handleClose, onLogin }) =>
               <IconClose className={styles.closeIcon} />
             </Button>
           )}
-          <Heading>Авторизация</Heading>
+          <Heading type={HeadingType.NORMAL} className={styles.heading}>
+            Авторизация
+          </Heading>
           <label htmlFor="email" className={styles.label}>
             Электронная почта
             <Field
@@ -82,7 +84,9 @@ const LoginForm: FC<LoginFormProps> = ({ isModalOpen, handleClose, onLogin }) =>
             />
             <ErrorMessage name="password" component="div" className={styles.error} />
           </label>
-          <Link to="#">Забыли пароль?</Link>
+          <Link to="#" className={styles.link}>
+            Забыли пароль?
+          </Link>
           <div className={styles.buttons}>
             <Button
               size={ButtonSize.S}
diff --git a/src/widgets/Product/Product.module.scss b/src/widgets/Product/Product.module.scss
index 0fafb20d..6b3e9a50 100644
--- a/src/widgets/Product/Product.module.scss
+++ b/src/widgets/Product/Product.module.scss
@@ -110,4 +110,8 @@
       min-width: 80px;
     }
   }
+
+  &__icon {
+    fill: var.$white;
+  }
 }
diff --git a/src/widgets/Product/Product.tsx b/src/widgets/Product/Product.tsx
index 119e96c1..fa829775 100644
--- a/src/widgets/Product/Product.tsx
+++ b/src/widgets/Product/Product.tsx
@@ -62,7 +62,7 @@ export const Product: FC<TProductProps> = ({ product }) => {
                 size={ButtonSize.S}
                 onClick={handleAddToCart}>
                 {isInCart ? 'Перейти в корзину' : 'Купить'}
-                <IconCart />
+                <IconCart className={styles.product__icon} />
               </Button>
               <Button
                 className={styles.product__btnquick}
diff --git a/src/widgets/ProductItem/CardPreview/CardPreview.module.scss b/src/widgets/ProductItem/CardPreview/CardPreview.module.scss
index 78dad8d1..b76a7f04 100644
--- a/src/widgets/ProductItem/CardPreview/CardPreview.module.scss
+++ b/src/widgets/ProductItem/CardPreview/CardPreview.module.scss
@@ -64,3 +64,7 @@
     height: 20px;
   }
 }
+
+.icon {
+  fill: var.$white;
+}
diff --git a/src/widgets/ProductItem/CardPreview/CardPreview.tsx b/src/widgets/ProductItem/CardPreview/CardPreview.tsx
index e129b46e..debd5f7a 100644
--- a/src/widgets/ProductItem/CardPreview/CardPreview.tsx
+++ b/src/widgets/ProductItem/CardPreview/CardPreview.tsx
@@ -141,7 +141,7 @@ export const CardPreview: FC<Props> = ({
                 onClick={handleAddToCart}
                 className={styles.customButton}>
                 {isInCart ? 'Перейти в корзину' : 'Купить'}
-                <IconCart />
+                <IconCart className={styles.icon} />
               </Button>
               <Button theme={ButtonTheme.SECONDARY} size={ButtonSize.S} onClick={handleQuickPurchase}>
                 Быстрый заказ