fix: styling fixes

ucsddesignco · Jun 3, 2024 · 70e64d6 · 70e64d6
1 parent 054bb2b
commit 70e64d6
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 23 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -42,7 +42,7 @@
         border: 1px solid $outline-gray;
         margin-block: $main-padding-mobile-block;
 
-        @media (min-width: $mobile-breakpoint) {
+        @media (min-width: $tablet-breakpoint) {
           display: none;
         }
       }
@@ -52,7 +52,6 @@
       }
 
       @media (min-width: $mobile-breakpoint) {
-        padding-block: $main-padding-tablet-block;
         padding-inline: $main-padding-tablet-inline;
       }
       @media (min-width: $tablet-breakpoint) {

diff --git a/src/app/components/Fruits/Fruits.scss b/src/app/components/Fruits/Fruits.scss
@@ -2,7 +2,9 @@
   svg {
     display: none;
   }
-  height: min(60dvh, 340px);
+  // height: min(60dvh, 340px);
+  height: 100%;
+  margin-bottom: 1rem;
   // width: calc(80dvw - 2 * $main-padding-mobile-inline);
   // margin-inline: auto;
   // margin-block: 2.5dvh;
@@ -16,6 +18,8 @@
     display: block;
     position: absolute;
     width: 100% !important;
+    margin-top: auto;
+    align-self: flex-end;
 
     @media (min-width: $tablet-breakpoint) {
       display: none;
@@ -27,6 +31,10 @@
     position: absolute;
     width: 100%;
 
+    path {
+      stroke-width: 5;
+    }
+
     @media (min-width: $tablet-breakpoint) {
       display: block;
     }

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: 'transparent'
+          fillStyle: 'red'
         }
       }
     );
@@ -91,7 +91,7 @@ export default function Fruits() {
         friction: 0, // Adjust this value, 0 means no friction
         restitution: 0.1,
         render: {
-          fillStyle: 'transparent'
+          fillStyle: 'red'
         }
       }
     );
@@ -464,7 +464,7 @@ export default function Fruits() {
       const cherryShape = createEllipseVertices({
         cx: 0,
         cy: 0,
-        ry: scene.current?.clientWidth * cherryScale * 1,
+        ry: scene.current?.clientWidth * cherryScale * 1 + 20,
         rx: scene.current?.clientWidth * cherryScale * 1 * cherryRatio,
         steps: 20
       });

diff --git a/src/app/components/Navbar/Hamburger/Hamburger.scss b/src/app/components/Navbar/Hamburger/Hamburger.scss
@@ -9,8 +9,8 @@
   padding-inline: calc($main-padding-mobile-inline/2 - $hamburger-width/2);
 
   @media (min-width: $mobile-breakpoint) {
-    padding-block: $main-padding-tablet-block;
-    padding-right: calc($main-padding-tablet-inline/2 - $hamburger-width/2);
+    padding-block: calc($main-padding-tablet-block/2);
+    padding-inline: calc($main-padding-tablet-inline/2 - $hamburger-width/2);
   }
 
   .container {

diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -27,6 +27,11 @@
     grid-template-columns: 1fr;
   }
 
+  .theme-slide {
+    margin-bottom: 0;
+    margin-top: 2.5rem;
+  }
+
   .arrows {
     display: none;
   }
@@ -83,7 +88,8 @@
       max-height: 575px;
       display: block;
       position: absolute;
-      background: $right-hide-slides-gradient;
+      // background: $right-hide-slides-gradient;
+      background: $hide-slides-gradient;
     }
   }
 

diff --git a/src/app/components/ThemesSlider/ThemesSlider.tsx b/src/app/components/ThemesSlider/ThemesSlider.tsx
@@ -7,7 +7,7 @@ import './ThemesSlider.scss';
 import ThemeSlide from './ThemeSlide/ThemeSlide';
 import SliderArrow from './SliderArrow/SliderArrow';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export type SlideContent = {
   theme: string;
@@ -26,13 +26,14 @@ export default function ThemesSlider({
 }) {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [loaded, setLoaded] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
 
   const [sliderRef, instanceRef] = useKeenSlider({
     loop: true,
     initial: 0,
     breakpoints: {
       '(min-width: 550px)': {
-        slides: { origin: 'center', perView: 1.5, spacing: 10 }
+        slides: { origin: 'center', perView: 1.5, spacing: 0 }
       },
       '(min-width: 979px)': {
         slides: { perView: 1.5, spacing: 10 }
@@ -55,10 +56,27 @@ export default function ThemesSlider({
     }
   });
 
+  useEffect(() => {
+    const checkTablet = () => {
+      if (window.innerWidth <= 979) {
+        setIsTablet(true);
+      } else {
+        setIsTablet(false);
+      }
+    };
+
+    checkTablet();
+    window.addEventListener('resize', checkTablet);
+    return () => window.removeEventListener('resize', checkTablet);
+  }, []);
+
   //TODO: add aria controls and labels to slide navigation
 
   return (
-    <div className="theme-slider-container">
+    <div
+      className="theme-slider-container"
+      style={isTablet ? { width: '100%' } : {}}
+    >
       <div ref={sliderRef} className="keen-slider">
         {slidesContent.map(slide => (
           <div className="keen-slider__slide" key={slide.theme}>

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -1,4 +1,10 @@
 #landing {
+  height: calc(100dvh + calc(clamp(20px, 30px + 1.2vw, 40px)));
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   h1,
   h3 {
     width: fit-content;
@@ -21,9 +27,13 @@
 
   .mobile-header {
     width: fit-content;
-    margin-inline: auto;
+    text-align: left;
     margin-block-start: calc($main-padding-mobile-inline + 25px);
+    margin-inline: auto;
 
+    @media (min-width: $mobile-breakpoint) {
+      margin-inline: 0;
+    }
     @media (min-width: $mobile-breakpoint) {
       margin-block-start: calc(50px);
     }

diff --git a/src/app/pages/Landing/Landing.tsx b/src/app/pages/Landing/Landing.tsx
@@ -47,17 +47,22 @@ export default function Landing({ landingRef }: LandingProps) {
 
       <Fruits />
 
-      <div ref={signatureContainerRef} className="landing-signature-container">
-        <Signature
-          hideMobile={false}
-          navContainerRef={signatureContainerRef}
-          hoveringCart={false}
-        />
+      <div>
+        <div
+          ref={signatureContainerRef}
+          className="landing-signature-container"
+        >
+          <Signature
+            hideMobile={false}
+            navContainerRef={signatureContainerRef}
+            hoveringCart={false}
+          />
+        </div>
+        <a className="add-me-to-cart">
+          <CartIcon className="svg-cart" />
+          <p>ADD ME TO CART</p>
+        </a>
       </div>
-      <a className="add-me-to-cart">
-        <CartIcon className="svg-cart" />
-        <p>ADD ME TO CART</p>
-      </a>
       <hr className="mobile-line" />
     </section>
   );