From 7f561ec034faf36c4fe7d8a463a6ebdffc16539f Mon Sep 17 00:00:00 2001
From: jxmoose <justin.xue7@gmail.com>
Date: Wed, 10 Apr 2024 00:50:44 -0700
Subject: [PATCH] design changes + adding active state to buttons

---
 src/app/exhibitsPage/page.tsx                 | 35 ++++------------
 .../userComponents/BackButton/page.tsx        | 18 +++++++--
 .../userComponents/Exhibit/Exhibit.tsx        | 40 ++-----------------
 3 files changed, 26 insertions(+), 67 deletions(-)

diff --git a/src/app/exhibitsPage/page.tsx b/src/app/exhibitsPage/page.tsx
index a8625104..363693e0 100644
--- a/src/app/exhibitsPage/page.tsx
+++ b/src/app/exhibitsPage/page.tsx
@@ -3,32 +3,12 @@
 
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { IoIosArrowRoundBack } from 'react-icons/io';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { ExhibitRow } from '../../types/types';
 import { fetchAllExhibits } from '../../supabase/exhibits/queries';
 import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
+import BackButton from '../../components/userComponents/BackButton/page';
 
-/**
- * @param evt on click of button
- */
-function goBack(evt : React.SyntheticEvent) {
-  // ignore the native anchor action
-  evt.preventDefault();
-  window.history.back();
-}
-
-/**
- * @returns back button
- */
-function BackButton() {
-  return (
-    <button type="button" className="text-scary-forest" onClick={goBack}>
-      {' '}
-      <IoIosArrowRoundBack size={40} />
-    </button>
-  );
-}
 
 /**
  * @returns exhibit page
@@ -53,7 +33,8 @@ function App() {
         const yOffset = -50;
         const y =
           element.getBoundingClientRect().top + window.scrollY + yOffset;
-        window.scrollTo({ top: y, behavior: 'smooth' });
+        // check on this offset later
+        window.scrollTo({ top: y, behavior: 'instant' });
       }, 1000);
     }
   }, []);
@@ -62,11 +43,11 @@ function App() {
       <NavBar />
       <div className="p-4 m-auto">
         <BackButton />
-        <div className="flex-col justify-start items-start mb-6 mt-3">
-          <div className="text-night text-neutral-700 text-[32px] font-bold leading-9 font-['Lato'] mb-4">
+        <div className="flex-col justify-start items-start mt-2">
+          <div className="text-night text-[32px] font-bold leading-9 font-['Lato'] mb-4">
             Our Exhibits{' '}
           </div>
-          <div className="text-night text-neutral-700 text-base leading-5 font-light font-['Lato']">
+          <div className="text-night text-base leading-5 font-normal font-['Lato']">
             Saratoga is home to an abundance of plant and animal life. As you
             explore these exhibits you will learn about species that are
             endangered and being carefully monitored by scientists with
@@ -74,8 +55,8 @@ function App() {
           </div>
         </div>
         <Link href="/siteMapPage">
-          <div className="px-4 py-2 rounded-md border border-asparagus justify-start items-start gap-2.5 inline-flex">
-            <div className="text-center text-asparagus text-base font-bold font-['Lato'] leading-tight">
+          <div className="px-4 py-2 mb-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
+            <div className="active:text-hunterGreen text-center text-asparagus text-base font-bold font-['Lato'] leading-tight">
               Go to Map
             </div>
           </div>
diff --git a/src/components/userComponents/BackButton/page.tsx b/src/components/userComponents/BackButton/page.tsx
index 111f459a..1727e9a8 100644
--- a/src/components/userComponents/BackButton/page.tsx
+++ b/src/components/userComponents/BackButton/page.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { IoIosArrowRoundBack } from 'react-icons/io';
 
 /**
  * @param evt on click of button
@@ -16,9 +15,22 @@ function goBack(evt: React.SyntheticEvent) {
  */
 export default function BackButton() {
   return (
-    <button type="button" onClick={goBack} className="text-scary-forest">
+    <button type="button" onClick={goBack}>
       {' '}
-      <IoIosArrowRoundBack size={40} />
+      <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+      >
+        <path className="stroke-scary-forest active:stroke-[#223a1d]"
+          d="M17.5 10H2.5M2.5 10L6.66667 14.1667M2.5 10L6.66667 5.83337"
+          strokeWidth="1.65"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
     </button>
   );
 }
diff --git a/src/components/userComponents/Exhibit/Exhibit.tsx b/src/components/userComponents/Exhibit/Exhibit.tsx
index 630d5981..19159520 100644
--- a/src/components/userComponents/Exhibit/Exhibit.tsx
+++ b/src/components/userComponents/Exhibit/Exhibit.tsx
@@ -1,45 +1,11 @@
 import React from 'react';
 import Image from 'next/image';
-
-/**
- *
- * @param root0 passed in
- * @param root0.title title of exhibit
- * @param root0.description description of exhibit
- * @param root0.category category of exhibit
- * @param root0.image image
- * @param root0.id id of exhibit
- * @returns exhibit component
- */
-
-/**
- * @param evt on click of button
- */
-function goBack(evt: React.SyntheticEvent) {
-    // ignore the native anchor action
-    evt.preventDefault();
-  
-    window.history.back();
-  }
-  
-  /**
-   * @returns back button
-   */
-  function BackButton() {
-    return (
-      <button type="button" style={{ backgroundColor: '#4b711d' }} onClick={goBack}>
-        {' '}
-        <IoIosArrowRoundBack size={40} />
-      </button>
-    );
-  }
   
 /**
  *
  * @param root0 passed in
  * @param root0.title title of exhibit
  * @param root0.description description of exhibit
- * @param root0.category category of exhibit
  * @param root0.image image
  * @param root0.id id of exhibit
  * @returns exhibit component
@@ -57,15 +23,15 @@ export default function Exhibit({
 }) {
   return (
     <li key={id} id={`a${id}`}>
-      <div className="w-[100%] px-4 pt-6 pb-7 bg-mint-cream rounded flex-col justify-start items-start gap-2.5 inline-flex mt-6">
+      <div className="w-[100%] px-4 py-8 bg-mint-cream rounded-lg flex-col justify-start items-start gap-2.5 inline-flex mt-6">
         <div className="flex-col justify-start items-start gap-5 flex">
           <div className="justify-start items-center gap-2 inline-flex">
-            <h2 className="text-neutral-700 text-lg font-bold font-['Lato']">
+            <h2 className="text-night text-2xl font-semibold font-['Lato']">
               {' '}
               {title}
             </h2>
           </div>
-          <p className="text-black text-base font-light font-['Lato']">
+          <p className="text-night text-base leading-normal font-normal font-['Lato']">
             {description}
           </p>
           <Image src={image} alt="Exhibit" width={354} height={150} />