Add img and basic styling to landing page

Relates #1
fac19 · May 28, 2020 · 2fc448d · 2fc448d
1 parent 37b2e7c
commit 2fc448d
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 29 deletions.
diff --git a/client-app/src/components/shared/header.js b/client-app/src/components/shared/header.js
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { AppContext } from "../AppContext";
-import { Title, HeaderArea, LogInOption } from "../../styles/header.js";
+import { Title, HeaderArea, StyledLogInLink } from "../../styles/header.js";
 
 export default function Header() {
   const { logInStatus, setLogInStatus } = useContext(AppContext);
@@ -13,13 +13,13 @@ export default function Header() {
     let token = localStorage.getItem("token");
     if (!token) {
       setLogInStatus(false);
-      return <LogInOption href="/">Log In or Sign Up Here!</LogInOption>;
+      return <StyledLogInLink to="/">Log In or Sign Up Here!</StyledLogInLink>;
     } else {
       setLogInStatus(true);
       return (
-        <LogInOption onClick={removeToken} href="/">
+        <StyledLogInLink onClick={removeToken} href="/">
           Log Out
-        </LogInOption>
+        </StyledLogInLink>
       );
     }
   }

diff --git a/client-app/src/components/shared/landing.js b/client-app/src/components/shared/landing.js
@@ -2,21 +2,30 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { AppContext } from "../AppContext";
-import { BlueButton, PinkButton, PageContainer } from "../../styles/buttons.js";
+import {
+  BlueButton,
+  PinkButton,
+  PageContainer,
+  StyledLink,
+} from "../../styles/buttons";
+import { LandingImg, Title2 } from "../../styles/landing";
 
 export default function Landing() {
   const { isVendor, setIsVendor } = useContext(AppContext);
 
   return (
     <PageContainer>
-      <h2>Tired of waiting for the jingle?</h2>
-      <img src="#" alt="illustation" />
-      <Link to="/user" onClick={() => setIsVendor(true)}>
+      <Title2>Tired of waiting for the jingle?</Title2>
+      <LandingImg
+        src="https://image.flaticon.com/icons/svg/346/346178.svg"
+        alt="Ice cream cone"
+      />
+      <StyledLink to="/user" onClick={() => setIsVendor(true)}>
         <PinkButton>Vendors</PinkButton>
-      </Link>
-      <Link to="/user" onClick={() => setIsVendor(false)}>
+      </StyledLink>
+      <StyledLink to="/user" onClick={() => setIsVendor(false)}>
         <BlueButton>Customers</BlueButton>
-      </Link>
+      </StyledLink>
     </PageContainer>
   );
 }
diff --git a/client-app/src/components/shared/login.js b/client-app/src/components/shared/login.js
@@ -1,5 +1,10 @@
 import React, { useContext } from "react";
-import { Button, BlueButton, PinkButton } from "../../styles/buttons";
+import {
+  Button,
+  BlueButton,
+  PinkButton,
+  StyledLink,
+} from "../../styles/buttons";
 import { textStyle } from "../../styles/text";
 import { Label, Input, FormContainer } from "../../styles/form";
 

diff --git a/client-app/src/components/shared/user.js b/client-app/src/components/shared/user.js
@@ -2,7 +2,13 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { AppContext } from "../AppContext";
-import { BlueButton, PinkButton, PageContainer } from "../../styles/buttons";
+import {
+  BlueButton,
+  PinkButton,
+  PageContainer,
+  StyledLink,
+} from "../../styles/buttons";
+import { LandingImg } from "../../styles/landing";
 
 export default function User() {
   const { isVendor, setIsVendor } = useContext(AppContext);
@@ -11,28 +17,34 @@ export default function User() {
       {isVendor ? (
         <PageContainer>
           <h2>Find ice cream lovers today</h2>
-          <img src="#" />
+          <LandingImg
+            src="https://image.flaticon.com/icons/svg/346/346178.svg"
+            alt="Ice cream cone"
+          />
 
-          <Link to="/signup" onClick={() => setIsVendor(true)}>
+          <StyledLink to="/signup" onClick={() => setIsVendor(true)}>
             <PinkButton>Sign Up</PinkButton>
-          </Link>
+          </StyledLink>
 
-          <Link to="/login" onClick={() => setIsVendor(true)}>
+          <StyledLink to="/login" onClick={() => setIsVendor(true)}>
             <PinkButton>Log In</PinkButton>
-          </Link>
+          </StyledLink>
         </PageContainer>
       ) : (
         <PageContainer>
           <h2>Find ice cream today</h2>
-          <img src="#" />
+          <LandingImg
+            src="https://image.flaticon.com/icons/svg/346/346178.svg"
+            alt="Ice cream cone"
+          />
 
-          <Link to="/signup" onClick={() => setIsVendor(false)}>
+          <StyledLink to="/signup" onClick={() => setIsVendor(false)}>
             <BlueButton>Sign Up</BlueButton>
-          </Link>
+          </StyledLink>
 
-          <Link to="/login" onClick={() => setIsVendor(false)}>
+          <StyledLink to="/login" onClick={() => setIsVendor(false)}>
             <BlueButton>Log In</BlueButton>
-          </Link>
+          </StyledLink>
         </PageContainer>
       )}
     </section>

diff --git a/client-app/src/styles/buttons.js b/client-app/src/styles/buttons.js
@@ -15,11 +15,15 @@ const Button = `
   display: block;
   width: 75vw;
   max-width: 400px;
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const BlueButton = styled.button`
-${Button}
-background-color: ${lightBlue}
+  ${Button}
+  background-color: ${lightBlue}
 `;
 
 const PinkButton = styled.button`
@@ -45,4 +49,4 @@ const StyledLink = styled(Link)`
   text-decoration: none;
 `;
 
-export { BlueButton, PinkButton, PinkSmallButton, PageContainer };
+export { BlueButton, PinkButton, PinkSmallButton, PageContainer, StyledLink };
diff --git a/client-app/src/styles/header.js b/client-app/src/styles/header.js
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 
 // import Montserrat from ‘./fonts/Montserrat-Regular.ttf’
 // injectGlobal`
@@ -22,7 +23,7 @@ const Title = styled.h1`
   font-style: italic;
   color: ${navy};
   font-size: 2.5rem;
-  margin-bottom: 0;
+  margin-bottom: 0.5rem;
 `;
 
 const HeaderArea = styled.header`
@@ -32,6 +33,10 @@ const HeaderArea = styled.header`
   padding-bottom: 5%;
 `;
 
-const LogInOption = styled.a``;
+const StyledLogInLink = styled(Link)`
+  font-size: 1rem;
+  color: ${navy};
+  text-decoration: none;
+`;
 
-export { Title, HeaderArea, LogInOption };
+export { Title, HeaderArea, StyledLogInLink };
diff --git a/client-app/src/styles/landing.js b/client-app/src/styles/landing.js
@@ -2,3 +2,21 @@ import styled from "styled-components";
 
 const lightBlue = "#C3DDED";
 const navy = "#1f4068";
+
+const Title2 = styled.h2`
+  color: ${navy};
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+`;
+
+const Img = `
+max-width: 20vw;
+`;
+
+const LandingImg = styled.img`
+  ${Img}
+  max-width: 20rem;
+  margin: 2.5rem;
+`;
+
+export { LandingImg, Title2 };