Skip to content

Commit

Permalink
feat: DAH-2661 seeds css
Browse files Browse the repository at this point in the history
  • Loading branch information
tallulahkay committed Dec 17, 2024
1 parent e80382b commit 23f24a7
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 32 deletions.
10 changes: 5 additions & 5 deletions app/assets/json/translations/react/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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>",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
18 changes: 16 additions & 2 deletions app/javascript/modules/constants.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
32 changes: 15 additions & 17 deletions app/javascript/modules/listings/DirectoryPageNavigationBar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down

0 comments on commit 23f24a7

Please sign in to comment.