From f64cc1f45c8483834663e145b07907f1cbe35bab Mon Sep 17 00:00:00 2001 From: vincent Date: Sun, 12 Apr 2026 10:16:23 -0400 Subject: [PATCH 01/28] Fix ballot question count refresh after publish --- .../BallotQuestionDetails.test.tsx | 115 ++++++++++--- .../ballotquestions/BallotQuestionDetails.tsx | 159 +++++++++++++++++- 2 files changed, 252 insertions(+), 22 deletions(-) diff --git a/components/ballotquestions/BallotQuestionDetails.test.tsx b/components/ballotquestions/BallotQuestionDetails.test.tsx index 21a47c878..c97774cd0 100644 --- a/components/ballotquestions/BallotQuestionDetails.test.tsx +++ b/components/ballotquestions/BallotQuestionDetails.test.tsx @@ -1,12 +1,14 @@ import "@testing-library/jest-dom" -import { render, screen } from "@testing-library/react" +import { render, screen, waitFor } from "@testing-library/react" import { BallotQuestionDetails } from "./BallotQuestionDetails" +const mockUsePublishedTestimonyListing = jest.fn(() => ({ + items: { result: [] }, + pagination: {} +})) + jest.mock("../db", () => ({ - usePublishedTestimonyListing: () => ({ - items: { result: [] }, - pagination: {} - }) + usePublishedTestimonyListing: () => mockUsePublishedTestimonyListing() })) jest.mock("./BallotQuestionHeader", () => ({ @@ -24,25 +26,100 @@ jest.mock("./OverviewTab", () => ({ })) jest.mock("./TestimoniesTab", () => ({ - TestimoniesTab: () =>
Testimonies
+ TestimoniesTab: ({ + testimonySummary + }: { + testimonySummary: { + testimonyCount: number + endorseCount: number + neutralCount: number + opposeCount: number + } + }) => ( +
+ Summary {testimonySummary.testimonyCount}/{testimonySummary.endorseCount}/ + {testimonySummary.neutralCount}/{testimonySummary.opposeCount} +
+ ) +})) + +let mockPanelStatus: "published" | "createInProgress" | "editInProgress" = + "published" +let mockPublication: + | { position?: "endorse" | "neutral" | "oppose"; version?: number } + | undefined = undefined + +jest.mock("../publish/hooks", () => ({ + usePanelStatus: () => mockPanelStatus, + usePublishState: () => ({ publication: mockPublication }) })) +jest.mock("../firebase", () => ({ + firestore: {} +})) + +const mockGetDoc = jest.fn(() => new Promise(() => {})) +const mockDoc = jest.fn(() => ({})) + +jest.mock("firebase/firestore", () => ({ + doc: (...args: unknown[]) => mockDoc(...args), + getDoc: (...args: unknown[]) => mockGetDoc(...args) +})) + +const defaultProps = { + ballotQuestion: { id: "25-15" } as any, + bill: null, + hearings: [], + testimonySummary: { + testimonyCount: 3, + endorseCount: 1, + neutralCount: 1, + opposeCount: 1 + } +} + describe("BallotQuestionDetails", () => { + beforeEach(() => { + mockPanelStatus = "published" + mockPublication = undefined + mockGetDoc.mockClear() + mockDoc.mockClear() + }) + it("passes the testimony count through to the ballot-question nav", () => { - render( - - ) + render() expect(screen.getByText("Nav 3")).toBeInTheDocument() }) + + it("optimistically increments counts after a new perspective is published", async () => { + const { rerender } = render() + + mockPanelStatus = "createInProgress" + rerender() + + mockPanelStatus = "published" + mockPublication = { position: "endorse", version: 1 } + rerender() + + await waitFor(() => { + expect(screen.getByText("Nav 4")).toBeInTheDocument() + }) + }) + + it("optimistically swaps buckets when an existing perspective changes position", async () => { + const { rerender } = render() + + mockPanelStatus = "editInProgress" + mockPublication = { position: "endorse", version: 1 } + rerender() + + mockPanelStatus = "published" + mockPublication = { position: "oppose", version: 2 } + rerender() + + await waitFor(() => { + expect(screen.getByText("Nav 3")).toBeInTheDocument() + }) + }) }) diff --git a/components/ballotquestions/BallotQuestionDetails.tsx b/components/ballotquestions/BallotQuestionDetails.tsx index 3945c1880..486d84051 100644 --- a/components/ballotquestions/BallotQuestionDetails.tsx +++ b/components/ballotquestions/BallotQuestionDetails.tsx @@ -1,4 +1,4 @@ -import { useState } from "react" +import { useState, useEffect, useRef } from "react" import { Container, Row, Col } from "react-bootstrap" import { BallotQuestion, Bill, usePublishedTestimonyListing } from "../db" import { BallotQuestionHeader } from "./BallotQuestionHeader" @@ -12,6 +12,30 @@ import { getBallotQuestionPanelId, getBallotQuestionTabId } from "./types" +import { usePanelStatus, usePublishState } from "../publish/hooks" +import { firestore } from "../firebase" +import { doc, getDoc } from "firebase/firestore" + +interface CountDelta { + testimonyCount: number + endorseCount: number + neutralCount: number + opposeCount: number +} + +const zeroCountDelta = (): CountDelta => ({ + testimonyCount: 0, + endorseCount: 0, + neutralCount: 0, + opposeCount: 0 +}) + +const addCountDeltas = (left: CountDelta, right: CountDelta): CountDelta => ({ + testimonyCount: left.testimonyCount + right.testimonyCount, + endorseCount: left.endorseCount + right.endorseCount, + neutralCount: left.neutralCount + right.neutralCount, + opposeCount: left.opposeCount + right.opposeCount +}) export const BallotQuestionDetails = ({ ballotQuestion, @@ -29,6 +53,135 @@ export const BallotQuestionDetails = ({ ballotQuestionId: ballotQuestion.id }) + const [countDelta, setCountDelta] = useState(zeroCountDelta) + + // Track publish lifecycle + const panelStatus = usePanelStatus() + const { publication } = usePublishState() + const wasInProgressRef = useRef(false) + const capturedOldPositionRef = useRef(undefined) + const isMountedRef = useRef(true) + + // Track when user enters a submit action + useEffect(() => { + if ( + panelStatus === "createInProgress" || + panelStatus === "editInProgress" + ) { + wasInProgressRef.current = true + } + }, [panelStatus]) + + // Capture old position while in editInProgress (before syncTestimony overwrites it) + useEffect(() => { + if (panelStatus === "editInProgress") { + capturedOldPositionRef.current = publication?.position + } else if (panelStatus === "createInProgress") { + capturedOldPositionRef.current = undefined + } + }, [panelStatus, publication]) + + // Reconciliation: fetch fresh ballot question doc + const reconcileBallotQuestionCounters = async ( + expectedSummary: BallotQuestionTestimonySummary + ) => { + const maxRetries = 3 + const delayMs = 500 + + for (let attempt = 0; attempt < maxRetries; attempt++) { + if (!isMountedRef.current) return + + try { + const ballotQuestionRef = doc( + firestore, + "ballotQuestions", + ballotQuestion.id + ) + const freshBQ = await getDoc(ballotQuestionRef) + const freshData = freshBQ.data() as BallotQuestion | undefined + + if (freshData && isMountedRef.current) { + // Compare all four counters + const countersMatch = + (freshData.testimonyCount ?? 0) === + expectedSummary.testimonyCount && + (freshData.endorseCount ?? 0) === expectedSummary.endorseCount && + (freshData.neutralCount ?? 0) === expectedSummary.neutralCount && + (freshData.opposeCount ?? 0) === expectedSummary.opposeCount + + if (countersMatch) { + // Counters have caught up; clear the delta + setCountDelta(zeroCountDelta()) + capturedOldPositionRef.current = undefined + return + } + } + } catch (err) { + console.error("Error fetching ballot question counters:", err) + } + + // If counters don't match yet, wait and retry + if (attempt < maxRetries - 1 && isMountedRef.current) { + await new Promise(resolve => setTimeout(resolve, delayMs)) + } + } + + // After retries exhausted, leave delta applied; user will see eventual consistency + console.warn("Ballot question counters did not reconcile after retries") + } + + // Detect successful publish and apply delta + useEffect(() => { + if (panelStatus === "published" && wasInProgressRef.current) { + wasInProgressRef.current = false + + const delta: CountDelta = zeroCountDelta() + + const oldPosition = capturedOldPositionRef.current + const newPosition = publication?.position + + if (!oldPosition && newPosition) { + // New submission + delta.testimonyCount = 1 + delta[`${newPosition}Count` as keyof CountDelta] = 1 + } else if (oldPosition && newPosition && oldPosition !== newPosition) { + // Edit with position change + delta[`${oldPosition}Count` as keyof CountDelta] = -1 + delta[`${newPosition}Count` as keyof CountDelta] = 1 + } + // else: edit without position change, or no publication — no delta + + const nextDelta = addCountDeltas(countDelta, delta) + setCountDelta(nextDelta) + capturedOldPositionRef.current = undefined + + // Compute expected final summary and pass to reconciliation + const expectedSummary = { + testimonyCount: + testimonySummary.testimonyCount + nextDelta.testimonyCount, + endorseCount: testimonySummary.endorseCount + nextDelta.endorseCount, + neutralCount: testimonySummary.neutralCount + nextDelta.neutralCount, + opposeCount: testimonySummary.opposeCount + nextDelta.opposeCount + } + reconcileBallotQuestionCounters(expectedSummary) + } + }, [countDelta, panelStatus, publication, testimonySummary]) + + // Cleanup on unmount + useEffect(() => { + return () => { + isMountedRef.current = false + } + }, []) + + // Display summary with optimistic delta applied + const displayedSummary = { + testimonyCount: testimonySummary.testimonyCount + countDelta.testimonyCount, + endorseCount: testimonySummary.endorseCount + countDelta.endorseCount, + neutralCount: testimonySummary.neutralCount + countDelta.neutralCount, + opposeCount: testimonySummary.opposeCount + countDelta.opposeCount + } + const renderContent = () => { switch (activeTab) { case "overview": @@ -45,7 +198,7 @@ export const BallotQuestionDetails = ({ ballotQuestion={ballotQuestion} bill={bill} testimony={testimony} - testimonySummary={testimonySummary} + testimonySummary={displayedSummary} /> ) default: @@ -62,7 +215,7 @@ export const BallotQuestionDetails = ({ From e2555730787f1a77356ce423c38b982723b876b0 Mon Sep 17 00:00:00 2001 From: vincent Date: Mon, 13 Apr 2026 12:23:01 -0400 Subject: [PATCH 02/28] Add visual system token foundation --- components/shared/CommonComponents.tsx | 25 ++++---- styles/bootstrap.scss | 3 + styles/globals.css | 88 +++++++++++++++++++++----- 3 files changed, 88 insertions(+), 28 deletions(-) diff --git a/components/shared/CommonComponents.tsx b/components/shared/CommonComponents.tsx index 02d692e78..c8e7539ce 100644 --- a/components/shared/CommonComponents.tsx +++ b/components/shared/CommonComponents.tsx @@ -39,15 +39,16 @@ export const DescrContainer = styled.div` line-height: 20px; letter-spacing: 0.015em; text-align: left; + color: var(--maple-text-body); ` export const Divider = styled.hr` - border: 1px solid #979797; + border: 1px solid var(--maple-border-default); margin: 0; ` const EmailContainer = styled.a` - color: #1a3185; + color: var(--maple-brand-primary); font-size: 20px; font-weight: 600; line-height: 25px; @@ -57,12 +58,12 @@ const EmailContainer = styled.a` ` export const FeatureCalloutButton = styled.button` - border-radius: 16px; + border-radius: var(--maple-radius-xl); font-size: 12px; ` export const NameContainer = styled.div` - color: #1a3185; + color: var(--maple-brand-primary); font-size: 25px; font-weight: 600; line-height: 31px; @@ -73,28 +74,30 @@ export const NameContainer = styled.div` export const PageDescr = styled.div` font-weight: 700; font-size: 25px; + color: var(--maple-text-body); ` export const PageTitle = styled.div` font-weight: 600; font-size: 60px; + color: var(--maple-text-strong); ` export const SectionContainer = styled.div` - border-radius: 10px; - background: white; + border-radius: var(--maple-radius-lg); + background: var(--maple-surface-base); ` export const SectionTitle = styled.div` - color: #ffffff; - background: #1a3185; + color: var(--maple-text-inverse); + background: var(--maple-brand-primary); font-weight: 500; font-size: 26px; - border-radius: 10px 10px 0 0; + border-radius: var(--maple-radius-lg) var(--maple-radius-lg) 0 0; ` const StyledContainer = styled(Container)` //border-top: 1px solid #979797; - background: white; - border-radius: 0 0 10px 10px; + background: var(--maple-surface-base); + border-radius: 0 0 var(--maple-radius-lg) var(--maple-radius-lg); ` diff --git a/styles/bootstrap.scss b/styles/bootstrap.scss index 9412d68b0..62d145e18 100644 --- a/styles/bootstrap.scss +++ b/styles/bootstrap.scss @@ -10,6 +10,9 @@ $green: #3d9922; $gray-700: #495057; $pantone-blue: #d1d6e7; +// Keep current page background and semantic bootstrap palette stable in PR 1. +// Visual-system refinement happens via semantic CSS tokens in styles/globals.css; +// revisit $body-bg / $primary only after token adoption and blast-radius testing. $body-bg: #eae7e7; $primary: $red; diff --git a/styles/globals.css b/styles/globals.css index 04f082576..44b6b9e44 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -14,6 +14,56 @@ :root { --mobile-nav-link-color: rgba(255, 255, 255, 0.92); --mobile-nav-link-color-active: rgba(255, 255, 255, 1); + --maple-brand-primary: #1a3185; + --maple-brand-primary-strong: #12266f; + --maple-brand-accent: #ff8600; + --maple-brand-danger: #c71e32; + --maple-brand-dark: #0b0a3e; + --maple-text-strong: #1e293b; + --maple-text-body: #334155; + --maple-text-muted: #64748b; + --maple-text-inverse: #ffffff; + --maple-surface-base: #ffffff; + /* Provisional: keep the current page background in PR 1 and retune later with surface contrast as a group. */ + --maple-surface-page: #eae7e7; + /* Provisional: accent family comes from ballot-question work and may remain app-wide or become scoped later. */ + --maple-surface-muted: rgba(248, 250, 252, 0.9); + --maple-surface-accent: rgba(94, 114, 228, 0.08); + --maple-surface-border: rgba(15, 23, 42, 0.08); + --maple-border-default: rgba(15, 23, 42, 0.15); + --maple-border-accent: rgba(94, 114, 228, 0.18); + --maple-border-accent-strong: rgba(94, 114, 228, 0.24); + --maple-focus-ring: rgba(94, 114, 228, 0.35); + --maple-shadow-sm: 0 0.25rem 1rem rgba(15, 23, 42, 0.06); + --maple-shadow-md: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06); + --maple-shadow-hover: 0 0.65rem 1.35rem rgba(15, 23, 42, 0.12); + --maple-radius-sm: 4px; + --maple-radius-md: 8px; + --maple-radius-lg: 10px; + --maple-radius-xl: 16px; + --maple-radius-pill: 999px; + --maple-space-xs: 0.25rem; + --maple-space-sm: 0.5rem; + --maple-space-md: 0.75rem; + --maple-space-lg: 1rem; + --maple-space-xl: 1.5rem; + --maple-space-2xl: 2rem; + --maple-space-3xl: 3rem; + --maple-transition-fast: 0.15s ease; + --maple-transition-base: 0.2s ease; + --bq-surface-border: var(--maple-surface-border); + --bq-surface-shadow-soft: var(--maple-shadow-sm); + --bq-surface-shadow: var(--maple-shadow-md); + --bq-surface-shadow-hover: var(--maple-shadow-hover); + --bq-accent-border: var(--maple-border-accent); + --bq-accent-border-strong: var(--maple-border-accent-strong); + --bq-accent-fill-soft: var(--maple-surface-accent); + --bq-accent-fill: rgba(94, 114, 228, 0.12); + --bq-accent-ring: var(--maple-focus-ring); + --bq-muted-surface: var(--maple-surface-muted); + --bq-subtle-text: var(--maple-text-muted); + --bq-body-text: var(--maple-text-body); + --bq-strong-text: var(--maple-text-strong); } .navLink-primary { @@ -42,10 +92,10 @@ } .skip-link { - background: #ffffff; - border: 2px solid #12266f; + background: var(--maple-surface-base); + border: 2px solid var(--maple-brand-primary-strong); border-radius: 999px; - color: #12266f; + color: var(--maple-brand-primary-strong); font-weight: 700; left: 1rem; padding: 0.75rem 1rem; @@ -62,7 +112,7 @@ align-items: center; background: transparent; border: 0; - color: white; + color: var(--maple-text-inverse); display: inline-flex; justify-content: center; padding: 0; @@ -70,7 +120,7 @@ .mobile-nav-trigger:focus-visible { border-radius: 999px; - outline: 2px solid white; + outline: 2px solid var(--maple-text-inverse); outline-offset: 4px; } @@ -128,7 +178,7 @@ .modal-header { background-color: var(--bs-blue); - color: white; + color: var(--maple-text-inverse); } .modal-content { @@ -136,7 +186,7 @@ } .whitebackground { - background-color: white; + background-color: var(--maple-surface-base); } .bg-endorse { @@ -257,9 +307,10 @@ padding: 7px, 8px, 7px, 8px; } -<.ballot-question-back-link { - color: #475569; - transition: color 0.15s ease, transform 0.15s ease; +.ballot-question-back-link { + color: var(--maple-text-muted); + transition: color var(--maple-transition-fast), + transform var(--maple-transition-fast); } .ballot-question-back-link:hover { @@ -268,9 +319,9 @@ } .ballot-question-back-link:focus-visible { - outline: 3px solid rgba(94, 114, 228, 0.35); + outline: 3px solid var(--maple-focus-ring); outline-offset: 3px; - border-radius: 999px; + border-radius: var(--maple-radius-pill); } .ballot-question-pdf-link { @@ -311,11 +362,14 @@ .ballot-question-nav-link { cursor: pointer; - background-color: #f8fafc; - border: 1px solid rgba(15, 23, 42, 0.08); - color: #334155; - transition: transform 0.15s ease, box-shadow 0.15s ease, - border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; + background-color: var(--maple-surface-muted); + border: 1px solid var(--maple-surface-border); + color: var(--maple-text-body); + transition: transform var(--maple-transition-fast), + box-shadow var(--maple-transition-fast), + border-color var(--maple-transition-fast), + background-color var(--maple-transition-fast), + color var(--maple-transition-fast); } .ballot-question-nav-link:hover { From b7261a600c85c609cb68473606ca4f6887ae9610 Mon Sep 17 00:00:00 2001 From: vincent Date: Mon, 13 Apr 2026 12:27:44 -0400 Subject: [PATCH 03/28] Refine typography and button styling --- components/buttons.tsx | 65 +++++++++++++++++++++--------------------- styles/bootstrap.scss | 32 +++++++++++++++------ styles/globals.css | 10 ++----- 3 files changed, 60 insertions(+), 47 deletions(-) diff --git a/components/buttons.tsx b/components/buttons.tsx index 723914368..b58272304 100644 --- a/components/buttons.tsx +++ b/components/buttons.tsx @@ -8,6 +8,28 @@ import styled from "styled-components" import { Button, Image, Overlay, OverlayTrigger, Spinner } from "./bootstrap" import { Internal } from "./links" +const sharedInteractiveButtonStyles = ` + transition: filter var(--maple-transition-fast), + outline-width var(--maple-transition-fast), + box-shadow var(--maple-transition-fast), + transform var(--maple-transition-fast); + + &:hover { + filter: brightness(0.9); + } + + &:active { + filter: brightness(0.82); + } + + &:focus { + outline: 3px solid var(--maple-focus-ring); + } + + border-radius: var(--maple-radius-sm); + padding: 1px; +` + export const TableButton = ({ onclick, children @@ -74,20 +96,7 @@ export const ImageButton = styled< ) })` cursor: pointer; - - transition: filter 0.15s ease-in-out, outline-width 0.1s ease-in-out; - &:hover { - filter: brightness(70%); - } - &:active { - filter: brightness(50%); - } - &:focus { - outline: 3px solid var(--bs-blue-300); - } - border-radius: 3px; - - padding: 1px; + ${sharedInteractiveButtonStyles} ` export const TextButton = ({ @@ -117,7 +126,7 @@ export const FillButton = ({ @@ -420,5 +421,5 @@ export const GearButton = styled( ) } )` - --bs-btn-bg: white; // override bootstrap button background transparency to match Figma + --bs-btn-bg: var(--maple-surface-base); ` diff --git a/styles/bootstrap.scss b/styles/bootstrap.scss index 62d145e18..1330e803f 100644 --- a/styles/bootstrap.scss +++ b/styles/bootstrap.scss @@ -62,14 +62,17 @@ $tooltip-arrow-color: $blue; $enable-negative-margins: true; // Font size adjustments -// $font-size-base: 16px; // default is 1rem. initially using exact px values but may go back to rem etc - -$h1-font-size: 40px; -$h2-font-size: 32px; -$h3-font-size: 28px; -$h4-font-size: 24px; -$h5-font-size: 20px; -$h6-font-size: 16px; +// Tighten heading hierarchy while keeping the current scale broadly intact. +$font-size-base: 1rem; +$line-height-base: 1.5; +$headings-line-height: 1.2; + +$h1-font-size: 3rem; +$h2-font-size: 2.375rem; +$h3-font-size: 1.875rem; +$h4-font-size: 1.5rem; +$h5-font-size: 1.25rem; +$h6-font-size: 1rem; $font-sizes: ( 1: $h1-font-size, @@ -102,6 +105,19 @@ $utilities: ( --bs-dark-blue: #0b0a3e; } +.btn { + --bs-btn-border-radius: var(--maple-radius-md); + --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--maple-focus-ring); + --bs-btn-font-weight: 700; + --bs-btn-padding-x: var(--maple-space-xl); + --bs-btn-padding-y: var(--maple-space-sm); + transition: background-color var(--maple-transition-fast), + border-color var(--maple-transition-fast), + color var(--maple-transition-fast), + box-shadow var(--maple-transition-fast), + transform var(--maple-transition-fast); +} + @mixin button-contrast($color-a, $color-b) { --#{$prefix}btn-bg: #{$color-a}; --#{$prefix}btn-hover-bg: #{$color-b}; diff --git a/styles/globals.css b/styles/globals.css index 44b6b9e44..1362e5538 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -162,17 +162,13 @@ width: fit-content; } -.btn { - padding: 1rem; -} - .offcanvas { background-color: var(--bs-body-bg) !important; } .btn-disabled { - background-color: #c3bebe; - color: black; + background-color: var(--maple-surface-page); + color: var(--maple-text-body); border: none; } @@ -204,7 +200,7 @@ .form-navigation-btn { min-width: 10rem; line-height: 2.5rem; - padding: 0 0.5rem 0 0.5rem; + padding: 0 var(--maple-space-sm); } .tooltip-inner { From 24a227c0f7111491587adf24feb0e20565bb0604 Mon Sep 17 00:00:00 2001 From: vincent Date: Mon, 13 Apr 2026 12:33:09 -0400 Subject: [PATCH 04/28] Refine navbar and footer shell styling --- components/Footer/Footer.tsx | 40 ++++++++++++++++------- components/Footer/FooterContainer.tsx | 4 +-- components/Navbar.tsx | 44 ++++++++++++------------- components/NavbarComponents.tsx | 10 +++--- styles/globals.css | 46 ++++++++++++++++++++++++--- 5 files changed, 98 insertions(+), 46 deletions(-) diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index a8e7f014e..eedd69385 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -24,25 +24,25 @@ 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; } ` @@ -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/Navbar.tsx b/components/Navbar.tsx index 96ca2eb58..0f6c0dfb7 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 (