From fd766f0b77532b18b3decb08f7b63012ed740803 Mon Sep 17 00:00:00 2001 From: Bitian Zhang <86077274+bzzz-coding@users.noreply.github.com> Date: Wed, 7 Feb 2024 22:58:55 -0800 Subject: [PATCH] Refactor LandingPageIntro (#498) * Refactored LandingPageIntro with Tailwind * Added MemoryRouter for testing the Link component --- frontend/src/assets/images/images.tsx | 7 +- .../pages/LandingPage/LandingPageIntro.tsx | 47 ++++++++---- .../pages/LandingPage/_LandingPageIntro.scss | 74 ------------------- frontend/src/pages/LandingPage/_index.scss | 1 - frontend/tests/pages/LandingPage.test.tsx | 7 +- 5 files changed, 40 insertions(+), 96 deletions(-) delete mode 100644 frontend/src/pages/LandingPage/_LandingPageIntro.scss diff --git a/frontend/src/assets/images/images.tsx b/frontend/src/assets/images/images.tsx index 5abfcea8..d80d2983 100644 --- a/frontend/src/assets/images/images.tsx +++ b/frontend/src/assets/images/images.tsx @@ -31,7 +31,6 @@ import IconX from "./svgs/icons/icon-x.svg"; import IconChevronLeft from "./svgs/icons/icon-chevron-left.svg"; import IconChevronRight from "./svgs/icons/icon-chevron-right.svg"; -import iconArrowDown from "./svgs/icons/icon-arrow-down.svg?url"; import iconArrowLeft from "./svgs/icons/icon-arrow-left.svg?url"; import iconCheckboxY from "./svgs/icons/icon-checkbox-yes.svg?url"; import iconCheckboxN from "./svgs/icons/icon-checkbox-no.svg?url"; @@ -47,8 +46,6 @@ import iconSearch from "./svgs/icons/icon-search.svg?url"; import iconX from "./svgs/icons/icon-x.svg?url"; // Group Background Image -import landingPageFg from "./svgs/landing-page-fg.svg?url"; -import landingPageBg from "./svgs/landing-page-bg.svg?url"; import notFoundPageImg from "./svgs/not-found-page.svg?url"; // CTJ Logos @@ -192,7 +189,6 @@ export { IconPlus, IconSearch, IconX, - iconArrowDown, iconArrowLeft, iconCheckboxY, iconCheckboxN, @@ -239,3 +235,6 @@ export { default as creditsPageBgTop } from "./svgs/credits-page-bg-top.svg?url" export { default as creditsPageBgBottom } from "./svgs/credits-page-bg-bottom.svg?url"; export { default as creditsPageHighFive } from "./svgs/credits-page-high-five.svg?url"; export { default as landingPageCreativeTeam } from "./svgs/landing-page-creative-team.svg?url"; +export { default as LandingPageBg } from "./svgs/landing-page-bg.svg?url"; +export { default as LandingPageFg } from "./svgs/landing-page-fg.svg?url"; +export { default as iconArrowDown } from "./svgs/icons/icon-arrow-down.svg?url"; diff --git a/frontend/src/pages/LandingPage/LandingPageIntro.tsx b/frontend/src/pages/LandingPage/LandingPageIntro.tsx index 96457187..8f0689f6 100644 --- a/frontend/src/pages/LandingPage/LandingPageIntro.tsx +++ b/frontend/src/pages/LandingPage/LandingPageIntro.tsx @@ -1,37 +1,52 @@ // External Imports import React from "react"; +import { Link } from "react-router-dom"; // Internal Imports -import { iconArrowDown } from "assets/images/images"; -import { Button } from "components/components"; +import { + iconArrowDown, + LandingPageBg, + LandingPageFg, +} from "assets/images/images"; function LandingPageIntro() { return ( -
-
-

+
+
+

Together,
we can create greater civic change

-

+

CivicTechJobs unites ambitious technology practitioners with volunteer opportunities from a central hub of listings to build digital products, programs, and services.

- + +
+ +
-
- -

Our Mission

-

+ +

+ Arrow Down Icon +

+ Our Mission +

+

We bring together civic-minded volunteers from diverse backgrounds such as YOU to help local communities and governments. Thanks to the power of our volunteers, we are able to positively impact the diff --git a/frontend/src/pages/LandingPage/_LandingPageIntro.scss b/frontend/src/pages/LandingPage/_LandingPageIntro.scss deleted file mode 100644 index f131e863..00000000 --- a/frontend/src/pages/LandingPage/_LandingPageIntro.scss +++ /dev/null @@ -1,74 +0,0 @@ -@use "components/Basics" as *; -@use "components/Buttons" as *; - -.landing-container { - background-image: url("assets/images/svgs/landing-page-bg.svg"); - background-position: bottom; - background-repeat: no-repeat; - background-size: 100%; - - @include breakpoint-media-max("smtablet") { - margin-top: 48px; - } -} - -.landing-intro-container { - background-image: url("assets/images/svgs/landing-page-fg.svg"); - background-position: 50% 75%; - background-repeat: no-repeat; - background-size: 90%; - height: 75vw; - - @include breakpoint-media-max("laptop") { - background-position: 50% 95%; - } -} - -.landing-intro-title { - max-width: 800px; - - @include breakpoint-media-max("smtablet") { - @include title(4); - } -} - -.landing-intro-paragraph { - max-width: 705px; - - @include breakpoint-media-max("smtablet") { - @include paragraph(3); - } -} - -.landing-intro-btn { - @include button-responsive("smtablet", "md"); -} - -.arrow-down { - width: 24px; - @include hidden; - - @include breakpoint-media-max("smtablet") { - display: inline-block; - } -} - -.landing-mission-container { - background-color: $color-tan-light; - flex-direction: column; - width: 100%; -} - -.landing-mission-title { - @include breakpoint-media-max("smtablet") { - @include title(5); - } -} - -.landing-mission-paragraph { - max-width: 800px; - - @include breakpoint-media-max("smtablet") { - @include paragraph(3); - } -} diff --git a/frontend/src/pages/LandingPage/_index.scss b/frontend/src/pages/LandingPage/_index.scss index d949640e..aa6eedd7 100644 --- a/frontend/src/pages/LandingPage/_index.scss +++ b/frontend/src/pages/LandingPage/_index.scss @@ -1,3 +1,2 @@ -@forward "LandingPageIntro"; @forward "LandingPageCop"; @forward "LandingPageCopCards"; diff --git a/frontend/tests/pages/LandingPage.test.tsx b/frontend/tests/pages/LandingPage.test.tsx index 483ffb38..4fcd72af 100644 --- a/frontend/tests/pages/LandingPage.test.tsx +++ b/frontend/tests/pages/LandingPage.test.tsx @@ -8,6 +8,7 @@ import { config } from "react-transition-group"; // Internal imports import { LandingPage } from "pages/LandingPage/LandingPage"; +import { MemoryRouter } from "react-router-dom"; // Disables animation transition time so it will not hamper testing config.disabled = true; @@ -15,7 +16,11 @@ config.disabled = true; describe("Landing Page", () => { test("Landing Page dialog", async () => { const user = userEvent.setup(); - render(); + render( + + + + ); expect(screen.getByRole("presentation")).toHaveClass("hidden");