Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m6-quangnhan

2025-07-21 03:41:22 +00:00 · 2021-09-08 16:07:09 +07:00 · 2021-09-08 16:07:09 +07:00 · b517ae69d6
commit b517ae69d6
parent 1b4a882d64 03a3e8c24f
12 changed files with 60 additions and 33 deletions
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/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;
+                        }
+                    }
+                }
            }
        }
    }
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/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>
--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/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;
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/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'
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/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'
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@ -2,6 +2,11 @@

 .select {
    background-color: var(--white);
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
    &.base {
        width: 20.6rem;
        .selectTrigger {
@ -19,7 +24,7 @@
    &.default {
        .selectTrigger {
            @apply border-solid border border-current;
-        }   
+        }
    }
    &.custom {
        .selectTrigger {
@ -34,13 +39,17 @@
            @apply block;
            animation: SelectAnimation 0.2s ease-out;
        }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
    }
 }
 .selectTrigger {
    @apply outline-none flex justify-between;
    color: var(--text-active);
    border-radius: 0.8rem;
-
 }
 .hoverWrapper {
    @apply hidden outline-none absolute z-10;
@ -56,7 +65,7 @@
            width: 34.25rem;
        }
        &.default {
-            @apply border-solid border border-current; 
+            @apply border-solid border border-current;
        }
        &.custom {
            @apply border-2;
@ -69,7 +78,6 @@
    }
 }

-
@keyframes SelectAnimation {
    0% {
        opacity: 0;
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@ -44,7 +44,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
                    >   
                        {
                            option.map(item => 
-                                <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
                            )
                        }
                    </div>
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@ -13,6 +13,7 @@
    }
    &:hover{
        background-color: var(--gray);
+        color: var(--primary);
    }
    &.isChoose{
        background-color: var(--gray);
--- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss
+++ b/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;
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/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 >
--- a/src/components/modules/home/HomeBanner/assets/banner_product.png
+++ b/src/components/modules/home/HomeBanner/assets/banner_product.png
--- a/src/styles/_utilities.scss
+++ b/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;
                    }