From 23f24a75cb7575a865093d8b9b339f5cd31fc339 Mon Sep 17 00:00:00 2001
From: tallulah <tallulah.kay@gmail.com>
Date: Tue, 17 Dec 2024 15:38:05 -0800
Subject: [PATCH] feat: DAH-2661 seeds css

---
 app/assets/json/translations/react/en.json    | 10 +++---
 .../__snapshots__/ForRent.test.tsx.snap       |  6 ++--
 .../__snapshots__/ForSale.test.tsx.snap       |  8 ++---
 app/javascript/modules/constants.tsx          | 18 +++++++++--
 .../listings/DirectoryPageNavigationBar.scss  | 32 +++++++++----------
 .../listings/DirectoryPageNavigationBar.tsx   |  6 +++-
 6 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/app/assets/json/translations/react/en.json b/app/assets/json/translations/react/en.json
index cb151c8300..6c86d3d5bc 100644
--- a/app/assets/json/translations/react/en.json
+++ b/app/assets/json/translations/react/en.json
@@ -550,9 +550,9 @@
   "footer.inPartnershipWith": "in partnership with<br /><a className='text-white' href='%{sfdsUrl}' target='_blank'>San Francisco Digital Services</a><br /><a className='text-white' href='%{mayorUrl}' target='_blank'>Mayor's Office of Civic Innovation</a>",
   "footer.listingQuestions": "For listing and application questions, please contact the agent displayed on the listing.",
   "footer.privacyPolicy": "Privacy Policy",
-  "forgotPassword.emailSentDescription": "You'll receive an email with a link to reset your password.",
   "forgotPassword.emailLink": "If there is an account with that email address, you will get an email with a link to reset your password.",
   "forgotPassword.emailSent": "We sent you an email",
+  "forgotPassword.emailSentDescription": "You'll receive an email with a link to reset your password.",
   "forgotPassword.emailSentTitle": "We've sent you an email.",
   "forgotPassword.title": "Forgot password?",
   "g1Confirmation.browseMoreListings": "Browse more listings",
@@ -1331,6 +1331,10 @@
   "listings.youDontMatchAnyRent": "Based on information you entered, you don't match any current listings for rent.",
   "listings.youDontMatchAnySale": "Based on information you entered, you don't match any current listings for sale.",
   "listings.youMayBeEligible": "Based on information you entered, you may be eligible for units at the following property.",
+  "listingsDirectory.navBar.fcfs": "Buy now (%{numListings})",
+  "listingsDirectory.navBar.open": "Enter a lottery (%{numListings})",
+  "listingsDirectory.navBar.results": "Lottery results (%{numListings})",
+  "listingsDirectory.navBar.upcoming": "Upcoming lotteries (%{numListings})",
   "listingsForRent.callout.button": "View opportunities",
   "listingsForRent.callout.title": "See more listings from our community partners.",
   "listingsForRent.header.findMatchingListings": "Find matching listings",
@@ -1348,10 +1352,6 @@
   "listingsForSale.beforeApplying.step4": "Get pre-approved for a mortgage loan by a <a href='%{url}' target='_blank'>lender on our list</a>",
   "listingsForSale.beforeApplying.step5": "Have enough in savings for closing costs and downpayment",
   "listingsForSale.beforeApplying.title": "Before applying",
-  "listingsDirectory.navBar.open": "Enter a lottery (%{numListings})",
-  "listingsDirectory.navBar.fcfs": "Buy now (%{numListings})",
-  "listingsDirectory.navBar.upcoming": "Upcoming lotteries (%{numListings})",
-  "listingsDirectory.navBar.results": "Lottery results (%{numListings})",
   "listingsForSale.beforeApplyingHabitat.readFullList": "Read <a href='%{url}' target='_blank'>the full list of requirements</a> for more details.",
   "listingsForSale.beforeApplyingHabitat.rulesAreDifferent": "These units have rules that are different from other ownership listings on DAHLIA. Make sure you:",
   "listingsForSale.beforeApplyingHabitat.step1": "Go to a <a href='%{url}' target='_blank'>Habitat for Humanity information session</a>",
diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
index ce9017f4ba..9c58264610 100644
--- a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
+++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
@@ -266,7 +266,7 @@ exports[`For Rent renders ForRent component 1`] = `
             class="directory-page-navigation-bar"
           >
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
@@ -290,7 +290,7 @@ exports[`For Rent renders ForRent component 1`] = `
               />
             </button>
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
@@ -317,7 +317,7 @@ exports[`For Rent renders ForRent component 1`] = `
               />
             </button>
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
index d8c1a18315..34afd56a5a 100644
--- a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
+++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
@@ -341,7 +341,7 @@ exports[`For Sale renders ForSale component 1`] = `
             class="directory-page-navigation-bar"
           >
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
@@ -365,7 +365,7 @@ exports[`For Sale renders ForSale component 1`] = `
               />
             </button>
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
@@ -397,7 +397,7 @@ exports[`For Sale renders ForSale component 1`] = `
               />
             </button>
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
@@ -424,7 +424,7 @@ exports[`For Sale renders ForSale component 1`] = `
               />
             </button>
             <button
-              class="seeds-button"
+              class="seeds-button directory-page-navigation-bar__button"
               data-size="md"
               data-variant="primary"
               type="button"
diff --git a/app/javascript/modules/constants.tsx b/app/javascript/modules/constants.tsx
index ba59cb41e4..888b012f7a 100644
--- a/app/javascript/modules/constants.tsx
+++ b/app/javascript/modules/constants.tsx
@@ -106,7 +106,21 @@ export const SFGOV_LINKS = [
   "http://sfmohcd.org/neighborhood-resident-housing-preference",
 ]
 
-export const SALE_DIRECTORY_SECTIONS = ["open", "fcfs", "upcoming", "results"]
-export const RENTAL_DIRECTORY_SECTIONS = ["open", "upcoming", "results"]
+export const DIRECTORY_SECTION_OPEN_LOTTERIES = "open"
+export const DIRECTORY_SECTION_FCFS_LISTINGS = "fcfs"
+export const DIRECTORY_SECTION_UPCOMING_LOTTERIES = "upcoming"
+export const DIRECTORY_SECTION_LOTTERY_RESULTS = "results"
+
+export const SALE_DIRECTORY_SECTIONS = [
+  DIRECTORY_SECTION_OPEN_LOTTERIES,
+  DIRECTORY_SECTION_FCFS_LISTINGS,
+  DIRECTORY_SECTION_UPCOMING_LOTTERIES,
+  DIRECTORY_SECTION_LOTTERY_RESULTS,
+]
+export const RENTAL_DIRECTORY_SECTIONS = [
+  DIRECTORY_SECTION_OPEN_LOTTERIES,
+  DIRECTORY_SECTION_UPCOMING_LOTTERIES,
+  DIRECTORY_SECTION_LOTTERY_RESULTS,
+]
 
 export const DIRECTORY_TYPE_SALES = "forSale"
diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.scss b/app/javascript/modules/listings/DirectoryPageNavigationBar.scss
index 50518c0320..fe530847c8 100644
--- a/app/javascript/modules/listings/DirectoryPageNavigationBar.scss
+++ b/app/javascript/modules/listings/DirectoryPageNavigationBar.scss
@@ -2,14 +2,13 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
+  background-color: var(--seeds-bg-color-surface);
   margin: 0 auto;
   width: 100%;
-  max-width: var(--bloom-width-5xl);
 
-  --inter-row-gap: var(--bloom-s12);
-  --max-width: var(--bloom-width-3xl);
-  --max-width-large-screen: var(--bloom-width-5xl);
+  --inter-row-gap: var(--seeds-s12);
+  --max-width: var(--seeds-width-3xl);
+  --max-width-large-screen: var(--seeds-width-5xl);
   --margin: var(--inter-row-gap) auto;
   --seeds-focus-ring-box-shadow: none !important;
   --seeds-focus-ring-outline: none !important;
@@ -29,26 +28,25 @@
     --max-width: var(--max-width-large-screen);
   }
 
-  .seeds-button {
+  .directory-page-navigation-bar__button {
     flex: 1 0 0;
     min-width: max-content;
-    margin-left: 16px;
-    padding: var(--sizes-size-s4, 16px) var(--sizes-size-s6, 24px);
+    margin-left: var(--seeds-s4);
+    padding: var(--seeds-s4) var(--seeds-s6);
 
-    background: var(--components-tabs-background-color, #fff);
-    color: var(--components-tabs-label-color, #767676);
-    border: var(--borders-width-1, 1px) solid var(--components-tabs-border-color, #dedee0);
+    background: var(--seeds-bg-color-surface);
+    color: var(--seeds-text-color-light);
+    border: var(--seeds-border-1) solid var(--seeds-color-gray-450);
     border-radius: 0px;
   }
-  .seeds-button:hover,
+  .directory-page-navigation-bar__button:hover,
   .active {
     color: var(--components-tabs-active-label-color, #222);
     background: var(--components-tabs-background-color);
 
-    border-top: var(--borders-width-1, 1px) solid var(--components-tabs-border-color, #dedee0);
-    border-right: var(--borders-width-1, 1px) solid var(--components-tabs-border-color, #dedee0);
-    border-left: var(--borders-width-1, 1px) solid var(--components-tabs-border-color, #dedee0);
-    border-bottom: var(--components-tabs-active-indicator-width, 2px) solid
-      var(--components-tabs-active-indicator-color, #0077da);
+    border-top: var(--seeds-border-1) solid var(--seeds-color-gray-450);
+    border-right: var(--seeds-border-1) solid var(--seeds-color-gray-450);
+    border-left: var(--seeds-border-1) solid var(--seeds-color-gray-450);
+    border-bottom: var(--seeds-s0_5) solid var(---seeds-color-primary);
   }
 }
diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx
index df5d051004..c867c63a8e 100644
--- a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx
+++ b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx
@@ -28,7 +28,11 @@ const DirectoryPageNavigationBar = ({
               const y = element.getBoundingClientRect().top + window.scrollY + yOffset
               window.scrollTo({ top: y, behavior: "smooth" })
             }}
-            className={activeItem === section.ref ? "active" : ""}
+            className={
+              activeItem === section.ref
+                ? "active directory-page-navigation-bar__button"
+                : "directory-page-navigation-bar__button"
+            }
           >
             {typeof section.icon === "string" ? (
               <Icon size="medium" symbol={section.icon as UniversalIconType} />