Bugfix/different maryna

src/components/Header/Header.jsx

@@ -5,6 +5,7 @@ import authSelectors from '../../redux/auth/authSelectors';
 import LogoutButton from '../LogoutButton';
 import Avatar from '../Avatar';
 import Logo from '../Logo';
+import Icon from '../Icon';
 import { openModalLogout } from '../../redux/globalSlice';
 import { ROUTES } from '../../utils/constants';
 import {
@@ -13,7 +14,6 @@ import {
  circleFont,
  size,
 } from '../../stylesheet/utils/stylesVars';
-import exit from '../../assets/images/svg/exit.svg';
 
 export default function Header({ children, onClick, ...props }) {
  const userName = useSelector(authSelectors.getUserName);
@@ -31,7 +31,9 @@ export default function Header({ children, onClick, ...props }) {
  <Media query="(min-width: 768px)" render={() => <Avatar />} />
  <UserName>{name || 'User'} </UserName>
  <LogoutButton type="button" onClick={handleClick}>
- <ExitIcon src={exit} />
+ <ExitIcon>
+ <Icon width="18px" height="18px" iconName="logout" />
+ </ExitIcon>
  <Media
  query="(min-width: 768px)"
  render={() => <span>Logout</span>}
@@ -61,23 +63,28 @@ const StyledHeader = styled.div`
 const UserInfo = styled.div`
  display: flex;
  justify-content: ${props => props.justify || 'center'};
- align-items: ${props => props.align || 'center'};
+ align-items: ${props => props.align || 'baseline'};
  font-family: ${circleFont};
  font-size: 18px;
- line-height: 1, 47;
+ line-height: 1.47;
  color: ${props => props.color || textPlcholderCl};
+ ${size.tablet} {
+ align-items: ${props => props.align || 'center'};
+ }
 `;
 
-const ExitIcon = styled.img`
- width: 18px;
- height: 18px;
- margin-right: ${props => props.mRight || '8px'};
+const ExitIcon = styled.div`
+ display: flex;
+ align-items: center;
+ ${size.tablet} {
+ margin-right: ${props => props.mRight || '8px'};
+ }
 `;
 
 const UserName = styled.p`
  color: ${textPlcholderCl};
  ${size.tablet} {
- padding: 6px 12px 6px 0;
+ padding-right: 12px;
  border-right: 1px solid ${textPlcholderCl};
  }
 `;

src/components/LogoutButton/LogoutButton.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import {
  textPlcholderCl,
  size,
- iconBgCl,
+ borderBtnCl,
+ timingFunc,
 } from '../../stylesheet/utils/stylesVars';
 
 export default function LogoutButton({ children, onClick, ...props }) {
@@ -16,23 +17,24 @@ const StyledLogoutBtn = styled.button`
  align-items: center;
  height: 28px;
  font-size: 18px;
- line-height: 1, 47;
+ line-height: 1.47;
  color: ${props => props.color || textPlcholderCl};
  background-color: transparent;
  border: none;
- padding-left: 12px;
+ padding-left: 8px;
+ transition: transform 0.25s ${timingFunc};
 
  ${size.tablet} {
  border: none;
  max-width: 100%;
- padding-right: 8px;
- padding-top: 4px;
- padding-bottom: 4px;
- height: 30px;
+ padding-left: 12px;
+ height: 24px;
  }
- &:hover {
- border-radius: 6px;
- box-shadow: inset 0px 0px 18px ${iconBgCl};
+ &:hover,
+ &:focus {
+ color: ${borderBtnCl};
+ stroke: ${borderBtnCl};
+ transform: scale(1.1);
  }
 `;
 

src/components/Modal/Modal.jsx

@@ -22,6 +22,7 @@ export default function Modal({
  width,
  padding,
  paddingTab,
+ color,
 }) {
  const dispatch = useDispatch();
 
@@ -47,7 +48,7 @@ export default function Modal({
  };
 
  return createPortal(
- <Overlay onClick={handleBackdropClick} height={height}>
+ <Overlay onClick={handleBackdropClick} height={height} color={color}>
  <Content
  heightContent={heightContent}
  width={width}
@@ -84,7 +85,7 @@ const Overlay = styled.div`
  bottom: 0;
  left: 0;
  width: 100vw;
- background-color: ${accentBgCl};
+ background-color: ${p => p.color || accentBgCl};
  height: ${p => p.height || 'calc(100vh - 60px)'};
  ${size.tablet} {
  height: 100vh;
@@ -138,4 +139,5 @@ Modal.propTypes = {
  width: PropTypes.string,
  padding: PropTypes.string,
  paddingTab: PropTypes.string,
+ color: PropTypes.string,
 };

src/components/ModalLogout/ModalLogout.jsx

@@ -12,6 +12,7 @@ import {
  accentTextCl,
  borderBtnCl,
  poppinsFont,
+ modalBgCl,
 } from '../../stylesheet/utils/stylesVars';
 import styled from 'styled-components';
 
@@ -37,9 +38,10 @@ export default function ModalLogout() {
  width="320px"
  padding="20px 10px"
  paddingTab="40px 73px"
+ color={modalBgCl}
  >
  <Wrapper>
- <Text>{name ?? 'User'} are you sure you want to log out?</Text>
+ <Text>{name ?? 'User'}, are you sure you want to log out?</Text>
  <ButtonWrap>
  <Button
  primary