diff --git a/src/components/Header/HeaderModal/HeaderModal.jsx b/src/components/Header/HeaderModal/HeaderModal.jsx index 720162f..6847720 100644 --- 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 = () => { - {t('logOut')} + + {t('logOut')} + + + + {t('doYouReallyWantToLeave')} diff --git a/src/components/Header/HeaderModal/HeaderModalStyled.jsx b/src/components/Header/HeaderModal/HeaderModalStyled.jsx index 53225a1..1fb2af8 100644 --- 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; +`;