Updating newsletter and social media styles.

packages/mvmuseum-theme/src/components/partials/newsletter.js → packages/mvmuseum-theme/src/components/partials/newsletter-socialmedia.js

 import React from "react";
 import { connect, styled } from "frontity";
 
+import Container from '../global/container'
+
 import Facebook from "../../img/facebook.png";
 import Instagram from "../../img/instagram.png";
 import Twitter from "../../img/twitter.png";
 import NewsletterPic from "../../img/newsletter.png";
 
 import Image from "@frontity/components/image";
-import Link from "@frontity/components/link";
 
-const Newsletter = ({ state }) => {
+const NewsletterSocialMedia = ({ state }) => {
+  const options = state.source.get('acf-options-page')
+  console.log(options)
   return (
-    <NewsletterContainer>
-      <NewsletterForm>
+    <NewsletterSocialMediaContainer>
+      <NewsletterForm theme={state.theme}>
         <h2>Sign up for our newsletter</h2>
-        <form>
-          <FormDiv>
+        
+        <StyledForm>
+          <Container>
             <input placeholder="enter your email" />
             <button type="submit">
-              <Image
-                src={NewsletterPic}
-                style={{ height: "10px", width: "10px" }}
-              ></Image>
+              <Image src={NewsletterPic} />
             </button>
-          </FormDiv>
-        </form>
+          </Container>
+        </StyledForm>
       </NewsletterForm>
-      <NewsletterContactDetails>
+
+      <SocialMedia>
         <h3>STAY IN TOUCH</h3>
+
         <SocialIconsContainer>
-          <Link>
-            <Image src={Facebook}></Image>
-          </Link>
-          <Link>
-            <Image src={Instagram}></Image>
-          </Link>
-          <Link>
-            <Image src={Twitter}></Image>
-          </Link>
+          <a target="_blank">
+            <Image src={Facebook} />
+          </a>
+          <a target="_blank">
+            <Image src={Instagram} />
+          </a>
+          <a target="_blank">
+            <Image src={Twitter} />
+          </a>
         </SocialIconsContainer>
-      </NewsletterContactDetails>
-    </NewsletterContainer>
+      </SocialMedia>
+    </NewsletterSocialMediaContainer>
   );
 };
 
-export default connect(Newsletter);
+export default connect(NewsletterSocialMedia);
 
-const NewsletterContainer = styled.div`
+const NewsletterSocialMediaContainer = styled.div`
   width: 100%;
-  height: 40vh;
   display: grid;
-  grid-template-rows: repeat(3, 1fr);
+  ${'' /* grid-template-rows: repeat(3, 1fr); */}
   position: relative;
   z-index: 100;
   background: white;
 `;
+
 const NewsletterForm = styled.div`
-  grid-row: 1/2;
-  background: purple;
+  background: ${props => props.theme.colors.purple};
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
+  padding: 1rem 0;
 
   h2 {
-    font-size: 20px;
     color: white;
     text-transform: capitalize;
-  }
-
-  form {
-    width: 25%;
-    height: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+    margin-right: 0.5rem;
   }
 `;
 
-const FormDiv = styled.div`
-  height: 100%;
-  width: 100%;
+const StyledForm = styled.form`
   position: relative;
+  width: 25%;
+  height: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  margin-left: 0.5rem;
 
   input {
     width: 100%;
-    height: 100%;
-    padding-left: 3rem;
+    height: 2rem;
+    padding-left: 1rem;
   }
 
   button {
     position: absolute;
     top: 0;
     bottom: 0;
-    heigth: 30px;
-    width: 30px;
-    right: 3rem;
+    right: .75rem;
+    heigth: 1.25rem;
+    width: 1.25rem;
     cursor: pointer;
     background: none;
   }
 `;
 
-const NewsletterContactDetails = styled.div`
-  grid-row: 2/4;
+const SocialMedia = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
+  padding: 2rem 0;
 `;
 
 const SocialIconsContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  width: 5rem;
-  height: 20%;
+  padding: 1rem 0;
+
+  a {
+    display: inline-block;
+    width: 1.75rem;
+    margin: .67rem;
+  }
 `;