From 0d5f01bf356102af551847ccb35f40376533924a Mon Sep 17 00:00:00 2001
From: Jared White <jared@jaredwhite.com>
Date: Mon, 10 Jun 2024 20:48:55 -0700
Subject: [PATCH] fix: address various design QA for buttons (#4118)

---
 .../listings/PaperListingDetails/DetailsUnitDrawer.tsx    | 2 +-
 .../sections/DetailApplicationDates.tsx                   | 3 ++-
 .../listings/PaperListingDetails/sections/DetailUnits.tsx | 1 +
 .../listings/PaperListingForm/OpenHouseForm.tsx           | 8 +++++++-
 .../src/components/listings/PaperListingForm/index.tsx    | 4 ++--
 .../PaperListingForm/sections/ApplicationDates.tsx        | 2 ++
 .../PaperListingForm/sections/ApplicationTypes.tsx        | 3 +++
 .../sections/BuildingSelectionCriteria.tsx                | 6 ++++++
 .../listings/PaperListingForm/sections/ListingPhotos.tsx  | 5 +++++
 .../listings/PaperListingForm/sections/LotteryResults.tsx | 1 +
 .../listings/PaperListingForm/sections/SelectAndOrder.tsx | 5 +++++
 .../listings/PaperListingForm/sections/Units.tsx          | 3 +++
 .../partners/src/components/settings/PreferenceDrawer.tsx | 2 +-
 13 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx b/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
index f230e4eca9..722a7c2a57 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
@@ -143,7 +143,7 @@ const DetailUnitDrawer = ({ unit, setUnitDrawer }: UnitDrawerProps) => {
         </Card.Section>
       </Card>
 
-      <Button variant="primary" onClick={() => setUnitDrawer(null)}>
+      <Button variant="primary" size="sm" onClick={() => setUnitDrawer(null)}>
         {t("t.done")}
       </Button>
     </Drawer>
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
index 6bf4a87c41..1b64b2b5fd 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
@@ -44,6 +44,7 @@ const DetailApplicationDates = () => {
                   <Button
                     type="button"
                     variant="text"
+                    size="sm"
                     className="font-semibold"
                     onClick={() => setDrawer(event)}
                   >
@@ -125,7 +126,7 @@ const DetailApplicationDates = () => {
             </Card.Section>
           </Card>
 
-          <Button variant="primary" onClick={() => setDrawer(null)}>
+          <Button variant="primary" size="sm" onClick={() => setDrawer(null)}>
             {t("t.done")}
           </Button>
         </Drawer>
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
index 84ee3b52ae..9879d2a94a 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
@@ -37,6 +37,7 @@ const DetailUnits = ({ setUnitDrawer }: DetailUnitsProps) => {
             <Button
               type="button"
               variant="text"
+              size="sm"
               className="font-semibold"
               onClick={() => setUnitDrawer(unit)}
             >
diff --git a/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx b/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
index 896a88819a..4b431edb16 100644
--- a/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
@@ -181,7 +181,13 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
         </Card.Section>
       </Card>
 
-      <Button type="button" onClick={() => handleSubmit()} variant="primary" className="mr-4 mt-5">
+      <Button
+        type="button"
+        onClick={() => handleSubmit()}
+        variant="primary"
+        size="sm"
+        className="mr-4 mt-5"
+      >
         {t("t.save")}
       </Button>
     </Form>
diff --git a/sites/partners/src/components/listings/PaperListingForm/index.tsx b/sites/partners/src/components/listings/PaperListingForm/index.tsx
index 8f4e7feba1..ee61b8dffd 100644
--- a/sites/partners/src/components/listings/PaperListingForm/index.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/index.tsx
@@ -288,7 +288,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
 
                 <Form id="listing-form">
                   <div className="flex flex-row flex-wrap">
-                    <div className="md:w-9/12 pb-24">
+                    <div className="md:w-9/12 pb-28">
                       <Tabs
                         forceRenderTabPanel={true}
                         selectedIndex={tabIndex}
@@ -410,7 +410,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                       )}
                     </div>
 
-                    <aside className="md:w-3/12 md:pl-6">
+                    <aside className="w-full md:w-3/12 md:pl-6">
                       <ListingFormActions
                         type={editMode ? ListingFormActionsType.edit : ListingFormActionsType.add}
                         showCloseListingModal={() => setCloseModal(true)}
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
index 59dbf4f1a6..edbb36282c 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
@@ -44,6 +44,7 @@ const ApplicationDates = ({
             <div className="flex gap-3">
               <Button
                 type="button"
+                size="sm"
                 className="font-semibold"
                 onClick={() => setDrawerOpenHouse(event)}
                 variant="text"
@@ -52,6 +53,7 @@ const ApplicationDates = ({
               </Button>
               <Button
                 type="button"
+                size="sm"
                 className="font-semibold text-alert"
                 onClick={() => setModalDeleteOpenHouse(event)}
                 variant="text"
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
index c0b3ebaa96..2749c26ab0 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
@@ -116,6 +116,7 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
         content: (
           <Button
             type="button"
+            size="sm"
             className="font-semibold text-alert"
             onClick={() => {
               setCloudinaryData({
@@ -391,6 +392,7 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                         <div className="flex">
                           <Button
                             type="button"
+                            size="sm"
                             className="font-semibold text-alert"
                             onClick={() => {
                               const items = methods.paper.paperApplications.filter(
@@ -418,6 +420,7 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
               <Button
                 type="button"
                 variant="primary-outlined"
+                size="sm"
                 onClick={() => {
                   // default the application to English:
                   setSelectedLanguage(LanguagesEnum.en)
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
index 7eb362b296..ad499d76b2 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
@@ -95,6 +95,7 @@ const BuildingSelectionCriteria = () => {
               setProgressValue(0)
             }}
             variant="text"
+            size="sm"
           >
             {t("t.delete")}
           </Button>
@@ -129,6 +130,7 @@ const BuildingSelectionCriteria = () => {
                 setDrawerState(true)
               }}
               variant="text"
+              size="sm"
             >
               {t("t.edit")}
             </Button>
@@ -140,6 +142,7 @@ const BuildingSelectionCriteria = () => {
                 deletePDF()
               }}
               variant="text"
+              size="sm"
             >
               {t("t.delete")}
             </Button>
@@ -164,6 +167,7 @@ const BuildingSelectionCriteria = () => {
                 setDrawerState(true)
               }}
               variant="text"
+              size="sm"
             >
               {t("t.edit")}
             </Button>
@@ -174,6 +178,7 @@ const BuildingSelectionCriteria = () => {
                 setValue("buildingSelectionCriteria", "")
               }}
               variant="text"
+              size="sm"
             >
               {t("t.delete")}
             </Button>
@@ -213,6 +218,7 @@ const BuildingSelectionCriteria = () => {
                 id="addBuildingSelectionCriteriaButton"
                 type="button"
                 variant="primary-outlined"
+                size="sm"
                 onClick={() => {
                   setDrawerState(true)
                 }}
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
index 1d0f001cfa..5ca4f92fe7 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
@@ -104,6 +104,7 @@ const ListingPhotos = () => {
               saveImageFields(fields.filter((item, i2) => i2 != index) as ListingImage[])
             }}
             variant="text"
+            size="sm"
           >
             {t("t.delete")}
           </Button>
@@ -139,6 +140,7 @@ const ListingPhotos = () => {
               <Button
                 variant="text"
                 className="ml-0"
+                size="sm"
                 onClick={() => {
                   const resortedImages = [
                     drawerImages[index],
@@ -167,6 +169,7 @@ const ListingPhotos = () => {
                 setDrawerImages(filteredImages)
               }}
               variant="text"
+              size="sm"
             >
               {t("t.delete")}
             </Button>
@@ -222,6 +225,7 @@ const ListingPhotos = () => {
             <Button
               type="button"
               variant={fieldHasError(errors?.listingImages) ? "alert" : "primary-outlined"}
+              size="sm"
               onClick={() => {
                 setDrawerState(true)
                 setDrawerImages([...listingFormPhotos])
@@ -288,6 +292,7 @@ const ListingPhotos = () => {
         <Button
           variant="primary"
           type="button"
+          size="sm"
           className={"mt-4"}
           onClick={() => {
             saveImageFields(drawerImages)
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
index 837e2e3678..578cd0bbfd 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
@@ -116,6 +116,7 @@ const LotteryResults = (props: LotteryResultsProps) => {
               setProgressValue(0)
             }}
             variant="text"
+            size="sm"
           >
             {t("t.delete")}
           </Button>
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
index 99b9c1b08d..2971dee742 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
@@ -107,6 +107,7 @@ const SelectAndOrder = ({
                   deleteItem(item, false)
                 }}
                 variant="text"
+                size="sm"
               >
                 {t("t.delete")}
               </Button>
@@ -137,6 +138,7 @@ const SelectAndOrder = ({
                   deleteItem(item, true)
                 }}
                 variant="text"
+                size="sm"
               >
                 {t("t.delete")}
               </Button>
@@ -279,6 +281,7 @@ const SelectAndOrder = ({
               id={`add-${applicationSection}-button`}
               type="button"
               variant="primary-outlined"
+              size="sm"
               onClick={() => setTableDrawer(true)}
             >
               {listingData.length ? editText : addText}
@@ -312,6 +315,7 @@ const SelectAndOrder = ({
           <Button
             type="button"
             variant="primary-outlined"
+            size="sm"
             onClick={() => {
               setSelectDrawer(true)
             }}
@@ -380,6 +384,7 @@ const SelectAndOrder = ({
             type="button"
             className={"mt-4"}
             variant="primary"
+            size="sm"
             onClick={() => {
               const formData = getValues()
               const formItems = []
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
index 2b4c24a694..533f4419bb 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
@@ -118,6 +118,7 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
                 className="font-semibold"
                 onClick={() => editUnit(unit.tempId)}
                 variant="text"
+                size="sm"
               >
                 {t("t.edit")}
               </Button>
@@ -126,6 +127,7 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
                 className="font-semibold text-alert"
                 onClick={() => setUnitDeleteModal(unit.tempId)}
                 variant="text"
+                size="sm"
               >
                 {t("t.delete")}
               </Button>
@@ -207,6 +209,7 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
               id="addUnitsButton"
               type="button"
               variant={fieldHasError(errors?.units) ? "alert" : "primary-outlined"}
+              size="sm"
               onClick={() => {
                 editUnit(units.length + 1)
                 clearErrors("units")
diff --git a/sites/partners/src/components/settings/PreferenceDrawer.tsx b/sites/partners/src/components/settings/PreferenceDrawer.tsx
index 003cbdae48..014aa9bd0f 100644
--- a/sites/partners/src/components/settings/PreferenceDrawer.tsx
+++ b/sites/partners/src/components/settings/PreferenceDrawer.tsx
@@ -326,7 +326,7 @@ const PreferenceDrawer = ({
                 type="button"
                 size="sm"
                 className="w-max"
-                variant={errors["questions"] ? "alert" : "primary"}
+                variant={errors["questions"] ? "alert-outlined" : "primary-outlined"}
                 onClick={() => {
                   clearErrors("questions")
                   setOptionData(null)