Merge branch 'main' into 207-menu-button-color

Author: alishaevn

src/compounds/Header/Header.jsx

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
 import ToggleIcon from '../../assets/svg/ToggleIcon'
 import Logo from '../Logo/Logo'
+import './styles.scss'
 
 const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
 
   return (
     <Navbar bg='primary' expand='md'>
       <Container>
-        <Navbar.Brand className='w-50'>
-          <Logo src={src} alt={alt} height={45} />
+        <Navbar.Brand className='w-75 custom-navbar-brand'>
+          <Logo src={src} alt={alt} height='auto' addClass='mw-100 mh-100' />
         </Navbar.Brand>
         <Navbar.Toggle aria-controls='basic-navbar-nav'>
           <ToggleIcon linkColor={linkColor} />

src/compounds/Header/styles.scss

@@ -0,0 +1,3 @@
+.custom-navbar-brand {
+  height: 45px;
+}

src/compounds/ItemGroup/ItemGroup.jsx

@@ -9,7 +9,7 @@ import './item-group.scss'
 const ItemGroup = ({ buttonProps, items, isLoading, orientation, withButtonLink, withTitleLink }) => (
   <>
     <Title addClass='mb-2' size='large' title='Featured Services' />
-    <Row xs={1} sm={2} className={`g-5 mb-5 ${orientation === 'vertical' && 'row-cols-md-3'}`} data-cy='item-group'>
+    <Row xs={1} sm={2} className={`gy-5 mb-5 ${orientation === 'vertical' && 'row-cols-md-3'}`} data-cy='item-group'>
       {isLoading
         ? (
           <>