From d9f7860e351dd503d093f05055a7b4bff9c54a2a Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 15:13:45 +0700
Subject: [PATCH] Refactor code

---
 practice/practice-02/src/layouts/nav-menu.pug |  4 +-
 practice/practice-02/src/layouts/welcome.pug  |  2 +-
 .../src/styles/abstracts/_mixins.scss         | 39 ++++++++-----------
 .../practice-02/src/styles/bases/_base.scss   |  4 +-
 .../src/styles/components/_card-item.scss     | 11 ++++--
 .../src/styles/layouts/_header.scss           |  5 ++-
 .../src/styles/layouts/_navbar.scss           |  7 +++-
 .../src/styles/layouts/_offer.scss            | 18 +++------
 .../src/styles/layouts/_welcome.scss          | 27 +++++++------
 9 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/practice/practice-02/src/layouts/nav-menu.pug b/practice/practice-02/src/layouts/nav-menu.pug
index 5ffe22f..fad3302 100644
--- a/practice/practice-02/src/layouts/nav-menu.pug
+++ b/practice/practice-02/src/layouts/nav-menu.pug
@@ -6,5 +6,5 @@ nav.nav
   ul.nav-list
     each val in list
       li.nav-item
-        a.nav-link.no-underline(href="javascript:void(0)")= val
-a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
+        a.nav-link.link-text(href="javascript:void(0)")= val
+a.btn.nav-download-btn(href="javascript:void(0)") Download App
diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug
index f23e2f7..641ae51 100644
--- a/practice/practice-02/src/layouts/welcome.pug
+++ b/practice/practice-02/src/layouts/welcome.pug
@@ -83,7 +83,7 @@ section.welcome
           )
       .welcome__action-container
         a.welcome__download-btn.btn(href="javascript:void(0)") Download App
-        a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
+        a.welcome__watch-video-link.link-text(href="javascript:void(0)")
           .welcome__play-icon-wrapper
             svg.welcome__play-icon(
               width="12",
diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index ea14f18..0e26832 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -14,32 +14,27 @@
   right: 0;
 }
 
-@mixin flex-container(
-  $flex: false,
-  $justify-content: null,
-  $flex-direction: null,
-  $align-items: null,
-  $gap: null
-) {
-  @if $flex != false {
-    display: flex;
-  }
+@mixin d-flex {
+  display: flex;
+}
 
-  @if $justify-content != null {
-    justify-content: $justify-content;
-  }
+@mixin flex-justify-center-col {
+  @include d-flex;
 
-  @if $flex-direction != null {
-    flex-direction: $flex-direction;
-  }
+  justify-content: center;
+  flex-direction: column;
+}
 
-  @if $align-items != null {
-    align-items: $align-items;
-  }
+@mixin flex-align-center {
+  @include d-flex;
 
-  @if $gap != null {
-    gap: $gap;
-  }
+  align-items: center;
+}
+
+@mixin flex-between {
+  @include d-flex;
+
+  justify-content: space-between;
 }
 
 @mixin size($width: null, $height: null) {
diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss
index 0be5e68..2652adf 100644
--- a/practice/practice-02/src/styles/bases/_base.scss
+++ b/practice/practice-02/src/styles/bases/_base.scss
@@ -1,4 +1,6 @@
-.no-underline {
+.link-text {
+  font-size: $fs-md;
+  color: $black;
   text-decoration: none;
 }
 
diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
index 899d44f..23026f7 100644
--- a/practice/practice-02/src/styles/components/_card-item.scss
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -1,7 +1,8 @@
 .card-item {
-  @include flex-container(true, $align-items: center, $flex-direction: column);
+  @include flex-align-center;
   @include size(auto, 516px);
 
+  flex-direction: column;
   position: relative;
 }
 
@@ -27,11 +28,15 @@
 .content-card {
   @include set-absolute-and-location(true, $bottom: 60px);
   @include size(100%, auto);
-  @include flex-container(true, $align-items: center, $flex-direction: column);
+  @include flex-align-center;
+
+  flex-direction: column;
 }
 
 .rate {
-  @include flex-container(true, $align-items: center, $gap: 10px);
+  @include flex-align-center;
+
+  gap: 10px;
 }
 
 .avatar-container {
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 7bf1d7c..7f557ab 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -11,8 +11,9 @@
 }
 
 .header-container {
-  @include flex-container(true, space-between, $align-items: center);
+  @include flex-align-center;
 
+  justify-content: space-between;
   position: relative;
   max-width: 428px;
   min-width: $min-width;
@@ -21,7 +22,7 @@
 }
 
 .header-content {
-  @include flex-container(true, space-between);
+  @include flex-between;
 }
 
 @media screen and (min-width: 840px) {
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index 3194837..6c0c48b 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -53,12 +53,14 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(true, space-between, column);
+    @include flex-between;
 
+    flex-direction: column;
+    gap: 10px;
     position: unset;
     flex-direction: row;
     border: none;
-    max-width: 600px;
+    max-width: 660px;
     margin: unset;
     background-color: transparent;
   }
@@ -66,6 +68,7 @@
   .nav-item {
     border-bottom: none;
     padding: 0;
+    text-align: center;
 
     &:hover {
       background-color: unset;
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index f29aa7c..ef7e81a 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -4,11 +4,7 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container(
-      true,
-      $justify-content: center,
-      $flex-direction: column
-    );
+    @include flex-justify-center-col;
 
     max-width: 380px;
     margin: auto;
@@ -40,8 +36,9 @@
   }
 
   &__card-list {
-    @include flex-container(true, $gap: 70px);
+    @include d-flex;
 
+    gap: 70px;
     padding-inline: 35px;
     flex-wrap: nowrap;
     padding-top: 65px;
@@ -70,12 +67,9 @@
     }
 
     &__card-list {
-      @include flex-container(
-        $align-items: center,
-        $gap: 18px,
-        $justify-content: center
-      );
-
+      align-items: center;
+      gap: 18px;
+      justify-content: center;
       row-gap: 30px;
       flex-wrap: wrap;
     }
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index 81d5d11..c1ba8de 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -11,7 +11,7 @@
   );
 
   &__container {
-    @include flex-container(true, center, column);
+    @include flex-justify-center-col;
 
     margin: auto;
     max-width: 428px;
@@ -20,7 +20,7 @@
   // Start banner
   &__banner-container {
     @include size(428px, auto);
-    @include flex-container(true, center, column);
+    @include flex-justify-center-col;
 
     position: relative;
   }
@@ -55,9 +55,10 @@
 
   // Start content
   &__content {
-    @include flex-container(true, $flex-direction: column);
+    @include d-flex;
     @include size(calc(428px - 48px), auto);
 
+    flex-direction: column;
     position: relative;
     padding-top: 63.37px;
     padding-inline: 24px;
@@ -72,9 +73,10 @@
   }
 
   &__text-box {
-    @include flex-container(true, $align-items: center, $gap: 6px);
+    @include flex-align-center;
     @include size(fit-content);
 
+    gap: 6px;
     background-color: #feeae9;
     border-radius: 100px;
     padding: 6px;
@@ -123,7 +125,7 @@
   }
 
   &__search-form {
-    @include flex-container(true);
+    @include d-flex;
 
     margin-top: 32px;
     border-radius: 100px;
@@ -165,7 +167,7 @@
   }
 
   &__action-container {
-    @include flex-container(true, $justify-content: space-between);
+    @include flex-between;
 
     width: 100%;
     margin-top: 44px;
@@ -173,10 +175,10 @@
   }
 
   &__watch-video-link {
-    @include flex-container(true, $align-items: center, $gap: 21px);
+    @include flex-align-center;
 
     position: relative;
-
+    gap: 21px;
     &:hover {
       .welcome__play-icon-wrapper {
         transform: scale(1.2);
@@ -232,12 +234,9 @@
 @media screen and (min-width: 840px) {
   .welcome {
     &__container {
-      @include flex-container(
-        $flex-direction: row-reverse,
-        $align-items: center,
-        $justify-content: space-between
-      );
-
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: space-between;
       padding-top: 130px;
       width: 100%;
       max-width: $max-width;