Merge pull request CodeForPhilly#487 from BayLadyCoder/bayladycoder/2…

…88-449-fix-button-inconsistency-2

CodeForPhilly#288 and CodeForPhilly#449 Fix Button Inconsistency and Update Some Buttons to Primary

src/app/(content-pages)/page.tsx

@@ -8,7 +8,6 @@ import imageGreened from "@/images/greenedLot.jpg";
 import imageStep1 from "@/images/landing-step-1.png";
 import imageStep2 from "@/images/landing-step-2.png";
 import imageStep3 from "@/images/landing-step-3.png";
-import { Button, Link } from "@nextui-org/react";
 import Image from "next/image";
 import { FC } from "react";
 import {
@@ -18,6 +17,7 @@ import {
   PiKey,
   PiTree,
 } from "react-icons/pi";
+import { ThemeButtonLink } from "../../components/ThemeButton";
 
 const images = [
   {
@@ -52,10 +52,11 @@ const LandingPage: FC = () => {
               clean and green vacant properties to reduce gun violence.
             </p>
           </div>
-          <Button href="#guncrimes" as={Link} className="bg-gray-200">
-            <PiArrowDown className="iconButton-w-5" />
-            <span className="body-md">Learn How</span>
-          </Button>
+          <ThemeButtonLink
+            href="#guncrimes"
+            label="Learn How"
+            startContent={<PiArrowDown />}
+          />
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
@@ -198,6 +199,7 @@ const LandingPage: FC = () => {
             icon: PiBinoculars,
             label: "Find Properties",
             href: "/find-properties",
+            color: "secondary",
           }}
         />
       </div>
@@ -225,6 +227,7 @@ const LandingPage: FC = () => {
             icon: PiKey,
             label: "Get Access",
             href: "/get-access",
+            color: "secondary",
           }}
         />
       </div>
@@ -250,6 +253,7 @@ const LandingPage: FC = () => {
             icon: PiTree,
             label: "Transform",
             href: "/transform-property",
+            color: "secondary",
           }}
         />
       </div>
@@ -268,6 +272,7 @@ const LandingPage: FC = () => {
             icon: PiArrowRight,
             label: "Get Started",
             href: "/find-properties",
+            color: "primary",
           }}
         />
       </div>

src/app/find-properties/page.tsx

@@ -16,6 +16,7 @@ import { MapGeoJSONFeature } from "maplibre-gl";
 import StreetView from "../../components/StreetView";
 import { centroid } from "@turf/centroid";
 import { Position } from "geojson";
+import { ThemeButton } from "../../components/ThemeButton";
 
 export type BarClickOptions = "filter" | "download" | "detail" | "list";
 
@@ -264,15 +265,15 @@ const StreetViewModal: React.FC<{
           tabIndex={0} // Make the container focusable
         >
           <div className="fixed w-full h-full bg-black">
-            <button
-              onClick={onClose}
+            <ThemeButton
+              color="tertiary"
+              startContent={<X />}
+              onPress={onClose}
               tabIndex={0}
+              label="Close"
               aria-label="Close full screen street view map"
-              className="absolute top-4 right-4 bg-white p-[10px] rounded-md flex flex-row space-x-1 items-center"
-            >
-              <X color="#3D3D3D" size={20} />
-              <span className="leading-0">Close</span>
-            </button>
+              className="absolute top-4 right-4"
+            />
             {children}
           </div>
         </div>

src/components/FilterView.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
 import DimensionFilter from "./Filters/DimensionFilter";
-import { Button } from "@nextui-org/react";
 import { PiX } from "react-icons/pi";
 import { BarClickOptions } from "@/app/find-properties/page";
+import { ThemeButton } from "./ThemeButton";
 
 const filters = [
   {
@@ -56,13 +56,13 @@ type FilterViewProps = {
 const FilterView: FC<FilterViewProps> = ({ updateCurrentView }) => {
   return (
     <div className="relative p-6">
-        <Button
-          aria-label="Close filter panel"
-          className="bg-gray-100 right-4 lg:right-[24px] text-gray-900 absolute px-2 top-8 min-w-[3rem] hover:bg-gray-200"
-          onPress={() => updateCurrentView("filter")}
-        >
-          <PiX className="h-6 w-6" />
-        </Button>
+      <ThemeButton
+        color="secondary"
+        className="right-4 lg:right-[24px] absolute top-8 min-w-[3rem]"
+        aria-label="Close filter panel"
+        startContent={<PiX />}
+        onPress={() => updateCurrentView("filter")}
+      />
       {filters.map(({ property, display, options, tooltip }) => (
         <DimensionFilter
           key={property}

src/components/InfoGraphicSection.tsx

@@ -1,7 +1,6 @@
-import { Button } from "@nextui-org/react";
 import Image, { StaticImageData } from "next/image";
-import Link from "next/link";
 import type { IconType } from "react-icons";
+import { ThemeButtonLink } from "./ThemeButton";
 
 interface InfoGraphicBase {
   id?: string;
@@ -14,6 +13,7 @@ interface InfoGraphicBase {
     icon: IconType;
     label: string;
     href: string;
+    color?: "primary" | "secondary" | "tertiary";
   };
 }
 
@@ -43,7 +43,7 @@ export const InfoGraphicSection = (props: InfoGraphicProps) => {
     id,
     header: { text: headerText, as: headerAs },
     body,
-    link
+    link,
   } = props;
   const HeaderTag = headerAs || "h2";
 
@@ -75,15 +75,13 @@ export const InfoGraphicSection = (props: InfoGraphicProps) => {
         <div className={body.className || ""}>
           <p className="body-md text-balance">{body.text}</p>
           {link && (
-            <Button
-              role="link"
+            <ThemeButtonLink
               href={link.href}
-              as={Link}
-              className="bg-gray-200 iconLink mt-5"
-            >
-              <link.icon className="w-5 h-5" />
-              <span className="body-md">{link.label}</span>
-            </Button>
+              label={link.label}
+              color={link.color}
+              startContent={<link.icon />}
+              className="max-w-min mt-5"
+            />
           )}
         </div>
       </div>

src/components/SidePanelControlBar.tsx

@@ -10,6 +10,7 @@ import {
   SquaresFour,
   Table,
 } from "@phosphor-icons/react";
+import { ThemeButton } from "./ThemeButton";
 
 type SidePanelControlBarProps = {
   currentView: string;
@@ -36,17 +37,19 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
     <>
       <div className="flex justify-between items-center bg-white border-b-[1px] border-[#12121215] p-2 h-14">
         {/* Left-aligned content: Total Properties in View */}
-        <Button
+        <ThemeButton
+          color="tertiary"
           aria-label={`Change to ${smallScreenMode}`}
-          className="bg-white w-fit px-2 sm:hidden hover:bg-gray-100 max-md:min-w-[4rem]"
+          className="sm:hidden max-md:min-w-[4rem]"
           onPress={updateSmallScreenMode}
-        >
-          {smallScreenMode === "map" ? (
-            <SquaresFour className="h-6 w-6" />
-          ) : (
-            <GlobeHemisphereWest className="h-6 w-6" />
-          )}
-        </Button>
+          startContent={
+            smallScreenMode === "map" ? (
+              <SquaresFour />
+            ) : (
+              <GlobeHemisphereWest />
+            )
+          }
+        />
         <div className="sm:px-4 py-2">
           <h1 className="body-md">
             <span className="font-bold">{featureCount.toLocaleString()} </span>
@@ -60,37 +63,42 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
           role="region"
           aria-label="controls"
         >
-          <Button
+          <ThemeButton
+            color="tertiary"
+            label={<span className="max-lg:hidden body-md">Filter</span>}
             onPress={() => {
               if (filterRef.current && currentView === "filter") {
                 filterRef.current.blur();
               }
+
               updateCurrentView("filter");
             }}
-            startContent={<Funnel className="h-6 w-6" />}
-            className={`bg-white max-lg:min-w-[4rem] iconLink ${
-              currentView === "filter" &&
-              "bg-[#e9ffe5] hover:bg-[#c2f5ba] text-green-700"
-            }`}
+            isSelected={currentView === "filter"}
+            startContent={<Funnel />}
+            className="max-lg:min-w-[4rem]"
             data-hover={false}
             ref={filterRef}
-          >
-            <span className="max-lg:hidden body-md">Filter</span>
-          </Button>
-          <Button
+          />
+
+          <ThemeButton
+            color="tertiary"
+            aria-label="View"
             onPress={() => updateCurrentView("detail")}
-            startContent={<Table className="h-6 w-6" />}
-            className={`bg-white hover:bg-gray-10 max-lg:min-w-[4rem] ${
+            startContent={<Table />}
+            className={`max-lg:min-w-[4rem] ${
               smallScreenMode === "map" ? "max-sm:hidden" : ""
             }`}
-          ></Button>
-          <Button
+          />
+
+          <ThemeButton
+            color="tertiary"
+            aria-label="Download"
             onPress={() => updateCurrentView("download")}
-            startContent={<DownloadSimple className="h-6 w-6" />}
-            className={`bg-white hover:bg-gray-10 max-lg:min-w-[4rem] ${
+            startContent={<DownloadSimple />}
+            className={`max-md:min-w-[4rem] ${
               smallScreenMode === "map" ? "max-sm:hidden" : ""
             }`}
-          ></Button>
+          />
         </div>
       </div>
     </>

src/components/SinglePropertyDetail.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@nextui-org/react";
 import { MapGeoJSONFeature } from "maplibre-gl";
 import Image from "next/image";
 import {
@@ -15,6 +14,7 @@ import {
 import SinglePropertyInfoCard from "./SinglePropertyInfoCard";
 import { Dispatch, SetStateAction } from "react";
 import { BarClickOptions } from "@/app/find-properties/page";
+import { ThemeButton, ThemeButtonLink } from "./ThemeButton";
 
 interface PropertyDetailProps {
   property: MapGeoJSONFeature | null;
@@ -70,16 +70,15 @@ const SinglePropertyDetail = ({
   return (
     <div className="w-full px-6 pb-6">
       <div className="sticky top-0 py-4 z-10">
-        <Button
+        <ThemeButton
+          color="tertiary"
+          label="Back"
+          startContent={<ArrowLeft />}
           onPress={() => {
             setSelectedProperty(null);
             updateCurrentView("detail");
           }}
-          className="bg-white rounded-md hover:bg-gray-100"
-        >
-          <ArrowLeft color="#3D3D3D" size={24} />{" "}
-          <span className="body-md">Back</span>{" "}
-        </Button>
+        />
       </div>
       <div className="bg-white rounded-lg overflow-hidden">
         <div className="relative h-48 w-full rounded-lg overflow-hidden">
@@ -111,16 +110,14 @@ const SinglePropertyDetail = ({
             {address.toLowerCase()}
           </h2>
           <div>
-            <a
+            <ThemeButtonLink
               href={atlasUrl}
               target="_blank"
               rel="noopener noreferrer"
-              color="primary"
-              className="flex p-2 items-center gap-1 body-md"
-            >
-              Atlas
-              <ArrowSquareOut className="inline h-6 w-6" aria-hidden="true" />
-            </a>
+              color="tertiary"
+              label="Atlas"
+              endContent={<ArrowSquareOut aria-hidden="true" />}
+            />
           </div>
         </div>
       </div>