🎨 styles: hover effect in header

:%s

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/styles/_utilities.scss

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