#37 Updated styling for icon section in singular product page in this…

… branch in the file in the templates folder.
Scout-NU · Apr 20, 2021 · bb5b428 · bb5b428
1 parent 97872c6
commit bb5b428
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -88,32 +88,37 @@ export const IconSection = styled.div`
   margin-top: 127px;
 `
 
-export const IconSectionHeading = styled.div`
-  text-transform: uppercase;
-  font-size: 20px;
-`
-
 export const IconContainer = styled.div`
   display: flex;
-  padding-top: 80px;
+  margin-top: 80px;
   justify-content: space-between;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    flex: 50%;
-    padding-top: 54px;
+    flex-wrap: wrap;
+    margin-top: 54px;
   }
 `
 
-export const Icon = styled.div``
+export const Icon = styled.div`
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-top: 30px;
+  }
+`
 
 export const IconImage = styled.div`
-  width: 4vw;
+  width: 54px;
   height: 55px;
-  background-color: #C4C4C4;
+  margin-left: auto;
+  margin-right: auto;
 `
 
 export const IconCaption = styled.div`
-  font-size: 15px;
+  margin-top: 25px;
+  width: 12vw;
+  text-align: center;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 44vw;
+  }
 `
 
 export const FeatureSpecSection = styled.div`

diff --git a/src/templates/product.js b/src/templates/product.js
@@ -1,5 +1,6 @@
 import React from "react"
 import { graphql } from "gatsby"
+import {H3, P} from "../style/type-styles"
 import {
   SingularProductContainer,
   HeroSection,
@@ -12,7 +13,6 @@ import {
   ProductName,
   ProductDescription,
   IconSection,
-  IconSectionHeading,
   IconContainer,
   Icon,
   IconImage,
@@ -53,14 +53,17 @@ export default function Product({ data }) {
           </ProductDescription>
         </TextContainer>
       </HeroSection>
+
       <IconSection>
-        <IconSectionHeading>{products.data.icon_section_title}</IconSectionHeading>
+        <H3>{products.data.icon_section_title}</H3>
         <IconContainer>
-          {products.data.icons.map(icon => {
+          {products.data.icons.map((icon, id) => {
             return (
-              <Icon>
-                <IconImage></IconImage>
-                <IconCaption>{icon.icon_text}</IconCaption>
+              <Icon key={id}>
+                <IconImage>
+                  <img src={icon.icon_image.url}/>
+                </IconImage>
+                <IconCaption><P>{icon.icon_text}</P></IconCaption>
               </Icon>
             )
           })}