Merge pull request #392 from Studio-Yandex-Practicum/enhancement_377_…

…login_form_adaptive_new

enhancement_377_login_form_adaptive_new

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') {

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;
+  }
 }

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

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,18 +23,24 @@
   }
 }
 
+.heading {
+  padding-bottom: 20px;
+}
+
 .span {
   color: var.$promo-color;
   font-weight: 100;
 }
 
 .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;
+}

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 = {}

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}

src/widgets/Product/Product.module.scss

@@ -110,4 +110,8 @@
       min-width: 80px;
     }
   }
+
+  &__icon {
+    fill: var.$white;
+  }
 }

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}

src/widgets/ProductItem/CardPreview/CardPreview.module.scss

@@ -64,3 +64,7 @@
     height: 20px;
   }
 }
+
+.icon {
+  fill: var.$white;
+}

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}>
                 Быстрый заказ