From bb5b42873da4822fec14d37ab4797a6a2d2fb902 Mon Sep 17 00:00:00 2001
From: Viviana <camargo.v@northeastern.edu>
Date: Mon, 19 Apr 2021 21:19:19 -0400
Subject: [PATCH] #37 Updated styling for icon section in singular product page
 in this branch in the file in the templates folder.

---
 .../singular-product-styles.js                | 29 +++++++++++--------
 src/templates/product.js                      | 15 ++++++----
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
index a68b7d2..9eea470 100644
--- 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
index 668ce2b..ae3f5ed 100644
--- 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>
             )
           })}