From 4d3ba63eaf0c719d3540e00e064cb27bbfa463c1 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 25 Aug 2021 11:25:39 +0700
Subject: [PATCH] :art: styles: complete header hight light

:%s
---
 .../HeaderHighLight/HeaderHighLight.module.scss   | 15 +++++++++++++--
 .../HeaderHighLight/HeaderHighLight.tsx           |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
index e6cbbbc96..782139f9c 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -1,8 +1,19 @@
 @import "../../../../../styles/utilities";
 
 .headerHighLight {
-    @apply flex justify-between items-center spacing-horizontal bg-primary;
+    @apply flex justify-between items-center spacing-horizontal bg-primary caption;
     padding-top: 0.8rem;
     padding-bottom: 0.8rem;
-    
+    color: var(--white);
+    .menu {
+        @apply flex items-center list-none;
+        li {
+            &:not(:last-child) {
+                margin-right: 3.2rem;
+            }
+            a {
+                @appy no-underline;
+            }
+        }
+    }
 }
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
index 9dd2184f1..687b906d1 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
@@ -29,7 +29,7 @@ const HeaderHighLight = memo(({ }: Props) => {
             <div>
                 Free Shipping on order $49+ / Express $99+
             </div>
-            <div className="menu">
+            <ul className={s.menu}>
                 {
                     MENU.map(item => <li key={item.name}>
                         <Link href={item.link}>
@@ -40,7 +40,7 @@ const HeaderHighLight = memo(({ }: Props) => {
 
                     </li>)
                 }
-            </div>
+            </ul>
         </section>
     )
 })