From 7d01d7613a73401a9f70a3a4c7b2c5fa2b4b6c05 Mon Sep 17 00:00:00 2001
From: Viviana <camargo.v@northeastern.edu>
Date: Wed, 7 Apr 2021 17:01:17 -0400
Subject: [PATCH] #37 Added styling to the features and spec section of
 singular product page. Styling for feature with an image instead of
 description is still needed.

---
 .../singular-product-styles.js                | 49 +++++++++++++++++++
 .../singular-product/singular-product.js      | 21 ++++++++
 2 files changed, 70 insertions(+)

diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
index 699e342..db07ee0 100644
--- a/src/components/singular-product/singular-product-styles.js
+++ b/src/components/singular-product/singular-product-styles.js
@@ -115,3 +115,52 @@ export const IconImage = styled.div`
 export const IconCaption = styled.div`
   font-size: 15px;
 `
+
+export const FeatureSpecSection = styled.div`
+  margin-top: 100px;
+`
+
+export const FeatureIcon = styled.div`
+  width: 3vw;
+  height: 45px;
+  background-color: #9D9D9D;
+`
+
+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;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+export const FeatureName = styled.div`
+  text-transform: uppercase;
+  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
+  width: 20vw;
+  padding-right: 2vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-right: 0px;
+  }
+`
+
+export const FeatureDescription = styled.div`
+  font-size: 15px;
+  width: 35vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-top: 16px;
+  }
+`
\ No newline at end of file
diff --git a/src/components/singular-product/singular-product.js b/src/components/singular-product/singular-product.js
index 9843dfe..5c36167 100644
--- a/src/components/singular-product/singular-product.js
+++ b/src/components/singular-product/singular-product.js
@@ -17,6 +17,13 @@ import {
     Icon,
     IconImage,
     IconCaption,
+    FeatureSpecSection,
+    FeatureIcon,
+    FeatureSpecHeading,
+    FeatureSpecFeatures,
+    Feature,
+    FeatureName,
+    FeatureDescription,
   } from "./singular-product-styles"
 
   export default function SingularProductPage({ data }) {
@@ -52,6 +59,20 @@ import {
               })}
             </IconContainer>
           </IconSection>
+          <FeatureSpecSection>
+            <FeatureIcon></FeatureIcon>
+            <FeatureSpecHeading>{data.feature_title}</FeatureSpecHeading>
+            <FeatureSpecFeatures>
+              {data.features.map(feature => {
+                return (
+                  <Feature>
+                    <FeatureName>{feature.feature_name}</FeatureName>
+                    <FeatureDescription>{feature.feature_description.text}</FeatureDescription>
+                  </Feature>
+                )
+              })}
+            </FeatureSpecFeatures>
+          </FeatureSpecSection>
       </SingularProductContainer>
     )
   }
\ No newline at end of file