Merge pull request codeforboston#1533 from Mephistic/about-page-migrate

Bootstrap migration for About Pages
Mephistic · Apr 10, 2024 · a984729 · a984729
2 parents fa6cb42 + 682460e
commit a984729
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 67 deletions.
diff --git a/components/AboutPagesCard/AboutPagesCard.js → components/AboutPagesCard/AboutPagesCard.tsx b/components/AboutPagesCard/AboutPagesCard.js → components/AboutPagesCard/AboutPagesCard.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components"
 import { Card } from "../bootstrap"
+import { FC, PropsWithChildren } from "react"
 
 const StyledHeader = styled(Card.Header)`
   transform: translate(0);
@@ -19,7 +20,10 @@ const StyledHeader = styled(Card.Header)`
   }
 `
 
-const AboutPagesCard = ({ title, children }) => {
+const AboutPagesCard: FC<PropsWithChildren<{ title: string }>> = ({
+  title,
+  children
+}) => {
   return (
     <Card className="m-5 rounded-3 bg-white">
       <StyledHeader

diff --git a/...ts/about/ForIndividuals/ForIndividuals.js → ...s/about/ForIndividuals/ForIndividuals.tsx b/...ts/about/ForIndividuals/ForIndividuals.js → ...s/about/ForIndividuals/ForIndividuals.tsx
diff --git a/components/about/ForIndividualsCardContent/ForIndividualsCardContent.module.css b/components/about/ForIndividualsCardContent/ForIndividualsCardContent.module.css
diff --git a/...sCardContent/ForIndividualsCardContent.js → ...CardContent/ForIndividualsCardContent.tsx b/...sCardContent/ForIndividualsCardContent.js → ...CardContent/ForIndividualsCardContent.tsx
@@ -1,13 +1,12 @@
 import { Row, Col } from "../../bootstrap"
-import styles from "./ForIndividualsCardContent.module.css"
 import { SignInWithButton } from "../../auth"
 import { useTranslation } from "next-i18next"
 
 const WhyMAPLECardContent = () => {
   const { t } = useTranslation("forindividuals")
   return (
     <>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         {t("callToAction.title")}
       </h3>
       <p>{t("callToAction.bodytext")}</p>
@@ -19,7 +18,7 @@ const BenefitsCardContent = () => {
   const { t } = useTranslation("forindividuals")
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.youMatter.title")}
       </h3>
       <Row className="mb-3">
@@ -28,7 +27,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.multipleSides.title")}
       </h3>
       <Row className="mb-3">
@@ -37,7 +36,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.trustedOrgs.title")}
       </h3>
       <Row className="mb-3">
@@ -46,7 +45,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.anyLanguage.title")}
       </h3>
       <Row className="mb-3">
@@ -55,7 +54,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.stayInformed.title")}
       </h3>
       <Row className="mb-3">
@@ -71,17 +70,17 @@ const ChallengeCardContent = () => {
   const { t } = useTranslation("forindividuals")
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`} id="clo">
+      <h3 className={`text-left fw-bold mb-4 text-info`} id="clo">
         {t("challenge.title")}
       </h3>
       <p>{t("challenge.bodytextOne")}</p>
       <p>{t("challenge.bodytextTwo")}</p>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`} id="clo">
-        <div className={styles.btncontainer}>
+      <h3 className={`text-left fw-bold mb-4 text-info`} id="clo">
+        <div>
           <SignInWithButton label={t("challenge.signUp")} />
         </div>
       </h3>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         <a href="mailto:[email protected]">{t("challenge.contact")}</a>
       </h3>
     </>

diff --git a/...ts/about/ForLegislators/ForLegislators.js → ...s/about/ForLegislators/ForLegislators.tsx b/...ts/about/ForLegislators/ForLegislators.js → ...s/about/ForLegislators/ForLegislators.tsx
diff --git a/components/about/ForLegislatorsCardContent/ForLegislatorsCardContent.module.css b/components/about/ForLegislatorsCardContent/ForLegislatorsCardContent.module.css
diff --git a/...sCardContent/ForLegislatorsCardContent.js → ...CardContent/ForLegislatorsCardContent.tsx b/...sCardContent/ForLegislatorsCardContent.js → ...CardContent/ForLegislatorsCardContent.tsx
@@ -1,12 +1,11 @@
 import { Row, Col } from "../../bootstrap"
-import styles from "./ForLegislatorsCardContent.module.css"
 import { useTranslation } from "next-i18next"
 
 const WhyMAPLECardContent = () => {
   const { t } = useTranslation("forlegislators")
   return (
     <>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         {t("callToAction.title")}
       </h3>
       <p>{t("callToAction.bodytextOne")}</p>
@@ -19,7 +18,7 @@ const BenefitsCardContent = () => {
   const { t } = useTranslation("forlegislators")
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.constituents.title")}
       </h3>
       <Row className="mb-3">
@@ -28,7 +27,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.seeTestimony.title")}
       </h3>
       <Row className="mb-3">
@@ -37,7 +36,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.simplifyTestimony.title")}
       </h3>
       <Row className="mb-3">
@@ -46,7 +45,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.languageAccess.title")}
       </h3>
       <Row className="mb-3">
@@ -55,7 +54,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.advancedStatistics.title")}
       </h3>
       <Row className="mb-3">
@@ -71,11 +70,11 @@ const ChallengeCardContent = () => {
   const { t } = useTranslation("forlegislators")
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`} id="clo">
+      <h3 className={`text-left fw-bold mb-4 text-info`} id="clo">
         {t("challenge.title")}
       </h3>
       <p>{t("challenge.bodytext")}</p>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         <a href="mailto:[email protected]">{t("challenge.contact")}</a>
       </h3>
     </>

diff --git a/components/about/ForOrgs/ForOrgs.js → components/about/ForOrgs/ForOrgs.tsx b/components/about/ForOrgs/ForOrgs.js → components/about/ForOrgs/ForOrgs.tsx
diff --git a/components/about/ForOrgsCardContent/ForOrgsCardContent.module.css b/components/about/ForOrgsCardContent/ForOrgsCardContent.module.css
diff --git a/.../ForOrgsCardContent/ForOrgsCardContent.js → ...ForOrgsCardContent/ForOrgsCardContent.tsx b/.../ForOrgsCardContent/ForOrgsCardContent.js → ...ForOrgsCardContent/ForOrgsCardContent.tsx
@@ -3,13 +3,12 @@ import Link from "next/link"
 import { SignInWithButton } from "../../auth"
 import { Col, Row } from "../../bootstrap"
 import { useAuth } from "../../auth"
-import styles from "./ForOrgsCardContent.module.css"
 
 const WhyMAPLECardContent = () => {
   const { t } = useTranslation("fororgs")
   return (
     <>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         {t("callToAction.title")}
       </h3>
       <p>{t("callToAction.bodytext")}</p>
@@ -23,7 +22,7 @@ const BenefitsCardContent = () => {
 
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.reach.title")}
       </h3>
       <Row className="mb-3">
@@ -32,14 +31,14 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.connect.title")}
       </h3>
       <Row className="mb-3">
         <Col>{t("benefits.connect.bodytext")}</Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.language.title")}
       </h3>
       <Row className="mb-3">
@@ -48,7 +47,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.coordinate.title")}
       </h3>
       <Row className="mb-3">
@@ -57,7 +56,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.seeEveryone.title")}
       </h3>
       <Row className="mb-3">
@@ -66,7 +65,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.curateHistory.title")}
       </h3>
       <Row className="mb-3">
@@ -75,7 +74,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.legislativeResearch.title")}
       </h3>
       <Row className="mb-3">
@@ -90,7 +89,7 @@ const BenefitsCardContent = () => {
         </Col>
       </Row>
 
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`}>
+      <h3 className={`text-left fw-bold mb-4 text-info`}>
         {t("benefits.changeNorms.title")}
       </h3>
       <Row className="mb-3">
@@ -103,7 +102,7 @@ const BenefitsCardContent = () => {
         <>
           <Row className="text-center">
             <Col>
-              <h3 className={`fw-bold mt-3 ${styles.calltoaction}`}>
+              <h3 className={`fw-bold mt-3 text-primary`}>
                 {t("benefits.signUp")}
               </h3>
             </Col>
@@ -123,13 +122,13 @@ const ChallengeCardContent = () => {
   const { t } = useTranslation("fororgs")
   return (
     <>
-      <h3 className={`text-left fw-bold mb-4 ${styles.orgsheader}`} id="clo">
+      <h3 className={`text-left fw-bold mb-4 text-info`} id="clo">
         {t("challenge.title")}
       </h3>
       <p>{t("challenge.p1")}</p>
       <p>{t("challenge.p2")} </p>
       <p>{t("challenge.p3")} </p>
-      <h3 className={`text-right fw-bold mt-3 ${styles.calltoaction}`}>
+      <h3 className={`text-right fw-bold mt-3 text-primary`}>
         <a href="mailto:[email protected]">
           {t("challenge.callToAction")}
         </a>

diff --git a/...onents/about/SupportMaple/SupportMaple.js → ...nents/about/SupportMaple/SupportMaple.tsx b/...onents/about/SupportMaple/SupportMaple.js → ...nents/about/SupportMaple/SupportMaple.tsx
diff --git a/components/about/SupportMapleCardContent/SupportMapleCardContent.module.css b/components/about/SupportMapleCardContent/SupportMapleCardContent.module.css
diff --git a/...pleCardContent/SupportMapleCardContent.js → ...leCardContent/SupportMapleCardContent.tsx b/...pleCardContent/SupportMapleCardContent.js → ...leCardContent/SupportMapleCardContent.tsx