fix-3 enhancement_347_header_mobile_menu_modal

Studio-Yandex-Practicum · May 12, 2024 · 5ffae19 · 5ffae19
1 parent bceb16e
commit 5ffae19
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 16 deletions.
diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx
@@ -54,6 +54,10 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ isMenuModalOpen, handleClose, c
     dispatch(loginActions.errorReset())
   }
 
+  const closeModal = () => {
+    setIsModalClosing(true)
+  }
+
   const onLogout = () => {
     dispatch(logout())
   }
@@ -73,7 +77,7 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ isMenuModalOpen, handleClose, c
           isModalClosing={isModalClosing}
           setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
-            <LazyLoginForm />
+            <LazyLoginForm isModalOpen={isModalOpen} handleClose={closeModal} />
           </Suspense>
         </Modal>
       )}

diff --git a/src/features/CallBack/ui/CallBack/CallBack.module.scss b/src/features/CallBack/ui/CallBack/CallBack.module.scss
@@ -1,4 +1,4 @@
-@use '../../../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
 
 .form {
   position: relative;
@@ -27,18 +27,14 @@
   padding: 0;
   border: none;
   cursor: pointer;
+}
 
-  path {
-    width: 100%;
-    height: 100%;
-    fill: var.$black;
-    transition: fill 300ms;
-  }
+.close-icon {
+  fill: var.$body-color;
+  transition: 0.25s;
 
   &:hover {
-    path {
-      fill: var.$theme-primary-color;
-    }
+    fill: var.$header-color;
   }
 }
 

diff --git a/src/features/CallBack/ui/CallBack/CallBack.tsx b/src/features/CallBack/ui/CallBack/CallBack.tsx
@@ -1,7 +1,7 @@
 import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
 import React, { useCallback } from 'react'
 
-import IconClose from '@/assets/icons/IconClose.svg'
+import IconClose from '@/assets/icons/iconHeaderMenuClose.svg'
 import { CallBackData } from '@/features/CallBack/models/types/types'
 import { validationSchema } from '@/features/CallBack/models/validation/validation'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
@@ -51,7 +51,7 @@ export const CallBack: React.FC<CallBackProps> = ({ setIsModalClosing }) => {
       {({ isValid, dirty, isSubmitting }) => (
         <Form className={styles.form}>
           <Button className={styles['cross-button']} onClick={handleClose}>
-            <IconClose viewBox="0 0 34 34" />
+            <IconClose className={styles['close-icon']} />
           </Button>
           <Heading className={styles.heading}>Заказать обратный звонок</Heading>
           <Label htmlFor="name">

diff --git a/src/features/login/ui/LoginForm/LoginForm.module.scss b/src/features/login/ui/LoginForm/LoginForm.module.scss
@@ -61,3 +61,23 @@
 .button {
   width: 100%;
 }
+
+.closeButton {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.closeIcon {
+  fill: var.$body-color;
+  transition: 0.25s;
+
+  &:hover {
+    fill: var.$header-color;
+  }
+}
diff --git a/src/features/login/ui/LoginForm/LoginForm.tsx b/src/features/login/ui/LoginForm/LoginForm.tsx
@@ -1,6 +1,8 @@
 import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
+import { FC } from 'react'
 import { useSelector } from 'react-redux'
 
+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'
@@ -17,11 +19,18 @@ import styles from './LoginForm.module.scss'
 
 export interface LoginFormProps {
   onLogin?: VoidFunction
+  isModalOpen?: boolean
+  handleClose?: () => void
 }
+
 /**
  * Форма авторизации пользователя
+ * @param {boolean} isModalOpen - состояние открытия модального окна;
+ * @param {function} handleClose - функция закрытия модального окна;
+ * @param {function} onLogin - функция перенаправления по роуту;
  */
-export default function LoginForm({ onLogin }: LoginFormProps) {
+
+const LoginForm: FC<LoginFormProps> = ({ isModalOpen, handleClose, onLogin }) => {
   const initialValues: LoginAuthData = {
     email: '',
     password: ''
@@ -44,6 +53,11 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
       validateOnBlur={true}>
       {({ isValid, dirty, isSubmitting }) => (
         <Form className={styles.form}>
+          {isModalOpen && (
+            <Button className={styles.closeButton} onClick={handleClose}>
+              <IconClose className={styles.closeIcon} />
+            </Button>
+          )}
           <Heading>Авторизация</Heading>
           <label htmlFor="email" className={styles.label}>
             Электронная почта
@@ -92,3 +106,5 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
     </Formik>
   )
 }
+
+export default LoginForm
diff --git a/src/pages/FormReturnPage/FormReturnPage.tsx b/src/pages/FormReturnPage/FormReturnPage.tsx
@@ -36,6 +36,10 @@ const FormReturnPage: FC = () => {
     setIsModalOpen(true)
   }
 
+  const closeModal = () => {
+    setIsModalClosing(true)
+  }
+
   const handleLogOut = () => {
     setUser('')
   }
@@ -57,7 +61,7 @@ const FormReturnPage: FC = () => {
           setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
             <SideBarMenuModal
-              handleClose={changeModalState}
+              handleClose={closeModal}
               onKeyUp={handleKeyUp}
               handleLogOut={handleLogOut}
               user={user}

diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
@@ -67,6 +67,10 @@ function Header() {
     setIsMenuModalOpen(!isMenuModalOpen)
   }
 
+  const closeModal = () => {
+    setIsModalClosing(true)
+  }
+
   const aboutUsNode = useMemo(
     () => (
       <ul className={styles.header__contextMenuList}>
@@ -154,7 +158,7 @@ function Header() {
               categories={categories}
               phoneNumber={phoneNumber}
               isMenuModalOpen={isMenuModalOpen}
-              handleClose={changeMenuModalState}
+              handleClose={closeModal}
             />
           </Suspense>
         </Modal>