Merge branch 'kelvin'

src/App.js

@@ -11,6 +11,7 @@ import AboutUs from './components/pages/AboutUs';
 import { createContext, useEffect, useState} from 'react'
 import axios from "axios";
 import RecommendedDish from "./components/pages/RecommendedDish";
+import { ToastContainer } from 'react-toastify';
 
 
 export const SignInContext = createContext(false);
@@ -55,6 +56,7 @@ function App() {
           } />
         </Switch>
       </Router>
+      <ToastContainer />
     </>
   );
 }

src/components/pages/SignUp.css

@@ -0,0 +1,19 @@
+.sign-up-border {
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  background-color: rgb(94, 212, 88);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 50px 100px;
+  border-radius: 25px;
+  color: rgb(255, 255, 255);
+}
+
+.sign-up-bg {
+  background: url('/public/images/bg.jpg');
+  height: 100vh;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

src/components/pages/SignUp.js

@@ -1,34 +1,62 @@
 import '../../App.css'
+import './SignUp.css'
 import { GoogleLogin } from '@react-oauth/google'
 import { jwtDecode } from 'jwt-decode'
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
-import Cookies from "js-cookie";
+import { toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useHistory } from 'react-router-dom'
 
-export default function SignUp({loggedIn, setLoggedIn}) {
-
-  /*TODO: Update UI, Add cookies */
+export default function SignUp({ loggedIn, setLoggedIn }) {
+  const history = useHistory()
 
   const login = async (response) => {
     axios
       .post('/api/user', {
         data: await jwtDecode(response.credential),
       })
-      .then((response) => {setLoggedIn(true)})
+      .then((response) => {
+        setLoggedIn(true)
+      })
       .catch((error) => {
         console.log(error)
       })
-
+
+    toast.success('You have successfully logged in.', {
+      position: 'bottom-right',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: 'light',
+    })
+
+    history.push('/')
   }
 
   return (
-    <div>
-      <GoogleLogin
-        onSuccess={login}
-        onError={(error) => {
-          console.log(error)
-        }}
-      />
+    <div className='sign-up-bg'>
+      <div className='sign-up-border'>
+        <h1 style={{ paddingBottom: '20px', fontSize: '60px' }}>BiteBrief</h1>
+        <hr style={{ borderColor: 'white' }} />
+        <h2 style={{ paddingTop: '20px' }}>Sign up</h2>
+        <p style={{ paddingTop: '8px', paddingBottom: '25px' }}>
+          Sign up to customize and recieve notifications on favorite dining hall
+          foods
+        </p>
+        <GoogleLogin
+          onSuccess={login}
+          onError={(error) => {
+            console.log(error)
+          }}
+        />
+        <p style={{ paddingTop: '8px', fontSize: '12px' }}>
+          By creating an account, you agree to our Terms & Privacy
+        </p>
+      </div>
     </div>
   )
 }