From 11b319bf6eaa147601386b698d23d576594d899b Mon Sep 17 00:00:00 2001
From: Viviana <camargo.v@northeastern.edu>
Date: Wed, 21 Apr 2021 13:46:34 -0400
Subject: [PATCH] #37 Updated styling for Hero section, typography, and minor
 details of other sections.

---
 .../singular-product-styles.js                | 142 ++++++++++--------
 src/schemas/product.json                      |   9 +-
 src/style/type-styles.js                      |  13 +-
 src/templates/product.js                      |  91 +++++------
 4 files changed, 137 insertions(+), 118 deletions(-)

diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
index 2402543..9580cb1 100644
--- a/src/components/singular-product/singular-product-styles.js
+++ b/src/components/singular-product/singular-product-styles.js
@@ -2,31 +2,50 @@ import styled from "styled-components"
 import dimensions from "../../style/dimensions"
 import {
   layoutPaddingDesktop,
-  layoutPaddingMobile,
 } from "../../style/variables"
 
 export const SingularProductContainer = styled.div``
 
 export const HeroSection = styled.div`
-  padding-top: 60px;
+  padding-top: 130px;
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
-    padding-top: 45px;
+    padding-top: 114px;
   }
 `
 
-export const ImageContainer = styled.div``
-
-export const MainImage = styled.div`
-  width: 47vw;
-  height: 432px;
-  background-color: #C4C4C4;
+export const ImageContainer = styled.div`
+  display: flex;
+    flex-wrap: wrap;
+    img {
+      width: 4vw;
+      height: 56px;
+      margin-right: 18px;
+      margin-top: 44px;
+
+      @media (max-width: ${dimensions.maxwidthTablet}px) {
+        width: 3vw;
+        height: 39px;
+        margin-right: 12px;
+        margin-top: 32px;
+      }
+
+      &.main-image {
+        width: 47vw;
+        height: 432px;
+        flex: 100%;
+        
+        @media (max-width: ${dimensions.maxwidthTablet}px) {
+          width: 100%;
+          height: 225px;
+        }
+      }
+    }
 
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    width: 100%;
-    height: 225px;
-  }
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      justify-content: center;
+    }
 `
 
 export const SmallImageContainer = styled.div`
@@ -37,21 +56,6 @@ export const SmallImageContainer = styled.div`
   }
 `
 
-export const SmallImage = styled.div`
-  width: 4vw;
-  height: 56px;
-  margin-right: 18px;
-  margin-top: 44px;
-  background-color: #C4C4C4;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-      width: 3vw;
-      height: 39px;
-      margin-right: 12px;
-      margin-top: 32px;
-  }
-`
-
 export const TextContainer = styled.div`
   padding-left: 67px;
 
@@ -61,30 +65,10 @@ export const TextContainer = styled.div`
 `
 
 export const ProductType = styled.div`
-  text-transform: uppercase;
   padding-top: 49px;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 63px;
-  }
-`
-
-export const ProductName = styled.div`
-  font-weight: bold;
-  font-size: calc(50px + (50 - 32) * ((100vw - 300px) / (1440 - 300)));
-  padding-top: 27px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    
-  }
-`
-
-export const ProductDescription = styled.div`
-  font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
-  padding-top: 32px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 24px;
+    padding-top: 26px;
   }
 `
 
@@ -133,21 +117,28 @@ export const ImageHighlightSection = styled.div`
 export const ImageHighlightHeading = styled.div`
   padding-top: 147px;
   margin-left: 4vw;
+
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 43px;
+    position: absolute;
+    top: 910px;
+    margin-left: 0px;
   }
 `
 
-export const ImageHighlightGroupContainer = styled.div``
+export const ImageHighlightGroupContainer = styled.div`
+
+`
 
 export const ImageHighlightGroup = styled.div`
   &.second-section {
     position: absolute;
     right: 0;
     top: 200px;
-  }
-  @media (min-width: ${dimensions.maxwidthTablet}px) {
-    // display: flex;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      position: relative;
+      top: 0px;
+    }
   }
 `
 
@@ -156,6 +147,21 @@ export const HighlightedImage = styled.div`
     img {
       margin-left: -${layoutPaddingDesktop};
       margin-top: 60px;
+
+      @media (max-width: ${dimensions.maxwidthTablet}px) {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  img {
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 25px;
     }
   }
 `
@@ -163,12 +169,17 @@ export const HighlightedImage = styled.div`
 export const ImageHighlightDescription = styled.div`
   font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
   width: 35vw;
+
   &.second-section {
     padding-top: 88px;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      margin-top: 310px;
+    }
   }
+
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     width: 100%;
-    padding-top: 32px;
   }
 `
 
@@ -180,6 +191,17 @@ export const ThirdSection = styled.div`
     margin-top: 97px;
     margin-right: -${layoutPaddingDesktop}; 
     justify-content: space-between;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      display: block;
+      width: 100%;
+      margin-top: 25px;
+
+      img {
+        position: absolute;
+        top: 800px;
+      }
+    }
   }
 `
 
@@ -192,14 +214,6 @@ export const FeatureIcon = styled.div`
   height: 45px;
 `
 
-export const FeatureSpecHeading = styled.div`
-  font-size: calc(40px + (40 - 32) * ((100vw - 300px) / (1440 - 300)));
-  font-weight: bold;
-  padding-top: 20px;
-`
-
-export const FeatureSpecFeatures = styled.div``
-
 export const Feature = styled.div`
   padding-top: 90px;
 
@@ -209,8 +223,6 @@ export const Feature = styled.div`
 `
 
 export const FeatureName = styled.div`
-  text-transform: uppercase;
-  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
   width: 20vw;
   padding-right: 2vw;
 
diff --git a/src/schemas/product.json b/src/schemas/product.json
index db1bf9d..68d5a19 100644
--- a/src/schemas/product.json
+++ b/src/schemas/product.json
@@ -106,11 +106,10 @@
                 "label" : "Feature Name"
               }
             },
-            "feature_description" : {
-              "type" : "StructuredText",
-              "config" : {
-                "multi" : "paragraph",
-                "label" : "feature description"
+            "feature_description": {
+              "type": "Text",
+              "config": {
+                "label": "Feature Description"
               }
             }
           },
diff --git a/src/style/type-styles.js b/src/style/type-styles.js
index fa54ab0..e740b2d 100644
--- a/src/style/type-styles.js
+++ b/src/style/type-styles.js
@@ -4,6 +4,7 @@ const minSize = {
   h1: 50,
   h2: 30,
   h3: 20,
+  sub1: 16,
   p: 16,
   nav: 16,
 }
@@ -20,6 +21,7 @@ const fontSizes = {
   h1: `calc(${minSize.h1}px + (64 - ${minSize.h1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  sub1: `calc(${minSize.sub1}px + (20 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
 }
@@ -39,14 +41,19 @@ const H3 = styled.h3`
   font-weight: bold;
 `
 
+const Sub1 = styled.h4 `
+  font-size: ${fontSizes.sub1};
+  text-transform: uppercase;
+  font-weight: normal;
+  //margin-top: 0px;
+`
+
 const P = styled.p`
   font-size: ${fontSizes.p};
 `
 
 const NavText = styled.a`
   font-size: ${fontSizes.nav};
-
-
 `
 
-export { H1, H2, H3, P, NavText }
+export { H1, H2, H3, Sub1, P, NavText }
diff --git a/src/templates/product.js b/src/templates/product.js
index f3b6591..e5f2af8 100644
--- a/src/templates/product.js
+++ b/src/templates/product.js
@@ -1,17 +1,12 @@
 import React from "react"
 import { graphql } from "gatsby"
-import {H1, H3, P} from "../style/type-styles"
+import {H1, H2, H3, Sub1, P} from "../style/type-styles"
 import {
   SingularProductContainer,
   HeroSection,
   ImageContainer,
-  MainImage,
-  SmallImageContainer,
-  SmallImage,
   TextContainer,
   ProductType,
-  ProductName,
-  ProductDescription,
   IconSection,
   IconContainer,
   Icon,
@@ -26,8 +21,6 @@ import {
   ThirdSection,
   FeatureSpecSection,
   FeatureIcon,
-  FeatureSpecHeading,
-  FeatureSpecFeatures,
   Feature,
   FeatureName,
   FeatureImage,
@@ -43,21 +36,22 @@ export default function Product({ data }) {
     <SingularProductContainer>
       <HeroSection>
         <ImageContainer>
-          <MainImage></MainImage>
-          <SmallImageContainer>
-            <SmallImage></SmallImage>
-            <SmallImage></SmallImage>
-            <SmallImage></SmallImage>
-            <SmallImage></SmallImage>
-            <SmallImage></SmallImage>
-          </SmallImageContainer>
+          {products.data.product_images.map((image, id) => {
+            return (
+              <img 
+                src={image.url} 
+                alt={image.alt}
+                key={id} 
+                className={id === 0? "main-image" : ""}/>
+            )
+          })}
         </ImageContainer>
         <TextContainer>
-          <ProductType>{products.data.product_type}</ProductType>
-          <ProductName>{products.data.product_title}</ProductName>
-          <ProductDescription>
-            {products.data.product_description.text}
-          </ProductDescription>
+          <ProductType>
+            <Sub1>{products.data.product_type}</Sub1>
+          </ProductType>
+          <H1>{products.data.product_title}</H1>
+          <P>{products.data.product_description.text}</P>
         </TextContainer>
       </HeroSection>
 
@@ -68,9 +62,11 @@ export default function Product({ data }) {
             return (
               <Icon key={id}>
                 <IconImage>
-                  <img src={icon.icon_image.url}/>
+                  <img src={icon.icon_image.url} alt={icon.icon_image.alt}/>
                 </IconImage>
-                <IconCaption><P>{icon.icon_text}</P></IconCaption>
+                <IconCaption>
+                  <P>{icon.icon_text}</P>
+                </IconCaption>
               </Icon>
             )
           })}
@@ -78,7 +74,7 @@ export default function Product({ data }) {
       </IconSection>
 
       <ImageHighlightSection>
-      <ImageHighlightHeading>
+        <ImageHighlightHeading>
           <H1>{products.data.image_highlight_heading}</H1>
         </ImageHighlightHeading>
         <ImageHighlightGroupContainer>
@@ -86,16 +82,14 @@ export default function Product({ data }) {
             return (
               <ImageHighlightGroup
                 key={id}
-                className={id == 0 ? "first" : ""}
-                className={id == 1 ? "second-section" : ""}
+                className={id === 0 ? "first" : ""}
+                className={id === 1 ? "second-section" : ""}
               >
-                <ThirdSection className={id == 2 ? "third-section" : ""}>
-                  <HighlightedImage className={id == 0 ? "first-image" : ""}>
-                    <img src={highlight.highlighted_image.url} />
+                <ThirdSection className={id === 2 ? "third-section" : ""}>
+                  <HighlightedImage className={id === 0 ? "first-image" : ""}>
+                    <img src={highlight.highlighted_image.url} alt={highlight.highlighted_image.alt}/>
                   </HighlightedImage>
-                  <ImageHighlightDescription
-                    className={id == 1 ? "second-section" : ""} 
-                  >
+                  <ImageHighlightDescription className={id === 1 ? "second-section" : ""}>
                     {highlight.image_highlight_description}
                   </ImageHighlightDescription>
                 </ThirdSection>
@@ -107,30 +101,32 @@ export default function Product({ data }) {
 
       <FeatureSpecSection>
         <FeatureIcon>
-          <img src={products.data.feature_icon.url} alt="Orange checklist icon" />
+          <img src={products.data.feature_icon.url} alt={products.data.feature_icon.alt}/>
         </FeatureIcon>
-        <FeatureSpecHeading>{products.data.feature_title}</FeatureSpecHeading>
-        <FeatureSpecFeatures>
+        <H2>{products.data.feature_title}</H2>
+        <div>
           {products.data.features.map((feature, id) => {
             return (
               <Feature>
-                <FeatureName>{feature.feature_name}</FeatureName>
+                <FeatureName>
+                  <Sub1>{feature.feature_name}</Sub1>
+                </FeatureName>
                 <FeatureImage>
                   <img
                     key={id}
                     className={id === 0 ? "first-image" : ""}
                     className={id !== 0 ? "not-image" : ""}
                     src={feature.feature_image.url}
-                    alt="Feature of a product"
+                    alt={feature.feature_image.alt}
                   />
                 </FeatureImage>
                 <FeatureDescription>
-                  {feature.feature_description.text}
+                  <P>{feature.feature_description.text}</P>
                 </FeatureDescription>
               </Feature>
             )
           })}
-        </FeatureSpecFeatures>
+        </div>
       </FeatureSpecSection>
     </SingularProductContainer>
     </Layout>
@@ -146,12 +142,13 @@ export const query = graphql`
           uid
           data {
             feature_icon {
-            url
-            dimensions {
-              height
-              width
-            }
-          }
+              url
+              alt
+              dimensions {
+                height
+                width
+              }
+            } 
             product_title
             button_destination
             button_title
@@ -164,6 +161,7 @@ export const query = graphql`
               }
               feature_image {
                 url
+                alt
               }
             }
             icon_section_title
@@ -171,6 +169,7 @@ export const query = graphql`
               icon_text
               icon_image {
                 url
+                alt
               }
             }
             product_description {
@@ -179,6 +178,7 @@ export const query = graphql`
             product_images {
               image {
                 url
+                alt
               }
             }
             product_type
@@ -189,6 +189,7 @@ export const query = graphql`
                   width
                 }
                 url
+                alt
               }
               image_highlight_description
             }