diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index 2832211c1..eaaabca70 100644
--- 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;
+ }
+ }
+ }
}
}
}
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index aa962605d..05e0b38fa 100644
--- 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) => {
-
diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss
index ae5b76c3d..5332794ff 100644
--- 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;
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index bedb993f4..b1059a441 100644
--- 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'
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
index d03dbc39e..66ec1f8a4 100644
--- 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'
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss
index 507558cad..fdba411c0 100644
--- 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;
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx
index 2a3a632fb..18432ec82 100644
--- 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 (
+
+
+
Freshness
guaranteed
@@ -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",
}
- ]
+ ]
}
/>
diff --git a/src/components/modules/home/HomeBanner/assets/banner_product.png b/src/components/modules/home/HomeBanner/assets/banner_product.png
deleted file mode 100644
index 82f1b7fee..000000000
Binary files a/src/components/modules/home/HomeBanner/assets/banner_product.png and /dev/null differ
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index cc13ea3cf..6b919de76 100644
--- 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;
}