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/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; }