TwoParagraphBlock: Update styling for Volunteer page variant.

src/components/grid-aware/TwoParagraphBlock/TwoParagraphBlock.module.css

@@ -13,11 +13,14 @@
 }
 
 .bleedBackground {
-  background: var(--color-gray-300);
   grid-column: 1 / span 2;
   grid-row: 1;
 }
 
+.bleedBackground.gray {
+  background: var(--color-gray-300);
+}
+
 .bleedMainContent {
   grid-column: 2;
   grid-row: 1;
@@ -40,16 +43,9 @@
   column-gap: var(--grid-column-gap);
   display: grid;
   grid-template-columns: repeat(var(--grid-column-count), minmax(0, 1fr));
-  grid-template-rows: auto minmax(590px, auto);
-  padding-top: 140px;
-}
-
-.gridParentAbout {
-  column-gap: var(--grid-column-gap);
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), minmax(0, 1fr));
-  grid-template-rows: auto minmax(492px, auto);
-  padding-top: 140px;
+  grid-template-rows: auto minmax(0, 1fr);
+  padding-bottom: 120px;
+  padding-top: 120px;
 }
 
 .gridParent > * {
@@ -61,11 +57,6 @@
     display: block;
     padding: 50px 0 80px;
   }
-
-  .gridParentAbout {
-    display: block;
-    padding: 50px 0;
-  }
 }
 
 
@@ -87,14 +78,9 @@
   margin-top: 70px;
 }
 
-.gridAreaParagraph2About {
-  padding-right: 16px;
-}
-
 .gridAreaImage {
   grid-column: 8 / span 4;
-  grid-row: 2;
-  margin-top: 15px;
+  grid-row: 1 / span 2;
 }
 
 .gridAreaImageAbout {
@@ -109,10 +95,6 @@
     margin-top: 40px;
   }
 
-  .gridAreaParagraph2About {
-    padding-right: 0;
-  }
-
   .gridAreaImage {
     margin-right: -40px;
     margin-top: 40px;
@@ -139,28 +121,24 @@
   font: var(--font-body-small);
 }
 
-.paragraph2WrapperAbout {
+.paragraph2Wrapper.aboutUsPage {
   font: var(--font-body-medium);
 }
 
 .paragraph2Wrapper :first-child {
   margin: 0;
 }
 
-.paragraph2WrapperAbout :first-child {
-  margin: 0;
-}
-
 .paragraph2Wrapper :not(:first-child) {
   margin-top: 15px;
 }
 
-.paragraph2WrapperAbout :not(:first-child) {
-  margin-top: 15px;
-}
-
-.image1Wrapper {
-  margin-bottom: -142px;
+@media (--laptop-and-up) {
+  .image1Wrapper.aboutUsPage {
+    /* Allows the image to "hang over" the boundary of the component, since the
+     * image will not contribute to the height of its grid row. */
+    height: 0;
+  }
 }
 
 /* TODO: These styles work around a few global styles from the legacy site.
@@ -183,15 +161,6 @@
     font: var(--font-body-medium);
     margin-top: 40px;
   }
-
-  .paragraph2WrapperAbout {
-    font: var(--font-body-medium);
-    margin-top: 40px;
-  }
-
-  .image1Wrapper {
-    margin-bottom: 0;
-  }
 }
 
 

src/components/grid-aware/TwoParagraphBlock/TwoParagraphBlock.stories.jsx

@@ -8,14 +8,24 @@ export default {
   component: TwoParagraphBlock,
 };
 
-const Template = ({ title, paragraph1, paragraph2, image1, ctaButtons }) => (
+const Template = ({
+  title,
+  paragraph1,
+  paragraph2,
+  image,
+  ctaButtons,
+  isAbout,
+  theme,
+}) => (
   <div style={{ border: "1px dashed rebeccapurple" }}>
     <TwoParagraphBlock
       title={title}
       paragraph1={paragraph1}
       paragraph2={paragraph2}
-      image={image1}
+      image={image}
       ctaButtons={ctaButtons}
+      isAbout={isAbout}
+      theme={theme}
     />
   </div>
 );
@@ -42,7 +52,7 @@ Gray.args = {
       </p>
     </>
   ),
-  image1: {
+  image: {
     url: volunteers,
     alt: "Five volunteer members surrounding a table of holiday care packages.",
   },

src/components/grid-aware/TwoParagraphBlock/TwoParagraphBlock.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { ThemeColorOption } from "../../../types";
 import Button, { ButtonProps } from "../../inline/Button";
 
 import * as s from "./TwoParagraphBlock.module.css";
@@ -12,6 +13,7 @@ type TwoParagraphBlockProps = {
   paragraph2?: React.ReactNode;
   image: { url: string; alt: string };
   ctaButtons?: ButtonProps[];
+  theme: ThemeColorOption;
 };
 
 const TwoParagraphBlock = ({
@@ -21,15 +23,10 @@ const TwoParagraphBlock = ({
   paragraph2,
   image,
   ctaButtons,
+  theme,
 }: TwoParagraphBlockProps) => {
-  const gridParent = isAbout ? s.gridParentAbout : s.gridParent;
   const gridAreaImage = isAbout ? s.gridAreaImageAbout : s.gridAreaImage;
-  const paragraph2Wrapper = isAbout
-    ? s.paragraph2WrapperAbout
-    : s.paragraph2Wrapper;
-  const gridAreaParagraph2 = isAbout
-    ? `${s.gridAreaParagraph2} ${s.gridAreaParagraph2About}`
-    : s.gridAreaParagraph2;
+  const aboutUsPageClass = isAbout ? s.aboutUsPage : "";
 
   const GridAreaTitle = () => (
     <div className={s.gridAreaTitle}>
@@ -59,27 +56,29 @@ const TwoParagraphBlock = ({
   );
 
   const GridAreaParagraph2 = () => (
-    <div className={gridAreaParagraph2}>
-      <div className={paragraph2Wrapper}>{paragraph2}</div>
+    <div className={s.gridAreaParagraph2}>
+      <div className={`${s.paragraph2Wrapper} ${aboutUsPageClass}`}>
+        {paragraph2}
+      </div>
       {isCtaButtons}
     </div>
   );
 
   const GridAreaImage = () => (
     <div className={gridAreaImage}>
-      <div className={s.image1Wrapper}>
+      <div className={`${s.image1Wrapper} ${aboutUsPageClass}`}>
         <img className={s.image1} src={image.url} alt={image.alt} />
       </div>
     </div>
   );
 
   return (
     <div className={s.bleedWrapper}>
-      <div className={s.bleedBackground} />
+      <div className={`${s.bleedBackground} ${s[theme]}`} />
       <div className={s.bleedMainContent}>
-        <section className={gridParent}>
+        <section className={s.gridParent}>
           <GridAreaTitle />
-          <GridAreaParagraph1 />
+          {paragraph1 && <GridAreaParagraph1 />}
           <GridAreaImage />
           <GridAreaParagraph2 />
         </section>

src/pages/about/index.tsx

@@ -93,6 +93,7 @@ export default () => (
         url: darcelJackson,
         alt: "Darcel Jackson, founder of ShelterTech.",
       }}
+      theme="gray"
     />
     <Spacer heightDesktop="190px" heightMobile="80px" />
     <ArticleSpotlightCard

src/pages/volunteer/index.tsx

@@ -102,7 +102,6 @@ export default () => {
           { text: "Apply", onClick: () => setVolunteerFormIsOpen(true) },
         ]}
       />
-      <Spacer heightDesktop="120px" heightMobile="0" />
       <TwoParagraphBlock
         title="Volunteering at ShelterTech"
         paragraph1=""
@@ -139,6 +138,7 @@ export default () => {
             onClick: () => setVolunteerFormIsOpen(true),
           },
         ]}
+        theme="white"
       />
       <OneParagraphBlock
         title="We need your expertise"