design changes + adding active state to buttons

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,20 +43,20 @@ 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
             protective efforts in place.
           </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>

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>
   );
 }

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} />