More consistent TLDR styles

JoinColony · Aug 28, 2019 · 9f7e19d · 9f7e19d
1 parent 2e43eb3
commit 9f7e19d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 47 deletions.
diff --git a/src/modules/core/components/GridItem/GridItem.jsx b/src/modules/core/components/GridItem/GridItem.jsx
@@ -13,7 +13,7 @@ import styles from './GridItem.module.css';
 
 type Props = {|
   body: MessageDescriptor,
-  image: string,
+  image?: string,
   links?: Array<{ href: string, text: MessageDescriptor }>,
   title: MessageDescriptor,
 |};
@@ -22,9 +22,11 @@ const displayName = 'GridItem';
 
 const GridItem = ({ body, image, links = [], title }: Props) => (
   <div className={styles.main}>
-    <div>
-      <Image alt={title} className={styles.image} src={image} />
-    </div>
+    {image && (
+      <div className={styles.imageContainer}>
+        <Image alt={title} className={styles.image} src={image} />
+      </div>
+    )}
     <div className={styles.content}>
       <div className={styles.contentInner}>
         <div className={styles.heading}>

diff --git a/src/modules/core/components/GridItem/GridItem.module.css b/src/modules/core/components/GridItem/GridItem.module.css
@@ -6,14 +6,10 @@
   justify-content: space-between;
 }
 
-.main > div:first-child {
+.imageContainer {
   flex: 0 0 22%;
 }
 
-.main > div:nth-child(2) {
-  flex: 0 0 64%;
-}
-
 .image {
   height: auto;
   width: 60px;
@@ -34,6 +30,10 @@
   flex-direction: column;
 }
 
+.imageContainer + .content {
+  flex: 0 0 64%;
+}
+
 .contentInner {
   display: flex;
   flex-direction: column;
@@ -52,11 +52,11 @@
     width: 70px;
   }
 
-  .main > div:first-child {
+  .imageContainer {
     flex: 0 0 22%;
   }
 
-  .main > div:nth-child(2) {
+  .imageContainer + .content {
     flex: 0 0 74%;
   }
 }

diff --git a/src/modules/pages/components/Website/HomePage/TLDR/TLDR.jsx b/src/modules/pages/components/Website/HomePage/TLDR/TLDR.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { defineMessages } from 'react-intl';
 
 import Heading from '~core/Heading';
+import GridItem from '~core/GridItem';
 
 import styles from './TLDR.module.css';
 
@@ -54,46 +55,13 @@ const TLDR = () => (
       </div>
       <div className={styles.cols}>
         <div className={styles.colItem}>
-          <Heading
-            appearance={{
-              margin: 'none',
-              size: 'medium',
-              theme: 'dark',
-            }}
-            text={MSG.headingOne}
-          />
-          <Heading
-            appearance={{ size: 'mediumLarge', theme: 'dark', weight: 'thin' }}
-            text={MSG.textOne}
-          />
+          <GridItem body={MSG.textOne} title={MSG.headingOne} />
         </div>
         <div className={styles.colItem}>
-          <Heading
-            appearance={{
-              margin: 'none',
-              size: 'medium',
-              theme: 'dark',
-            }}
-            text={MSG.headingTwo}
-          />
-          <Heading
-            appearance={{ size: 'mediumLarge', theme: 'dark', weight: 'thin' }}
-            text={MSG.textTwo}
-          />
+          <GridItem body={MSG.textTwo} title={MSG.headingTwo} />
         </div>
         <div className={styles.colItem}>
-          <Heading
-            appearance={{
-              margin: 'none',
-              size: 'medium',
-              theme: 'dark',
-            }}
-            text={MSG.headingThree}
-          />
-          <Heading
-            appearance={{ size: 'mediumLarge', theme: 'dark', weight: 'thin' }}
-            text={MSG.textThree}
-          />
+          <GridItem body={MSG.textThree} title={MSG.headingThree} />
         </div>
       </div>
     </div>