From a82faf709eea73a2a8cc083da46aae2c10d9e9ad Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 09:26:48 +0700
Subject: [PATCH] Fix style for offers UI

---
 .../src/styles/abstracts/_mixins.scss         |  6 +++++-
 .../src/styles/components/_card-item.scss     | 14 ++++++-------
 .../src/styles/layouts/_header.scss           |  4 ++--
 .../src/styles/layouts/_navbar.scss           |  2 +-
 .../src/styles/layouts/_offer.scss            | 21 ++++++++-----------
 5 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index d5f760d..9771080 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -15,12 +15,16 @@
 }
 
 @mixin flex-container(
+  $flex: false,
   $justify-content: null,
   $flex-direction: null,
   $align-items: null,
   $gap: null
 ) {
-  display: flex;
+  @if $flex != false {
+    display: flex;
+  }
+
   @if $justify-content != null {
     justify-content: $justify-content;
   }
diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
index 2c99b45..a60ea48 100644
--- a/practice/practice-02/src/styles/components/_card-item.scss
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -1,5 +1,5 @@
 .card-item {
-  @include flex-container($align-items: center, $flex-direction: column);
+  @include flex-container(true, $align-items: center, $flex-direction: column);
   @include size(auto, 516px);
 
   position: relative;
@@ -12,7 +12,7 @@
 }
 
 .price {
-  @include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
+  @include setAbsoluteAndLocation(true, $top: 176px, $right: 70px);
   @include size(52px, 52px);
 
   color: $white;
@@ -27,11 +27,11 @@
 .content-card {
   @include setAbsoluteAndLocation(true, $bottom: 60px);
   @include size(100%, auto);
-  @include flex-container($align-items: center, $flex-direction: column);
+  @include flex-container(true, $align-items: center, $flex-direction: column);
 }
 
 .rate {
-  @include flex-container($align-items: center, $gap: 10px);
+  @include flex-container(true, $align-items: center, $gap: 10px);
 }
 
 .avatar-container {
@@ -40,17 +40,17 @@
 }
 
 .avatar {
-  &-1 {
+  &-0 {
     @include setAbsoluteAndLocation(true, $left: 38px);
     z-index: 2;
   }
 
-  &-2 {
+  &-1 {
     @include setAbsoluteAndLocation(true, $left: 19px);
     z-index: 1;
   }
 
-  &-3 {
+  &-2 {
     @include setAbsoluteAndLocation(true, $left: 0);
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 388638b..528e34d 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -11,7 +11,7 @@
 }
 
 .header-container {
-  @include flex-container(space-between, $align-items: center);
+  @include flex-container(true, space-between, $align-items: center);
 
   position: relative;
   max-width: 428px;
@@ -21,7 +21,7 @@
 }
 
 .header-content {
-  @include flex-container(space-between);
+  @include flex-container(true, space-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 d349b76..3194837 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -53,7 +53,7 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(space-between, column);
+    @include flex-container(true, space-between, column);
 
     position: unset;
     flex-direction: row;
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index 797bd3d..a797e66 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -4,7 +4,11 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container($justify-content: center, $flex-direction: column);
+    @include flex-container(
+      true,
+      $justify-content: center,
+      $flex-direction: column
+    );
 
     max-width: 380px;
     margin: auto;
@@ -36,10 +40,11 @@
   }
 
   &__card-list {
-    display: grid;
+    @include flex-container(true, $gap: 70px);
+
+    padding-inline: 35px;
+    flex-wrap: nowrap;
     padding-top: 65px;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -72,14 +77,6 @@
       flex-wrap: wrap;
     }
   }
-
-  .price {
-    @include setAbsoluteAndLocation($top: 176px, $right: 70px);
-  }
-
-  .food-image {
-    @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-  }
 }
 
 @media screen and (min-width: 1200px) {