fix: add border

metrotranscom · Nov 26, 2024 · d053be2 · d053be2
1 parent 81e274c
commit d053be2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 39 deletions.
diff --git a/sites/public/src/components/listings/ListingsCombined.module.scss b/sites/public/src/components/listings/ListingsCombined.module.scss
@@ -110,6 +110,7 @@
 
 .listings-list-wrapper {
   --padding: var(--seeds-s10);
+  border-left: 1px solid var(--seeds-color-gray-450);
 
   /* These attribute selectors are strange, but that's because we want to short-circuit the
      CSS module renaming and use these exact class names */
@@ -145,3 +146,8 @@
   border: 1px solid white;
   box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
 }
+
+.listings-list-container {
+  border-bottom: 1px solid var(--seeds-color-gray-450);
+  margin-bottom: var(--seeds-s4);
+}
diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx
@@ -22,7 +22,7 @@ const ListingsList = (props: ListingsListProps) => {
         {t("t.listingsList")}
       </Heading>
       {props.listings.length > 0 || props.loading ? (
-        <div className="listingsList">{getListings(props.listings)}</div>
+        <div className={styles["listings-list-container"]}>{getListings(props.listings)}</div>
       ) : (
         <ZeroListingsItem title={t("t.noMatchingListings")} description={t("t.tryRemovingFilters")}>
           {/* <Button>{t("t.clearAllFilters")}</Button> */}
@@ -31,46 +31,43 @@ const ListingsList = (props: ListingsListProps) => {
     </div>
   )
 
-  const infoCards =
-    props.currentPage == props.lastPage || props.lastPage == 0 ? (
-      <div>
-        {process.env.notificationsSignUpUrl && (
-          <InfoCard
-            title={t("t.signUpForAlerts")}
-            subtitle={t("t.subscribeToListingAlerts")}
-            className="is-normal-primary-lighter"
-          >
-            <LinkButton
-              href={process.env.notificationsSignUpUrl}
-              newTab={true}
-              className="is-primary"
-            >
-              {t("t.signUp")}
-            </LinkButton>
-          </InfoCard>
-        )}
-        <InfoCard
-          title={t("t.needHelp")}
-          subtitle={t("t.emergencyShelter")}
-          className="is-normal-secondary-lighter"
-        >
-          <LinkButton href="/help/housing-help" className="is-secondary">
-            {t("t.helpCenter")}
-          </LinkButton>
-        </InfoCard>
+  const infoCards = (
+    <div className={styles["info-cards-container"]}>
+      {process.env.notificationsSignUpUrl && (
         <InfoCard
-          title={t("t.housingInSanFrancisco")}
-          subtitle={t("t.seeSanFranciscoListings")}
-          className="is-normal-secondary-lighter"
+          title={t("t.signUpForAlerts")}
+          subtitle={t("t.subscribeToListingAlerts")}
+          className="is-normal-primary-lighter"
         >
-          <LinkButton href="https://housing.sfgov.org/" newTab={true} className="is-secondary">
-            {t("t.seeListings")}
+          <LinkButton
+            href={process.env.notificationsSignUpUrl}
+            newTab={true}
+            className="is-primary"
+          >
+            {t("t.signUp")}
           </LinkButton>
         </InfoCard>
-      </div>
-    ) : (
-      <div></div>
-    )
+      )}
+      <InfoCard
+        title={t("t.needHelp")}
+        subtitle={t("t.emergencyShelter")}
+        className="is-normal-secondary-lighter"
+      >
+        <LinkButton href="/help/housing-help" className="is-secondary">
+          {t("t.helpCenter")}
+        </LinkButton>
+      </InfoCard>
+      <InfoCard
+        title={t("t.housingInSanFrancisco")}
+        subtitle={t("t.seeSanFranciscoListings")}
+        className="is-normal-secondary-lighter"
+      >
+        <LinkButton href="https://housing.sfgov.org/" newTab={true} className="is-secondary">
+          {t("t.seeListings")}
+        </LinkButton>
+      </InfoCard>
+    </div>
+  )
 
   const pagination =
     props.lastPage !== 0 ? (

diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss
@@ -139,7 +139,7 @@
         color: var(--seeds-text-color-dark);
         text-transform: uppercase;
         font-weight: bold;
-        letter-spacing: .025rem;
+        letter-spacing: 0.025rem;
         font-size: var(--seeds-font-size-xs);
       }
     }
@@ -294,6 +294,10 @@
     }
   }
 
+  .listings-row {
+    --inter-row-gap: var(--seeds-s3_5);
+  }
+
   .results-bar-button {
     --button-interior-gap: var(--seeds-s1_5);
     line-height: var(--seeds-line-height-4);
@@ -307,7 +311,7 @@
 
   .pagination-button-group {
     --padding-inline-desktop: var(--seeds-s6);
-    --padding-block: var(--seeds-s6);
+    --padding-block: var(--seeds-s2) var(--seeds-s6);
     .doorway-button {
       padding: var(--seeds-s3) var(--seeds-s4);
     }