Merge pull request #31 from KieIO/m5-lytran

M5: styles header, home page

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

@@ -42,7 +42,7 @@
         @apply hidden;
         @screen md {
             @apply flex items-center list-none;
-            li {
+            > li {
                 @apply flex justify-center items-center w-full;
                 &:not(:last-child) {
                     margin-right: 4.8rem;
@@ -53,7 +53,7 @@
                 a {
                     @appy no-underline;
                     &:hover {
-                        opacity: .8;
+                        opacity: 0.8;
                     }
                     &.iconFavourite {
                         svg path {
@@ -61,7 +61,14 @@
                         }
                     }
                 }
-
+                .btnCart {
+                    &:hover {
+                        svg path {
+                            fill: var(--primary);
+                            opacity: 0.8;
+                        }
+                    }
+                }
             }
         }
     }

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

@@ -68,7 +68,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
                     <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                 </li>
                 <li>
-                    <button>
+                    <button className={s.btnCart}>
                         <IconBuy />
                     </button>
                 </li>

src/components/common/MenuDropdown/MenuDropdown.module.scss

@@ -3,9 +3,6 @@
 .menuDropdown {
     @apply relative cursor-pointer;
     width: fit-content;
-    .label {
-        all: unset;
-    }
     &:hover {
         .label {
             color: var(--primary);
@@ -20,10 +17,21 @@
     }
 
     .label {
+        all: unset;
         @apply flex justify-end items-center transition-all duration-200;
         svg path {
             width: fit-content;
         }
+        &:focus,
+        &:active {
+            color: var(--primary);
+            svg path {
+                fill: currentColor;
+            }
+        }
+        &:focus-visible {
+            outline: 2px solid #000;
+        }
     }
 
     &.arrow {
@@ -66,18 +74,9 @@
             @apply rounded list-none bg-white;
             border: 1px solid var(--text-active);
             margin-top: 0.4rem;
-            li {
+            > li {
                 @apply block w-full transition-all duration-200 cursor-pointer text-active;
-                word-wrap: break-word;
-                -webkit-hyphens: auto;
-                -ms-hyphens: auto;
-                -moz-hyphens: auto;
-                hyphens: auto;
-                overflow-x: hidden;
-                position: relative;
-                max-width: 15rem;
                 white-space: nowrap;
-                text-overflow: ellipsis;
                 button {
                     all: unset;
                     color: currentColor;

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link'
 import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
-import InputPassword from 'src/components/common/InputPassword/InputPassword'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { CustomInputCommon } from 'src/utils/type.utils'
 import s from '../FormAuthen.module.scss'

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
 import s from '../FormAuthen.module.scss'
 import styles from './FormRegister.module.scss'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'

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

@@ -11,11 +11,19 @@
     @apply grid;
     grid-template-columns: 1fr 1.8fr;
     .left {
-      @apply flex items-end justify-center custom-border-radius-lg;
+      @apply relative flex items-end justify-center custom-border-radius-lg;
       margin-right: 1.6rem;
-      background-image: url('./assets/home_banner.png');
-      background-repeat: no-repeat;
-      background-size: cover;
+      .imgWrap {
+        @apply absolute w-full h-full;
+        top: 0;
+        left: 0;
+        > div {
+          @apply w-full h-full custom-border-radius-lg;
+        }
+        img {
+          object-fit: cover;
+        }
+      }
 
       .text {
         @apply relative font-heading text-center;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { Banner } from 'src/components/common'
-import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
-import BannerImgRight2 from './assets/banner_product.png'
+import HomeBannerImg from './assets/home_banner.png'
+import s from './HomeBanner.module.scss'
+import Image from 'next/image'
 
 interface Props {
     className?: string
@@ -13,6 +14,9 @@ const HomeBanner = ({ }: Props) => {
     return (
         <div className={s.homeBanner}>
             <section className={s.left}>
+                <div className={s.imgWrap}>
+                    <Image src={HomeBannerImg} placeholder='blur' />
+                </div>
                 <div className={s.text}>
                     Freshness<br />guaranteed
                 </div>
@@ -28,10 +32,10 @@ const HomeBanner = ({ }: Props) => {
                     {
                         title: "Save 15% on your first order 2",
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
-                        imgLink: BannerImgRight2.src,
+                        imgLink: BannerImgRight.src,
                         size: "small",
                     }
-                ]
+                    ]
                 }
             />
         </div >

src/styles/_utilities.scss

@@ -149,6 +149,7 @@
             .line {
                 @apply flex justify-between items-center;
                 > div {
+                    flex: 1;
                     &:not(:last-child) {
                         margin-right: 1.6rem;
                     }