Merge pull request #50 from KieIO/m7-lytran

M7 Ly: fix styles banner, header

src/components/common/Banner/Banner.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const option = {
     slidesPerView: 1,
-    breakpoints: {}
+    mode: 'free',
 }
 const Banner = memo(({ data }: Props) => {
     if (data.length === 1) {

src/components/common/Header/Header.module.scss

@@ -6,20 +6,28 @@
   left: 0;
   z-index: 9999;
   margin-bottom: 3.2rem;
-  @screen md {
+
-    @apply relative;
-  }
   &.full {
     @apply shadow-none;
-    border: 1px solid var(--border-line);
   }
   .menu {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     padding-left: 3.2rem;
     padding-right: 3.2rem;
   }
   .logo {
     @apply font-logo;
   }
+
+  @screen md {
+    @apply relative;
+    &.full {
+      border: 1px solid var(--border-line);
+    }
+    .menu {
+      @apply shadow-none;
+    }
+  }
 }
 
 .headerSticky {

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { memo, useMemo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
@@ -7,7 +7,6 @@ import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/compo
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
-import { useRouter } from 'next/router'
 interface Props {
     children?: any,
     openModalAuthen: () => void,
@@ -29,6 +28,10 @@ const HeaderMenu = memo(({ openModalAuthen, openModalInfo, toggleFilter, toggleC
             onClick: openModalInfo,
             name: 'Create User Info (Demo)',
         },
+        {
+            link: ROUTE.NOTIFICATION,
+            name: 'Notifications',
+        },
         {
             link: ROUTE.ACCOUNT,
             name: 'Account',

src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx

@@ -25,7 +25,7 @@ const OPTION_MENU = [
         isMarked: false,
     },
     {
-        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.NOTIFICATION}`,
+        link: ROUTE.NOTIFICATION,
         name: 'Notifications',
         icon: <IconNoti />,
         isMarked: true,

src/components/common/ScrollToTop/ScrollToTop.tsx

@@ -34,7 +34,7 @@ const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
 
     useEffect(() => {
         addEventScroll();
-    });    
+    }, []);    
 
     return (
         <div className={classNames(s.scrollToTop, {

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -31,11 +31,15 @@
         width: min-content;
 
         color: var(--white);
-        font-size: 8.8rem;
+        font-size: 7rem;
         line-height: 8rem;
         letter-spacing: -0.03em;
         font-weight: bold;
         text-transform: uppercase;
+
+        @screen 2xl {
+          line-height: 8rem;
+        }
         &::after {
           @apply absolute;
           content: "";

src/utils/constanst.utils.ts

@@ -21,6 +21,7 @@ export const ROUTE = {
     RECIPES: '/recipes',
     RECIPE_DETAIL: '/recipe',
 
+    NOTIFICATION: '/notification',
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     CHECKOUT: '/checkout',
@@ -35,7 +36,6 @@ export const ACCOUNT_TAB = {
     CUSTOMER_INFO: '',
     ORDER: 'orders',
     FAVOURITE: 'wishlist',
-    NOTIFICATION: 'notification',
 }
 
 export const QUERY_KEY = {