From d356a9bcdb7c5bffda2d179ef344532bcc9a3d9f Mon Sep 17 00:00:00 2001 From: Lexa Michaelides <32111123+LexaMichaelides@users.noreply.github.com> Date: Wed, 22 Apr 2026 11:23:26 -0400 Subject: [PATCH 01/22] Merge pull request #51 from hyphacoop/visual-system-refinement Refine MAPLE visual system and shared surfaces --- .../AnnouncementBanner/AnnouncementBanner.tsx | 6 +- .../TranscriptAnnouncement.tsx | 2 +- components/BillStatusCard/BillStatusCard.tsx | 6 +- components/Card/Card.tsx | 13 +- .../StyledEditProfileComponents.tsx | 4 +- components/Footer/Footer.tsx | 44 ++- components/Footer/FooterContainer.tsx | 4 +- components/HeroHeader/HeroHeader.module.css | 2 +- components/InTheNews/NewsCard.tsx | 6 +- components/Navbar.tsx | 48 ++- components/NavbarComponents.tsx | 26 +- .../Newsfeed/StyledNewsfeedComponents.tsx | 12 +- components/NewsfeedCard/NewsfeedCard.test.tsx | 2 +- components/Policies/PolicyPage.module.css | 24 +- components/TestimonyCard/MoreButton.tsx | 5 +- components/TestimonyCard/ReportModal.tsx | 2 +- components/TestimonyCard/Tabs.tsx | 10 +- .../TestimonyCard/UserFilterDropdown.tsx | 4 +- components/TestimonyCard/ViewTestimony.tsx | 2 +- .../BallotQuestionDetails.test.tsx | 115 +++++- .../ballotquestions/BallotQuestionDetails.tsx | 159 ++++++++- .../ballotquestions/BallotQuestionHeader.tsx | 60 +--- .../ballotquestions/BallotQuestionNav.tsx | 19 +- .../BallotQuestionTabButton.tsx | 4 +- .../ballotquestions/BrowseBallotQuestions.tsx | 151 +++----- .../ballotquestions/CommitteeHearing.tsx | 26 +- components/ballotquestions/DescriptionBox.tsx | 15 +- components/ballotquestions/OverviewTab.tsx | 48 +-- components/ballotquestions/TestimoniesTab.tsx | 39 +-- .../ballotquestions/YourTestimonyPanel.tsx | 23 +- components/ballotquestions/status.ts | 25 +- components/bill/BillTracker.tsx | 2 +- components/bill/SponsorsAndCommittees.tsx | 2 +- components/bill/Summary.tsx | 18 +- components/bill/TestimonyCounts.tsx | 2 +- components/buttons.tsx | 65 ++-- components/dashboard/ResourcesCard.tsx | 10 +- components/hearing/HearingSidebar.tsx | 8 +- components/hearing/Transcriptions.tsx | 33 +- components/layout.tsx | 4 +- components/search/SearchContainer.tsx | 68 ++-- components/search/SortBy.tsx | 2 +- components/shared/CommonComponents.tsx | 25 +- components/shared/TitledSectionCard.tsx | 38 +- components/table/PaginationButtons.tsx | 6 +- .../PolicyActions.test.tsx | 2 +- functions/src/ballotQuestions/types.ts | 7 - .../BrowseBallotQuestions.stories.tsx | 90 +++++ .../dashboard/ResourcesCard.stories.tsx | 13 + .../hearing/HearingSidebar.stories.tsx | 43 +++ styles/bootstrap.scss | 280 ++++++++++++++- styles/globals.css | 330 +++++++++++------- .../ballotQuestions/bq-test-fixture.yaml | 2 +- 53 files changed, 1245 insertions(+), 711 deletions(-) create mode 100644 stories/organisms/ballotquestions/BrowseBallotQuestions.stories.tsx create mode 100644 stories/organisms/dashboard/ResourcesCard.stories.tsx create mode 100644 stories/organisms/hearing/HearingSidebar.stories.tsx diff --git a/components/AnnouncementBanner/AnnouncementBanner.tsx b/components/AnnouncementBanner/AnnouncementBanner.tsx index 6e678c1c2..663bfb032 100644 --- a/components/AnnouncementBanner/AnnouncementBanner.tsx +++ b/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -30,7 +30,11 @@ function AnnouncementBanner({ > diff --git a/components/AnnouncementBanner/TranscriptAnnouncement.tsx b/components/AnnouncementBanner/TranscriptAnnouncement.tsx index 8970bbfb5..b4f12dc73 100644 --- a/components/AnnouncementBanner/TranscriptAnnouncement.tsx +++ b/components/AnnouncementBanner/TranscriptAnnouncement.tsx @@ -11,7 +11,7 @@ function TranscriptAnnouncement() { {t("announcement.headingBody")}
{t("announcement.description")}{" "} - + {t("announcement.link")} diff --git a/components/BillStatusCard/BillStatusCard.tsx b/components/BillStatusCard/BillStatusCard.tsx index 02a31227e..8e3302fb4 100644 --- a/components/BillStatusCard/BillStatusCard.tsx +++ b/components/BillStatusCard/BillStatusCard.tsx @@ -39,10 +39,10 @@ const HandleBranchStyle = (branchStyle: string) => { var returnStyle switch (branchStyle) { case "HOUSE": - returnStyle = { backgroundColor: "#1a3185" } + returnStyle = { backgroundColor: "var(--maple-brand-primary)" } break case "SENATE": - returnStyle = { backgroundColor: "#A92929" } + returnStyle = { backgroundColor: "var(--maple-brand-senate)" } break default: returnStyle = { @@ -102,7 +102,7 @@ const ScrollStyle = styled.div` /* Handle */ ::-webkit-scrollbar-thumb { - background: #d9d9d9; + background: var(--maple-border-default); border-radius: 10px; } ` diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index 3a68788bc..dd3a165d0 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -1,9 +1,18 @@ import { ReactElement, useState } from "react" import CardBootstrap from "react-bootstrap/Card" +import styled from "styled-components" import { CardListItems, ListItem } from "./CardListItem" import { CardTitle } from "./CardTitle" import { SeeMore } from "./SeeMore" +const SurfaceCard = styled(CardBootstrap)` + background-color: var(--maple-surface-base); + border: 1px solid var(--maple-surface-border); + border-radius: var(--maple-radius-lg); + box-shadow: var(--maple-shadow-sm); + overflow: hidden; +` + interface CardItem { billName: string billNameElement?: ReactElement | undefined @@ -92,13 +101,13 @@ export const Card = (CardProps: CardProps) => { const shown = showAll ? allItems : allItems.slice(0, initialRowCount) return ( - + {headerContent} {} {bodyContent} {allItems.length > initialRowCount && ( )} - + ) } diff --git a/components/EditProfilePage/StyledEditProfileComponents.tsx b/components/EditProfilePage/StyledEditProfileComponents.tsx index 37e17f488..175f6d36a 100644 --- a/components/EditProfilePage/StyledEditProfileComponents.tsx +++ b/components/EditProfilePage/StyledEditProfileComponents.tsx @@ -23,7 +23,7 @@ export const StyledTabNav = styled(Nav).attrs(props => ({ color: var(--bs-dark); .nav-link.active { - color: #c71e32; + color: var(--maple-brand-danger); } .nav-link { @@ -53,7 +53,7 @@ export const TabNavLink = styled(Nav.Link).attrs(props => ({ className: `rounded-top m-0 p-0 ${props.className}` }))` &.active { - color: #c71e32; + color: var(--maple-brand-danger); } ` diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index 97bc9b9e9..bd9096404 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -24,37 +24,37 @@ export type PageFooterProps = { const TextHeader = styled.h6` font-size: 1rem; font-weight: bold; - color: #fff; + color: var(--maple-text-inverse); padding: 0.5rem 1rem 0 0; margin: 0; ` const BrowseHeader = styled(NavLink)` font-size: 1rem; - color: #fff; + color: var(--maple-text-inverse); padding: 0.5rem 1rem 0 0; margin: 0 0 10px 0; @media (max-width: 768px) { padding-bottom: 0.6rem; - border-bottom: solid 1.5px rgba(255, 255, 255, 0.75); + border-bottom: solid 1.5px var(--maple-border-inverse-soft); margin: 0; } &:hover { - color: white; + color: var(--maple-text-inverse); text-decoration: underline 1.5px; } ` const StyledInternalLink = styled(NavLink)` - color: rgba(255, 255, 255, 0.55); + color: var(--maple-text-inverse-muted); letter-spacing: -0.63px; padding-top: 4; margin: 5px 0; &:hover { - color: white; + color: var(--maple-text-inverse); text-decoration: none; } ` @@ -64,13 +64,19 @@ function MapleContainer({ className }: { className?: string }) { return (
-

{t("headers.follow")}

+

+ {t("headers.follow")} +

-
+
{t("legal.disclaimer")} {" - "} diff --git a/components/Footer/FooterContainer.tsx b/components/Footer/FooterContainer.tsx index 77bc21e39..6345be06d 100644 --- a/components/Footer/FooterContainer.tsx +++ b/components/Footer/FooterContainer.tsx @@ -15,7 +15,7 @@ export const FooterContainer = styled(Container)` display: flex; flex-grow: 1; justify-content: space-between; - color: (var(--bs-white)); + color: var(--maple-text-inverse); } .navbar-dark .navbar-nav .nav-link { @@ -49,7 +49,7 @@ export const FooterContainer = styled(Container)` } .dropdown-menu.show { - background-color: #000; + background-color: var(--maple-brand-dark); transition-timing-function: ease; } ` diff --git a/components/HeroHeader/HeroHeader.module.css b/components/HeroHeader/HeroHeader.module.css index 1381f5898..7031f941c 100644 --- a/components/HeroHeader/HeroHeader.module.css +++ b/components/HeroHeader/HeroHeader.module.css @@ -1,6 +1,6 @@ .container { color: white; - background-color: #1a3185; + background-color: var(--maple-brand-primary); overflow: hidden; } diff --git a/components/InTheNews/NewsCard.tsx b/components/InTheNews/NewsCard.tsx index cb545e354..bf9c4da20 100644 --- a/components/InTheNews/NewsCard.tsx +++ b/components/InTheNews/NewsCard.tsx @@ -12,7 +12,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => {
@@ -33,7 +33,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => { style={{ width: "1px", height: "1em", - backgroundColor: "black", + backgroundColor: "var(--maple-border-default)", alignSelf: "center" }} /> @@ -57,7 +57,7 @@ export const NewsCard = ({ newsItem }: NewsCardProps) => { href={newsItem.url} target="_blank" rel="noopener noreferrer" - style={{ color: "#1587D3", fontWeight: 800 }} + style={{ color: "var(--maple-brand-primary)", fontWeight: 800 }} > {t("readMoreButton")} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index b9b470e09..5e47c37d2 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -29,6 +29,10 @@ import { NavbarLinkWhyUse } from "./NavbarComponents" +const MobileCollapse = styled(Navbar.Collapse)` + background-color: var(--maple-brand-primary); +` + export const MainNavbar: React.FC> = () => { const isMobile = useMediaQuery("(max-width: 768px)") @@ -36,23 +40,6 @@ export const MainNavbar: React.FC> = () => { } const MobileNav: React.FC> = () => { - const BlackCollapse = styled(() => { - return ( - - {/* while MAPLE is trying to do away with inline styling, * - * both styled-components and bootstrap classes have been * - * ignoring height properties for some reason */} -
- {whichMenu == "site" ? : } -
-
- ) - })` - .bg-black { - background-color: black; - } - ` - const ProfileLinks = () => { return (