fix: address various design QA for buttons (#4118)

bloom-housing · Jun 11, 2024 · 0d5f01b · 0d5f01b
1 parent fa2f6c4
commit 0d5f01b
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 6 deletions.
diff --git 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/.../partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/.../partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)