Merge pull request #114 from Elizabethhub/dmytro-prymache-header-star…

…t-page фікс кнопки
Elizabethhub · Mar 26, 2024 · a494784 · a494784
2 parents 669d3fd + d81cbba
commit a494784
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/src/components/Header/HeaderModal/HeaderModal.jsx b/src/components/Header/HeaderModal/HeaderModal.jsx
@@ -15,8 +15,10 @@ import {
   HeaderModalLogOutContainer,
   SpanLogOut,
   SpanLogOutQuestion,
+  StyledCros,
   Test1,
   Test2,
+  Test3,
   UserIMG,
 } from './HeaderModalStyled';
 import SettingModal from '../../SettingModal/SettingModal';
@@ -32,6 +34,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useMediaQuery } from 'react-responsive';
 import DivSetting from '../../../language/languageSelectorComponent';
+import { StyledCross } from '../../ModalDailyNorma/ModalDailyNorma.styled';
+import SvgCross from '../../../images/svg/svgModal/SvgCross';
 
 const HeaderModal = () => {
   const { t } = useTranslation();
@@ -160,7 +164,15 @@ const HeaderModal = () => {
           <Backdrop onClick={LogOutHeaderModal} $visible={isBackdropVisible} />
           <Test2>
             <HeaderModalLogOutContainer $visible={isHeaderModalLogOut}>
-              <SpanLogOut>{t('logOut')}</SpanLogOut>
+              <Test3>
+                <SpanLogOut>{t('logOut')}</SpanLogOut>
+                <StyledCros
+                  onClick={LogOutHeaderModal}
+                  aria-label={t('closeWindow')}
+                >
+                  <SvgCross />
+                </StyledCros>
+              </Test3>
               <SpanLogOutQuestion>
                 {t('doYouReallyWantToLeave')}
               </SpanLogOutQuestion>

diff --git a/src/components/Header/HeaderModal/HeaderModalStyled.jsx b/src/components/Header/HeaderModal/HeaderModalStyled.jsx
@@ -337,3 +337,28 @@ export const Test1 = styled.div`
   visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};
 `;
 export const Test2 = styled.div``;
+
+export const StyledCros = styled.button`
+  background-color: transparent;
+  border: none;
+  outline: transparent;
+  transition: all 0.5s ease;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+  @media only screen and (min-width: 768px) {
+    top: 36px;
+    right: 24px;
+  }
+  @media only screen and (min-width: 1280px) {
+    top: 36px;
+    right: 24px;
+  }
+`;
+export const Test3 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;