Andrei/phs 50 ii hifi home screen web and design updates (#60)

* feat: web screens met, testing on iPhone SE screens + switch to web: instead of md: needed * feat: iPhone SE debugged, window containers required * chore: sync * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: padding on title header and sizing of exhibit button styling, Galaxy Fold 5 boundary issues + button icon gap fixes incoming * fix: Galaxy Fold 5 + Iphone SE boundary error fixed. Note: aim to use max prefix on measurements for parent tags to avoid this in the future * fix: fixed bounding issues again + visitor resources button styling fixes * feat: transition to using React Context for window resize checks, should look into using other React Contexts in the future
calblueprint · May 14, 2024 · 2a08d25 · 2a08d25
1 parent abe75d7
commit 2a08d25
Show file tree

Hide file tree

Showing 37 changed files with 690 additions and 612 deletions.
diff --git a/public/icons.tsx b/public/icons.tsx
@@ -51,7 +51,7 @@ export function CloseMenu() {
  * @param root0.strokeColor - The color of the arrow
  * @returns the BackArrow icon
  */
-export function BackArrow({strokeColor = "#386131"}) {
+export function BackArrow({ strokeColor = '#386131' }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -355,13 +355,7 @@ export function SelectedMarkerIcon({ color }: { color: string }) {
     >
       <g filter="url(#filter0_d_5531_6851)">
         <circle cx="20.5" cy="20" r="18" fill={color} />
-        <circle
-          cx="20.5"
-          cy="20"
-          r="16.3"
-          stroke={color}
-          strokeWidth="3.4"
-        />
+        <circle cx="20.5" cy="20" r="16.3" stroke={color} strokeWidth="3.4" />
       </g>
       <circle cx="20.5" cy="20" r="6" fill="#FFFDF7" />
       <defs>
@@ -403,4 +397,4 @@ export function SelectedMarkerIcon({ color }: { color: string }) {
       </defs>
     </svg>
   );
-}
+}
diff --git a/src/app/featuredToursPage/[tourId]/page.tsx b/src/app/featuredToursPage/[tourId]/page.tsx
@@ -9,7 +9,13 @@ import { fetchMedia } from '../../../supabase/media/queries';
 import { fetchTour } from '../../../supabase/tours/queries';
 import { fetchTourDisplays } from '../../../supabase/tour_displays/queries';
 import { fetchTourMedia } from '../../../supabase/tour_media/queries';
-import { DisplayRow, MediaRow, TourDisplaysRow, TourMediaRow, TourRow } from '../../../types/types';
+import {
+  DisplayRow,
+  MediaRow,
+  TourDisplaysRow,
+  TourMediaRow,
+  TourRow,
+} from '../../../types/types';
 
 import BackButton from '../../../components/userComponents/BackButton/BackButton';
 import NavBar from '../../../components/userComponents/navBar/navBar';
@@ -51,77 +57,81 @@ export default function TourStartPage({
 
   return (
     tour && (
-    <div className="bg-ivory w-[24.375rem] min-h-screen">
-      <NavBar />
-      <Link
-        href="/featuredToursPage"
-        className="absolute top-[5.25rem] left-[1.12rem] z-10"
-      >
-        <BackButton />
-      </Link>
-      <div className="bg-scary-forest relative w-[24.375rem] h-[15.3125rem]">
-        {media.length > 0 && (
-          <Image
-            key={media.find(m => m.id === tourMedia[0]?.media_id)?.id}
-            src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
-            alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
-            layout="fill"
-            objectFit="cover"
-            priority
-          />
-        )}
-      </div>
+      <div className="bg-ivory w-[24.375rem] min-h-screen">
+        <NavBar />
+        <Link
+          href="/featuredToursPage"
+          className="absolute top-[5.25rem] left-[1.12rem] z-10"
+        >
+          <BackButton />
+        </Link>
+        <div className="bg-scary-forest relative w-[24.375rem] h-[15.3125rem]">
+          {media.length > 0 && (
+            <Image
+              key={media.find(m => m.id === tourMedia[0]?.media_id)?.id}
+              src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
+              alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
+              layout="fill"
+              objectFit="cover"
+              priority
+            />
+          )}
+        </div>
 
-      <div className="w-[24.375rem] flex flex-col px-[1.125rem] absolute top-[17.81rem] gap-6 mb-[2.5rem]">
-        <div className="bg-mint-cream w-[22.125rem] rounded-md px-[2.1875rem] py-[2.25rem] flex-col items-center gap-3 inline-flex">
-          <div className="flex flex-col w-[22.125rem] rounded-md px-[2.1875rem] text-center gap-1">
-            <h2 className="text-night text-sm font-lato font-normal">WELCOME TO</h2>
-            <h1 className="text-night font-lato text-[2rem] truncate font-bold">
-              {tour.name}
-            </h1>
-          </div>
-          <div className="w-[12.625rem] px-4 py-[0.62rem] bg-asparagus rounded-lg justify-center items-center gap-2.5">
-            <Link
-              href={`/featuredToursPage/${params.tourId}/${tourDisplays[0]?.display_id}`}
-            >
-              <h2 className="text-ivory text-center text-base font-lato font-bold">
-                Start Tour
+        <div className="w-[24.375rem] flex flex-col px-[1.125rem] absolute top-[17.81rem] gap-6 mb-[2.5rem]">
+          <div className="bg-mint-green w-[22.125rem] rounded-md px-[2.1875rem] py-[2.25rem] flex-col items-center gap-3 inline-flex">
+            <div className="flex flex-col w-[22.125rem] rounded-md px-[2.1875rem] text-center gap-1">
+              <h2 className="text-night text-sm font-lato font-normal">
+                WELCOME TO
               </h2>
-            </Link>
+              <h1 className="text-night font-lato text-[2rem] truncate font-bold">
+                {tour.name}
+              </h1>
+            </div>
+            <div className="w-[12.625rem] px-4 py-[0.62rem] bg-asparagus rounded-lg justify-center items-center gap-2.5">
+              <Link
+                href={`/featuredToursPage/${params.tourId}/${tourDisplays[0]?.display_id}`}
+              >
+                <h2 className="text-ivory text-center text-base font-lato font-bold">
+                  Start Tour
+                </h2>
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <p className="text-night font-lato font-normal">{tour.description}</p>
+          <p className="text-night font-lato font-normal">{tour.description}</p>
 
-        <div className="flex flex-col relative gap-4 mb-10">
-          <div className="flex justify-between items-center">
-            <h3 className="text-night font-lato text-lg font-bold">In this tour</h3>
-            <div className="bg-[#F5EDCF80] w-[4.375rem] h-[1.5rem] rounded-[0.5625rem] px-3 py-1">
-              <p className="text-night font-lato font-normal text-xs text-center">
-                {tour.stop_count} stops
-              </p>
+          <div className="flex flex-col relative gap-4 mb-10">
+            <div className="flex justify-between items-center">
+              <h3 className="text-night font-lato text-lg font-bold">
+                In this tour
+              </h3>
+              <div className="bg-[#F5EDCF80] w-[4.375rem] h-[1.5rem] rounded-[0.5625rem] px-3 py-1">
+                <p className="text-night font-lato font-normal text-xs text-center">
+                  {tour.stop_count} stops
+                </p>
+              </div>
             </div>
+            <ol>
+              {tourDisplays.map(tourDisplay => (
+                <li key={tourDisplay.display_id} className="mb-[0.44rem] ml-4">
+                  <h4 className="font-normal font-lato">
+                    {tourDisplay.display_order != null
+                      ? tourDisplay.display_order + 1
+                      : ''}
+                    .{' '}
+                    {
+                      displays.find(
+                        display => display.id === tourDisplay.display_id,
+                      )?.title
+                    }
+                  </h4>
+                </li>
+              ))}
+            </ol>
           </div>
-          <ol>
-            {tourDisplays.map(tourDisplay => (
-              <li key={tourDisplay.display_id} className="mb-[0.44rem] ml-4">
-                <h4 className="font-normal font-lato">
-                  {tourDisplay.display_order != null
-                    ? tourDisplay.display_order + 1
-                    : ''}
-                  .{' '}
-                  {
-                    displays.find(
-                      display => display.id === tourDisplay.display_id,
-                    )?.title
-                  }
-                </h4>
-              </li>
-            ))}
-          </ol>
         </div>
       </div>
-    </div>
     )
   );
 }
diff --git a/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx b/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx
@@ -14,7 +14,11 @@ import { fetchMedia } from '../../../../supabase/media/queries';
 import { fetchTour } from '../../../../supabase/tours/queries';
 import { fetchTourDisplays } from '../../../../supabase/tour_displays/queries';
 import { fetchTourMedia } from '../../../../supabase/tour_media/queries';
-import { BackArrow, Congratulations, ExternalLinkIcon } from '../../../../../public/icons';
+import {
+  BackArrow,
+  Congratulations,
+  ExternalLinkIcon,
+} from '../../../../../public/icons';
 
 /**
  * @param params -
@@ -57,7 +61,9 @@ export default function TourEndPage({
      * @returns The link to the previous page.
      */
     async function getBackLink() {
-      const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(params.tourId);
+      const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(
+        params.tourId,
+      );
       setBackLink(
         `/featuredToursPage/${params.tourId}/${
           tourDisplays[tourDisplays.length - 1].display_id

diff --git a/src/app/featuredToursPage/page.tsx b/src/app/featuredToursPage/page.tsx
@@ -119,4 +119,4 @@ export default function FeaturedToursPage() {
       </div>
     </div>
   );
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,11 @@
 import './globals.css';
 import type { Metadata } from 'next';
-import { Inter, Lato, Manrope } from 'next/font/google';
+import { Inter } from 'next/font/google';
 import React from 'react';
+import { WindowWidthProvider } from '../context/WindowWidthContext/WindowWidthContext';
 
 const inter = Inter({ subsets: ['latin'] });
 
-const manrope = Manrope({ weight: ['400', '700'], subsets: ['latin'] });
-
 // const lato = Lato({ weight: ['300', '400', '500', '700'], subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -33,13 +32,13 @@ export default function RootLayout({
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossOrigin=""
         />
-        <link 
-           href='https://fonts.googleapis.com/css?family=Lato:400,700' 
-          rel='stylesheet' 
-          integrity="sha384-DelNu+PL/74bL4pHGH8gPG8J5Q6wrLpZiiVttBSvpOibBVQf3EOXerhZlmHcnZsI"
-          type='text/css'
-          crossOrigin=""
-        />
+        <link
+          href="https://fonts.googleapis.com/css?family=Lato:400,700"
+          rel="stylesheet"
+          integrity="sha384-DelNu+PL/74bL4pHGH8gPG8J5Q6wrLpZiiVttBSvpOibBVQf3EOXerhZlmHcnZsI"
+          type="text/css"
+          crossOrigin=""
+        />
         <script
           src="https://unpkg.com/[email protected]/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
@@ -48,7 +47,9 @@ export default function RootLayout({
         <script src="html5-qrcode.min.js" />
       </head>
 
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <WindowWidthProvider>{children}</WindowWidthProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
@@ -26,9 +26,7 @@ export default function App() {
       <NavBar />
       <div className="p-4">
         <BackButton />
-        <h1 className="text-night text-3xl font-bold mt-2 -ml-[1.8px]">
-          News
-        </h1>
+        <h1 className="text-night text-3xl font-bold mt-2 -ml-[1.8px]">News</h1>
         <ul>
           {news.map(article => (
             <NewsDisplay

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,36 +1,36 @@
 'use client';
 
-import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
-import { HiChevronRight } from 'react-icons/hi';
-import HomeWildlifeSpotlights from '../components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights';
+import React from 'react';
+import HomeWildlifeSpotlights from '../components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights';
 import NavBar from '../components/userComponents/navBar/navBar';
-import VisitorResources from '../components/userComponents/VisitorResources/VisitorResources';
-import WelcomeGraphic from '../components/userComponents/WelcomeGraphic/WelcomeGraphic';
-import HomeVirtualTours from '../components/userComponents/HomeVirtualTours/HomeVirtualTours';
-import HomeNewsFeed from '../components/userComponents/HomeNewsFeed/HomeNewsFeed';
+import VisitorResources from '../components/userComponents/HomePageComponents/VisitorResources/VisitorResources';
+import WelcomeGraphic from '../components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic';
+import HomeVirtualTours from '../components/userComponents/HomePageComponents/HomeVirtualTours/HomeVirtualTours';
+import HomeNewsFeed from '../components/userComponents/HomePageComponents/HomeNewsFeed/HomeNewsFeed';
+import { useWebScreenDetection } from '../context/WindowWidthContext/WindowWidthContext';
 
 /**
  * @returns - Home page for PHS/SPCA.  Buttons are available for the major flows of the application from this page.
  */
 function Home() {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  // const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
-  useEffect(() => {
-    const handleResize = () => setWindowWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  // useEffect(() => {
+  //   const handleResize = () => setWindowWidth(window.innerWidth);
+  //   window.addEventListener('resize', handleResize);
+  //   return () => {
+  //     window.removeEventListener('resize', handleResize);
+  //   };
+  // }, []);
+  const isWebDevice = useWebScreenDetection();
 
   return (
     <div className="HomePage w-full h-full m-0 flex-col justify-center font-normal">
       <NavBar />
       <WelcomeGraphic />
-      <div className="IntroInfo md:w-full md:h-72 bg-ivory md:bg-mint-cream inline-flex flex-col justify-center items-center">
-        {windowWidth < 768 && (
-          <p className="b3 w-full px-[2rem] mt-10 text-night text-center text-base gap-4">
+      <div className="IntroInfo web:w-full web:h-72 bg-ivory web:bg-mint-cream inline-flex flex-col justify-center items-center">
+        {!isWebDevice && (
+          <p className="b3 w-full px-4 py-10 text-night text-center text-base gap-4">
             The Peninsula Humane Society & SPCA (PHS/SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
             PHS/SPCA is truly an open admission shelter, not only accepting many
@@ -39,10 +39,10 @@ function Home() {
           </p>
         )}
         <div
-          className="w-96 md:w-auto h-48 rounded-lg bg-mint-cream md:bg-ivory justify-center 
-        items-center mt-10 md:mt-0 m-2 inline-flex px-10 py-11 md:px-[4.59rem] py-[2.875rem]"
+          className="web:w-auto h-48 rounded-lg bg-mint-cream web:bg-ivory justify-center 
+        items-center mt-10 web:mt-0 m-2 inline-flex px-10 py-11 web:px-[4.59rem] py-[2.875rem]"
         >
-          <h3 className="w-64 md:w-96 text-scary-forest text-center font-normal italic">
+          <h3 className="max-w-64 web:w-96 text-scary-forest text-center font-normal italic">
             Peninsula Humane Society & SPCA guided by the humane ethics, builds
             healthy relationships between people and animals.
           </h3>
@@ -57,4 +57,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Home;
diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
@@ -16,16 +16,14 @@ const SiteMap = dynamic(
 );
 type ModeState = 'tours' | 'exhibits';
 
-
-
 /**
  * @returns Page for the interactive map
  */
 function MapPage() {
   const [selectedMap, setSelectedMap] = useState(filterButtonContent[0]); // "Virtual Tour Map" by default
   const [mode, setMode] = useState<ModeState>('tours');
 
-  // move tour logic here: need to share state between filter 
+  // move tour logic here: need to share state between filter
   const handleFilter = (mapName: string) => {
     setSelectedMap(mapName);
     if (mapName === 'Virtual Tour Map') {
@@ -37,12 +35,12 @@ function MapPage() {
 
   const renderFilterContainer = () => (
     <div className="mb-6  pl-0 pr-0 ">
-      <div className='pt-9 pr-2 pl-2 pb-7'>
-      <p className="text-night font-lato text-2xl font-semibold">Wildlife Care Center Maps</p>
+      <div className="pt-9 pr-2 pl-2 pb-7">
+        <p className="text-night font-lato text-2xl font-semibold">
+          Wildlife Care Center Maps
+        </p>
       </div>
       <div className="flex flex-row items-center gap-x-0 pr-1 pl-1 w-full rounded-lg bg-mint-cream  border-mint-cream border-[5px]">
-
-
         {filterButtonContent &&
           filterButtonContent.map(text => (
             <FilterButton
@@ -52,7 +50,6 @@ function MapPage() {
               isSelected={selectedMap === text}
             />
           ))}
-
       </div>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,4 +119,4 @@ export default function FeaturedToursPage() { @@
           </div>
         </div>
       );
-    }
+    }