Merge pull request #26 from Code-4-Community/hm-add-content-to-cards

Add Content to cards
Code-4-Community · Apr 18, 2024 · 1705792 · 1705792
2 parents 29236aa + 60f9d52
commit 1705792
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 26 deletions.
diff --git a/apps/frontend/src/pages/mapPage/About.tsx b/apps/frontend/src/pages/mapPage/About.tsx
@@ -90,23 +90,6 @@ export default function About() {
           laboris nisi ut aliquip ex
         </div>
       </p>
-
-      <p style={headings}>Feature Type and Descriptions: <br />
-        <div style={content}>
-          Rain Garden: Small shallow depressed planted areas consisting of biosoil and simple plant palettes. <br />
-          Bioswale: Medium-sized depressed planted features that are often longer than they are wide
-          and may have overflow structures/pipes. <br />
-          Bioretention: Larger depressed planted features that vary in size and shape and can capture
-          and infiltrate larger volumes of runoff (typically have pipes and structures). <br />
-          Porous Paving: Paving materials, like asphalt, concrete or pavers, with voids or gaps that
-          water is able to pass through. <br />
-          Tree Trench/Planter: Hybrid features that are planted with trees at the surface and have
-          subsurface infiltration areas that give trees access to large volumes of stormwater
-          while it absorbs into the ground. <br />
-          Green Roof/Planter: Vegetated areas, at ground level or on roofs, that consist of planting
-          soil or other lightweight planting materials, and native plants.
-        </div>
-      </p>
     </div >
   );
 

diff --git a/apps/frontend/src/pages/mapPage/FlippableTIle.scss b/apps/frontend/src/pages/mapPage/FlippableTIle.scss
@@ -3,7 +3,6 @@
 .container {
   font-family: Lora;
   font-size: 40px;
-  font-style: italic;
   font-weight: 500;
   line-height: 51px;
   letter-spacing: 0em;
@@ -22,9 +21,9 @@
 .card-text {
   display: flex;
   align-items: flex-start;
-  justify-content: flex-start; 
-  padding-left: 30px;
   text-align: left;
+  padding: 12px;
+  font-size: 16px;
 }
 
 

diff --git a/apps/frontend/src/pages/mapPage/Tiles.tsx b/apps/frontend/src/pages/mapPage/Tiles.tsx
@@ -16,42 +16,48 @@ const cards = [
   {
     id: '0',
     front: 'Rain Garden',
-    back: 'back',
+    back: 'Small shallow depressed planted areas consisting of biosoil and simple plant palettes.',
     icon: generateRainGardenSVG,
     background: RainGarden,
   },
   {
     id: '1',
     front: 'Porous Paving',
-    back: 'back',
+    back: `Paving materials, like asphalt, concrete or pavers, with voids or gaps that
+    water is able to pass through.`,
     icon: generatePorousPavingSVG,
     background: PorousPaving,
   },
   {
     id: '2',
     front: 'Bioswale',
-    back: 'back',
+    back: `Medium-sized depressed planted features that are often longer than they are wide
+    and may have overflow structures/pipes.`,
     icon: generateBioswaleIcon,
     background: Bioswale,
   },
   {
     id: '3',
     front: 'Tree Trench /Planter',
-    back: 'back',
+    back: `Hybrid features that are planted with trees at the surface and have
+    subsurface infiltration areas that give trees access to large volumes of stormwater
+    while it absorbs into the ground.`,
     icon: generateTreeTrenchPlanterSVG,
     background: TreeTrench,
   },
   {
     id: '4',
     front: 'Biorentention',
-    back: 'back',
+    back: `Larger depressed planted features that vary in size and shape and can capture
+    and infiltrate larger volumes of runoff (typically have pipes and structures).`,
     icon: generateBioretentionSVG,
     background: Bioretention,
   },
   {
     id: '5',
     front: 'Green Roof /Planter',
-    back: 'back',
+    back: `Vegetated areas, at ground level or on roofs, that consist of planting
+    soil or other lightweight planting materials, and native plants.`,
     icon: generateGreenRoofPlanterSVG,
     background: GreenRoofPlanter,
   },