fix: fix various bugs

ucsddesignco · Jun 3, 2024 · 0004b89 · 0004b89
1 parent 472ef7b
commit 0004b89
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 45 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -12,7 +12,7 @@
 
     //For extremely large screen sizes
 
-    @media (min-width: $tablet-breakpoint) {
+    @media (min-width: $desktop-breakpoint) {
       scroll-behavior: smooth;
       display: grid;
       scroll-snap-type: y mandatory;
@@ -54,6 +54,7 @@
       @media (min-width: $mobile-breakpoint) {
         padding-inline: $main-padding-tablet-inline;
       }
+
       @media (min-width: $tablet-breakpoint) {
         padding-block: $main-padding-desktop-block;
         padding-inline: $main-padding-desktop-inline;
@@ -63,7 +64,7 @@
         }
       }
 
-      @media (min-width: $tablet-breakpoint) {
+      @media (min-width: $desktop-breakpoint) {
         height: 100vh;
       }
     }

diff --git a/src/app/components/Fruits/Fruits.tsx b/src/app/components/Fruits/Fruits.tsx
@@ -76,7 +76,7 @@ export default function Fruits() {
         friction: 0, // Adjust this value, 0 means no friction
         restitution: 0.1,
         render: {
-          fillStyle: 'red'
+          fillStyle: 'transparent'
         }
       }
     );
@@ -91,15 +91,18 @@ export default function Fruits() {
         friction: 0, // Adjust this value, 0 means no friction
         restitution: 0.1,
         render: {
-          fillStyle: 'red'
+          fillStyle: 'transparent'
         }
       }
     );
+
+    const desktopBasket = document.querySelector('.fruits-basket');
+    console.log(desktopBasket);
     const leftSlant = Bodies.rectangle(
       -5 - barrierWidth / 2,
       height / 2,
       barrierWidth,
-      height * 5,
+      height * 6,
       {
         isStatic: true,
         frictionStatic: 0,
@@ -114,7 +117,7 @@ export default function Fruits() {
       width + barrierWidth / 2 + 5,
       height / 2,
       barrierWidth,
-      height * 5,
+      height * 6,
       {
         isStatic: true,
         frictionStatic: 0,

diff --git a/src/app/components/Overview/Expectations/Expectations.scss b/src/app/components/Overview/Expectations/Expectations.scss
@@ -18,10 +18,6 @@
       justify-content: space-between;
     }
 
-    @media (min-width: $tablet-breakpoint) {
-      padding-bottom: 0;
-    }
-
     @media (min-width: 1250px) {
       display: flex;
       flex-direction: row;

diff --git a/src/app/components/Testimonial/hooks/useHandleSlideSize.tsx b/src/app/components/Testimonial/hooks/useHandleSlideSize.tsx
@@ -35,11 +35,17 @@ export const useHandleSlideSize = ({
       modalButton.style.opacity = '1';
       return;
     }
+
     if (window.innerWidth < 550) {
       newPerView = 1;
       sliderContainer.classList.add('hide-both');
+    } else if (sliderRect.height < 180 || sliderRect.width < 800) {
+      newPerView = 2;
+      currentSliderBg.classList.add('not-center');
+      currentSliderBg.style.width = `calc(${(1 / newPerView) * 100}% - 1rem)`;
+      sliderContainer.classList.add('hide-left');
     } else if (
-      (sliderRect.height < 180 && sliderRect.width < 1200) ||
+      (sliderRect.height < 200 && sliderRect.width < 1200) ||
       (sliderRect.width < 650 && sliderRect.width > 550)
     ) {
       newPerView = 1.5;
@@ -50,11 +56,6 @@ export const useHandleSlideSize = ({
       newPerView = 1;
       currentSliderBg.style.width = `calc(${(1 / newPerView) * 100}% - 2rem)`;
       sliderContainer.classList.add('hide-both');
-    } else if (sliderRect.height < 180 || sliderRect.width < 800) {
-      newPerView = 2;
-      currentSliderBg.classList.add('not-center');
-      currentSliderBg.style.width = `calc(${(1 / newPerView) * 100}% - 1rem)`;
-      sliderContainer.classList.add('hide-left');
     } else if (sliderRect.height < 200) {
       newPerView = 2.5;
       currentSliderBg.classList.add('not-center');

diff --git a/src/app/components/TestimonialModal/TestimonialModal.tsx b/src/app/components/TestimonialModal/TestimonialModal.tsx
@@ -40,7 +40,9 @@ export default function TestimonialModal({
         onClick={() => setOpenModal(false)}
         className="modal-overlay"
         aria-hidden="true"
-        style={openModal ? { opacity: '1' } : {}}
+        style={
+          openModal ? { opacity: '1', display: 'block' } : { display: 'none' }
+        }
       ></div>
       <div
         ref={testimonialModalRef}

diff --git a/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss b/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss
@@ -2,18 +2,15 @@
   /* variables */
   $slide-margin: 20px;
 
-  margin: $slide-margin;
+  padding: $slide-margin;
   border: none;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  max-height: 575px;
-  min-height: 420px;
-
-  @media ($mobile-breakpoint < width < $tablet-breakpoint) {
-    min-height: 500px;
-  }
+  // max-height: 675px;
+  max-height: min(675px, 87%);
+  height: 100%;
 
   .top-section {
     h3 {

diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -18,20 +18,18 @@
 
   border: 1.5px solid $outline-gray;
 
+  @media ($mobile-breakpoint < width < $desktop-breakpoint) {
+    padding-top: 2.5rem;
+  }
+
   width: calc(100vw - 2 * $main-padding-mobile-inline);
-  padding: 0;
 
   .theme-slider-nav {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr;
   }
 
-  .theme-slide {
-    margin-bottom: 0;
-    margin-top: 2.5rem;
-  }
-
   .arrows {
     display: none;
   }
@@ -96,10 +94,6 @@
   @media (min-width: $tablet-breakpoint) {
     height: 100%;
 
-    .keen-slider {
-      height: calc(100% - 3rem);
-    }
-
     & {
       width: calc(
         100vw - clamp(250px, 200px + 11vw, 470px) - 2 *

diff --git a/src/app/components/ThemesSlider/ThemesSlider.tsx b/src/app/components/ThemesSlider/ThemesSlider.tsx
@@ -36,10 +36,10 @@ export default function ThemesSlider({
         slides: { origin: 'center', perView: 1.5, spacing: 0 }
       },
       '(min-width: 979px)': {
-        slides: { perView: 1.5, spacing: 10 }
+        slides: { origin: 'center', perView: 1.5, spacing: 10 }
       },
       '(min-width: 1200px)': {
-        slides: { perView: 2.5, spacing: 20 }
+        slides: { origin: 'center', perView: 2.5, spacing: 20 }
       },
       '(min-width: 1400px)': {
         slides: { perView: 3, spacing: 20 }

diff --git a/src/app/pages/Apply/Apply.tsx b/src/app/pages/Apply/Apply.tsx
@@ -6,7 +6,6 @@ import './Apply.scss';
 import { applyInfo } from './apply-info';
 import Testimonial from '@/components/Testimonial/Testimonial';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import TestimonialModal from '@/components/TestimonialModal/TestimonialModal';
 import Grape from '@/assets/stickers/grape.svg';
 import Yuzu from '@/assets/stickers/yuzu.svg';
 import Sticker from '@/components/Sticker/Sticker';
@@ -76,11 +75,11 @@ export default function Apply({ applyRef }: ApplyProps) {
         <Testimonial setOpenModal={setOpenModal} />
         <Footer />
       </div>
-      <TestimonialModal
+      {/* <TestimonialModal
         openModal={openModal}
         setOpenModal={setOpenModal}
         topOffsetRef={topOffsetRef}
-      />
+      /> */}
     </section>
   );
 }
diff --git a/src/app/pages/FAQ/FAQ.scss b/src/app/pages/FAQ/FAQ.scss
@@ -42,12 +42,12 @@
       align-items: baseline;
       justify-content: center;
       gap: 10%;
-      bottom: -5%;
+      bottom: 2.5%;
       width: calc(100% - 2 * $main-padding-desktop-inline);
       z-index: 2;
 
       .apricot {
-        transform: rotate(-10deg) translateX(20%);
+        transform: rotate(-10deg) translateX(40%);
 
         &#apricot-3 {
           height: 15%;

diff --git a/src/app/pages/FAQ/FAQ.tsx b/src/app/pages/FAQ/FAQ.tsx
@@ -19,7 +19,7 @@ export default function FAQ({ faqRef }: FAQProps) {
       <Sticker
         name="sustainability"
         image={<Sustainability />}
-        style={{ left: '35%', bottom: '30%' }}
+        style={{ right: '7%', top: '8%' }}
         hideMobile
       />
       <Sticker

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -1,6 +1,10 @@
 #landing {
   height: calc(100dvh + calc(clamp(20px, 30px + 1.2vw, 40px)));
 
+  @media (min-width: $tablet-breakpoint) {
+    height: 100vh;
+  }
+
   display: flex;
   flex-direction: column;
   justify-content: space-between;

diff --git a/src/app/pages/Themes/Themes.scss b/src/app/pages/Themes/Themes.scss
@@ -34,9 +34,9 @@
     }
 
     @media (min-width: $tablet-breakpoint) {
-      width: calc(130px + 6vw);
-      bottom: calc(10px - 5.5vw);
-      right: 20px;
+      width: calc(145px + 6.5vw);
+      bottom: calc(10px - 6vw);
+      right: -50px;
     }
   }
 }