From ea78c3aa452b69c3d9d1d13717d7a97a12f7f2cd Mon Sep 17 00:00:00 2001
From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com>
Date: Sat, 1 Jun 2024 19:50:30 -0700
Subject: [PATCH] fix: fix theme slider breakpoints

---
 src/app/components/Navbar/Navbar.scss         |  2 +-
 .../Overview/PastProjects/PastProjects.scss   |  2 +-
 .../components/Testimonial/Testimonial.scss   |  2 +-
 .../components/ThemesSlider/ThemesSlider.scss | 20 ++++++++++++++++++-
 .../components/ThemesSlider/ThemesSlider.tsx  |  6 ++++++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
index 4efe594..c70fb06 100644
--- a/src/app/components/Navbar/Navbar.scss
+++ b/src/app/components/Navbar/Navbar.scss
@@ -24,7 +24,7 @@ nav {
     padding-block: $main-padding-mobile-block;
     width: 100vw;
     max-width: 400px;
-    background: rgb(255, 255, 255);
+    background: #fcfcfc;
     height: 100dvh;
     display: flex;
     flex-direction: column;
diff --git a/src/app/components/Overview/PastProjects/PastProjects.scss b/src/app/components/Overview/PastProjects/PastProjects.scss
index a8cbd67..f2f691f 100644
--- a/src/app/components/Overview/PastProjects/PastProjects.scss
+++ b/src/app/components/Overview/PastProjects/PastProjects.scss
@@ -25,7 +25,7 @@
           transition:
             background-color 0.3s,
             border-color 0.3s;
-          border: 2px solid $primary-black;
+          border: 1px solid $primary-black;
           background-color: $primary-black;
           border-radius: 4px;
           padding-block: 4px;
diff --git a/src/app/components/Testimonial/Testimonial.scss b/src/app/components/Testimonial/Testimonial.scss
index 9a4d1d5..23dc966 100644
--- a/src/app/components/Testimonial/Testimonial.scss
+++ b/src/app/components/Testimonial/Testimonial.scss
@@ -44,7 +44,7 @@
   }
 
   .testimonials-modal-button {
-    border: 2px solid $primary-black;
+    border: 1px solid $primary-black;
     text-transform: uppercase;
     font-family: $p-font;
     font-size: $h3-size;
diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
index 58cd9ef..565fbc9 100644
--- a/src/app/components/ThemesSlider/ThemesSlider.scss
+++ b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -9,6 +9,12 @@
     rgba(252, 252, 252, 0) 78.04%,
     $primary-white 100%
   );
+  $right-hide-slides-gradient: linear-gradient(
+    90deg,
+    rgba(252, 252, 252, 0) 0%,
+    rgba(252, 252, 252, 0) 78.04%,
+    $primary-white 100%
+  );
 
   border: 1px solid $outline-gray;
 
@@ -54,7 +60,7 @@
     .keen-slider::before {
       content: '';
       z-index: 1;
-      width: calc(100vw - 2 * clamp(50px, 25px + 1.8vw, 80px));
+      width: 100%;
       height: 100%;
       display: block;
       position: absolute;
@@ -69,6 +75,18 @@
     }
   }
 
+  @media ($mobile-breakpoint < width < 1400px) {
+    .keen-slider::before {
+      content: '';
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      background: $right-hide-slides-gradient;
+    }
+  }
+
   @media (min-width: $tablet-breakpoint) {
     height: 100%;
 
diff --git a/src/app/components/ThemesSlider/ThemesSlider.tsx b/src/app/components/ThemesSlider/ThemesSlider.tsx
index 1b1915d..1fdbc65 100644
--- a/src/app/components/ThemesSlider/ThemesSlider.tsx
+++ b/src/app/components/ThemesSlider/ThemesSlider.tsx
@@ -34,6 +34,12 @@ export default function ThemesSlider({
         slides: { origin: 'center', perView: 1.5, spacing: 10 }
       },
       '(min-width: 979px)': {
+        slides: { perView: 1.5, spacing: 10 }
+      },
+      '(min-width: 1200px)': {
+        slides: { perView: 2.5, spacing: 20 }
+      },
+      '(min-width: 1400px)': {
         slides: { perView: 3, spacing: 20 }
       }
     },