branding

alluster · Feb 5, 2021 · 332c4c4 · 332c4c4
1 parent b3c779d
commit 332c4c4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 33 deletions.
diff --git a/client/.eslintcache b/client/.eslintcache
diff --git a/client/public/map.png b/client/public/map.png
diff --git a/client/src/Components/Emailer.js b/client/src/Components/Emailer.js
@@ -3,13 +3,18 @@ import React, { useState } from 'react';
 import styled from 'styled-components'
 import {  Col, Row, Form, Button} from 'react-bootstrap';
 import axios from 'axios';
+import { useAuth0 } from "@auth0/auth0-react";
+
 
 
 const CustomRow = styled(Row) `
 	margin-top: 50px;
+	padding-left: -30px;
 `
 
 const Emailer = () => {
+	const { isAuthenticated } = useAuth0();
+
 	const sendEmail = async (e) => {
 		e.preventDefault();
 		try {
@@ -31,21 +36,29 @@ const Emailer = () => {
 	return (
 
 				<CustomRow>
-
+					<Col md={12}>
+						{
+							isAuthenticated ? 
+								<h3>Ota yhteys tukeen</h3>
+								:
+								<h3>Ota Wenu käyttöön ravintolassasi!</h3>
+						}
+
+										</Col>
 					<Col md={10}>
-						<Form.Group controlId="formBasicEmail">
+						<Form.Group className='mt-4' controlId="formBasicEmail">
 							<Form.Control 
 								size="lg"
 								type="email" 
 								value={email} 
 								onChange={(e) => setEmail(e.target.value)} 
-								placeholder="Anna email saadaksesi lisätietoa palvelustamme" 
+								placeholder="Anna email -osoitteesi" 
 							/>
 
 						</Form.Group>
 					</Col>
 					<Col md={2}>
-						<Button size="lg" variant="primary" type="submit" onClick={(e) => sendEmail(e)}>Lähetä</Button>
+						<Button  className='mt-4' size="lg" variant="primary" type="submit" onClick={(e) => sendEmail(e)}>Lähetä</Button>
 					</Col>
 				</CustomRow>
 

diff --git a/client/src/Components/Hero.js b/client/src/Components/Hero.js
@@ -14,18 +14,17 @@ const Content = styled.div `
 	height: calc(100% + 300px);
 	// background-image: url('bg.svg');
 	background-repeat: no-repeat;
-	margin-bottom: 20px;
 	background-size: cover;
 	overflow: hidden;
-	background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
-	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
-
+	// background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
+	// clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
+	background-color: #F4F4F2;
 	`;
 
 
 
 const Text = styled.div`
-	color: white;
+	// color: white;
 	min-height: 200px;
 	max-width: 100%;
 	margin-top: 100px;
@@ -46,7 +45,7 @@ const H1 = styled.h1`
 	font-size: 80px;
 	margin-bottom: 50px;
 	@media (max-width: 768px) {
-		font-size: 40px;
+		font-size: 50px;
 		margin-bottom: 20px;
 
 	  }
@@ -62,13 +61,18 @@ const Hero = () => {
 		<Content>
 
 			<Container>
-		<Text>
+				<Text>
 						<H1>Ravintolasi ruokalista ja tilausten hallinta yhdessä paikassa.</H1>
 						<h3>Palvelumme avulla saat ravintolasi kotisivuille oman, helposti päivitettävän ruokalistan, jonka avulla asiakkaasi voivat tilata ruokaa kotiinkuljetuksella kotiin.</h3>
-						<Emailer />
-							{
-								isAuthenticated ? "" :<Button size="lg" variant="success" onClick={() => loginWithRedirect()}>Kirjaudu palveluun tästä</Button>
-							}
+						{
+							isAuthenticated ?
+								""
+								:
+								<Emailer />
+						}
+						{
+							isAuthenticated ? "" :<Button size="lg" variant="success" onClick={() => loginWithRedirect()}>Kirjaudu palveluun tästä</Button>
+						}
 
 						</Text>		
 				</Container>

diff --git a/client/src/Views/Home.js b/client/src/Views/Home.js
@@ -9,42 +9,36 @@ import Container from '../Components/Container'
 const AlertStyled = styled.div`
 	z-index: 10000;
 	width: 100%;
-	postion: relative;
+	position: relative;
+
 `;
 const Content = styled.div`
 	height: calc(100% + 1000px);
+
 `
 const Image = styled.img `
-position: relative;
-
+	position: relative;
 	max-width: 100%;
 	min-height: 200px;
-	margin-top: -100px;
 	margin-bottom: 50px;
 	// transform: translate(0%, 30%);
 	z-index: 1000;
 
 `;
-const ImageContainer = styled(Container)`
-margin-top: 50px;
-width: 100%;
+const ImageContainer = styled.div`
+	width: 100%;
+	text-align: center;
+
 `
 
 const Home = () => {
 
 	return (
 		<Content>
-
 			<Hero />
 			<ImageContainer>
-						<Image src="/app.png" />
-
-			</ImageContainer>
-				<Container>
-
-
-				</Container>
-
+				<Image src="/map.png" />
+			</ImageContainer>					
 		</Content>
 
   );

diff --git a/client/src/custom.scss b/client/src/custom.scss
@@ -13,7 +13,7 @@
 	$white: #fff;
 	$gray: #6c757d;
 	$gray-dark: #343a40;
-	$primary: #2400FF;
+	$primary: #264653;
 	$secondary: #F4F4F2;
 	$success: #28a745;
 	$info: #17a2b8;