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({
>
{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 (
-
{t("headers.follow")}
++ {t("headers.follow")} +