Merge pull request #38 from leo-paz/creating-sign-in-page

Ui TouchUps and General Sign In Page

frontend/grad-admissions-hub-app/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "aws-amplify": "^3.3.26",
     "graphql": "^15.5.0",
+    "lottie-web": "^5.7.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

frontend/grad-admissions-hub-app/src/App.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
 
 :root {
   font-size: 16px;
@@ -8,13 +9,16 @@
   --bg-primary: #23232e;
   --bg-secondary: #141418;
   --transition-speed: 600ms;
+  --sage-green: rgb(156, 244, 167);
+  --body-bg: rgb(16, 18, 34);
 }
 
 body {
-  color: black;
-  background-color: white;
+  color: var(--sage-green);
+  background-color: var(--body-bg);
   margin: 0;
   padding: 0;
+  font-family: 'Rubik', sans-serif;
 }
 
 body::-webkit-scrollbar {
@@ -34,11 +38,58 @@ main {
   padding: 1rem;
 }
 
+.sign-up-container {
+  display: flex;
+  flex-direction: row;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.sign-up {
+  display: flex;
+  background-color: var(--bg-primary);
+  margin: 1rem;
+  min-width: 35rem;
+  height: 15rem;
+  border-radius: 20px;
+  box-shadow: 2px 1px 20px 2px #848484;
+  transition: .2s;
+}
+
+.sign-up:hover {
+  transform: translateY(-1rem);
+}
+
+.sign-up-img {
+  width: 22rem;
+  height: 15rem;
+  top: 10px;
+  left: 10px;
+  border-radius: 20px;
+}
+
+.sign-up-text {
+  margin: 0 0.8rem;
+  text-align: center;
+}
+
+.sign-up-animation {
+  width: 5rem;
+  min-width: 5rem;
+  height: 5rem;
+  min-height: 5rem;
+  margin-left: 3.5rem;
+}
+
 .navbar {
   position: fixed;
   background-color: var(--bg-primary);
   transition: width 600ms ease;
   overflow: none;
+  z-index: 1;
 }
 
 .navbar-nav {
@@ -65,12 +116,12 @@ main {
   height: 5rem;
   color: var(--text-primary);
   text-decoration: none;
-  filter: grayscale(100%) opacity(0.7);
+  /* filter: grayscale(100%) opacity(0.7); */
   transition: var(--transition-speed);
 }
 
 .nav-link:hover {
-  filter: grayscale(0%) opacity(1);
+  /* filter: grayscale(0%) opacity(1); */
   background: var(--bg-secondary);
   color: var(--text-secondary);
 }
@@ -99,6 +150,14 @@ main {
   transition: var(--transition-speed);
 }
 
+.standard-nav-animation {
+  transition: var(--transition-speed);
+  width: 3.5rem;
+  min-width: 3.5rem;
+  height: 3.5rem;
+  min-height: 3.5rem;
+}
+
 .logo {
   font-weight: bold;
   text-transform: uppercase;
@@ -111,9 +170,18 @@ main {
   width: 100%;
 }
 
-.logo svg {
-  transform: rotate(0deg);
+.logo-animation-size {
+  /* transform: rotate(0deg); */
   transition: var(--transition-speed);
+  width: 3.5rem;
+  min-width: 3.5rem;
+  height: 3.5rem;
+  min-height: 3.5rem;
+  /* margin: 0 1.5rem; */
+}
+
+.logo-animation-size svg, .standard-nav-animation svg {
+  margin: 0 0.7rem;
 }
 
 .logo-text
@@ -124,9 +192,9 @@ main {
   transition: var(--transition-speed);
 }
 
-.navbar:hover .logo svg {
+/* .navbar:hover .logo- svg {
   transform: rotate(-180deg);
-}
+} */
 
 /* Small screens */
 @media only screen and (max-width: 600px) {
@@ -166,19 +234,26 @@ main {
   }
 
   .navbar:hover .link-text {
+    width: 75%;
     display: inline;
   }
 
-  .navbar:hover .logo svg
+  .navbar:hover .logo-animation-size
   {
-    margin-left: 16rem;
+    margin-left: 14rem;
   }
 
   .navbar:hover .logo-text
   {
+    width: 75%;
     left: 0px;
   }
 
+  /* .logo-animation-size {
+    width: 50px;
+    height: 50px;
+  } */
+
   .page {
     margin-left: 5rem;
     padding: 1rem;

frontend/grad-admissions-hub-app/src/App.js

@@ -6,8 +6,10 @@ import About from "./Pages/About";
 import ProfLogin from "./Pages/ProfLogin";
 import Submission from "./Pages/Submission";
 import Review from "./Pages/Review";
+import Profile from './Pages/Profile';
 import Navbar from "./Components/Navbar/Navbar";
 
+
 import Amplify from 'aws-amplify';
 import awsconfig from './aws-exports';
 
@@ -20,11 +22,12 @@ function App() {
         <Navbar />
         <Switch>
           <Route path="/about" component={About} />
-            <Route path="/proflogin" component={ProfLogin} />
+          <Route path="/proflogin" component={ProfLogin} />
           <Route path="/" exact component={Home} />
           <Route path="/applicantSignup" component={ApplicantSignup} />
           <Route path="/submission" component={Submission} />
           <Route path="/review" component={Review} />
+          <Route path="/signup" component={Profile} />
         </Switch>
       </div>
     </Router>

frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js

@@ -1,64 +1,121 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ReactComponent as ArrowIcon } from '../../icons/arrow.svg';
 import { ReactComponent as CatIcon } from '../../icons/cat.svg';
 import { ReactComponent as AlienIcon } from '../../icons/alien.svg';
 import { ReactComponent as PlanetIcon } from '../../icons/planet.svg';
 import { ReactComponent as ShuttleIcon } from '../../icons/shuttle.svg';
 import { ReactComponent as CogIcon } from '../../icons/cog.svg';
 
-import { Link } from
-"react-router-dom";
+import lottie from 'lottie-web';
+
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
+    const gradContainer = useRef(null);
+    const homeContainer = useRef(null);
+    const profileContainer = useRef(null);
+    const applicationsContainer = useRef(null);
+    const settingsContainer = useRef(null);
+
+    useEffect(() => {
+        lottie.loadAnimation({
+            container: gradContainer.current,
+            renderer: 'svg',
+            loop: true,
+            autoplay: true,
+            animationData: require('../../animations/grad-student.json'),
+            name: 'grad'
+        })
+
+        lottie.loadAnimation({
+            container: homeContainer.current,
+            renderer: 'svg',
+            loop: false,
+            autoplay: false,
+            animationData: require('../../animations/home.json'),
+            name: 'home'
+        })
+
+        lottie.loadAnimation({
+            container: profileContainer.current,
+            renderer: 'svg',
+            loop: false,
+            autoplay: false,
+            animationData: require('../../animations/profile.json'),
+            name: 'profile'
+        })
+
+        lottie.loadAnimation({
+            container: applicationsContainer.current,
+            renderer: 'svg',
+            loop: false,
+            autoplay: false,
+            animationData: require('../../animations/applications.json'),
+            name: 'applications'
+        })
+
+        lottie.loadAnimation({
+            container: settingsContainer.current,
+            renderer: 'svg',
+            loop: false,
+            autoplay: false,
+            animationData: require('../../animations/settings.json'),
+            name: 'settings'
+        })
+
+    }, [])
 
     return (
         <nav className="navbar">
             <ul className="navbar-nav">
                 <li class="logo">
                     <Link className="nav-link">
                         <span class="link-text logo-text">Grad Admissions</span>
-                        <ArrowIcon />
+                        <div className="logo-animation-size" ref={gradContainer}/>
+                        {/* <ArrowIcon /> */}
                     </Link>
                 </li>
-                <li class="nav-item">
+                <li 
+                    class="nav-item"
+                    onMouseEnter={() => lottie.play('home')}
+                    onMouseLeave={() => lottie.stop('home')}
+                >
                     <Link className="nav-link" to="/">
-                        <CatIcon />
+                        <div className="standard-nav-animation" ref={homeContainer}/>
+                        {/* <CatIcon /> */}
                         <span className="link-text">Home</span>
                     </Link>
                 </li>
-                <li class="nav-item">
-                    <Link className="nav-link" to="/applicantSignup">
-                        <CatIcon />
-                        <span className="link-text">Applicant Signup</span>
+                <li 
+                    class="nav-item"
+                    onMouseEnter={() => lottie.play('profile')}
+                    onMouseLeave={() => lottie.stop('profile')}
+                >
+                    <Link className="nav-link" to="/signup">
+                        <div className="standard-nav-animation" ref={profileContainer}/>
+                        {/* <CatIcon /> */}
+                        <span className="link-text">Profile</span>
                     </Link>
                 </li>
-                <li class="nav-item">
+                <li 
+                    class="nav-item"
+                    onMouseEnter={() => lottie.play('applications')}
+                    onMouseLeave={() => lottie.stop('applications')}
+                >
                     <Link className="nav-link" to="/about">
-                        <AlienIcon />
-                        <span className="link-text">About</span>
-                    </Link>
-                </li>
-                <li className="nav-item">
-                    <Link className="nav-link" to="/proflogin">
-                        <AlienIcon/>
-                        <span className="link-text">Prof Login</span>
-                    </Link>
-                </li>
-                <li class="nav-item">
-                    <Link className="nav-link" to="/submission">
-                        <PlanetIcon />
-                        <span className="link-text">Submission</span>
-                    </Link>
-                </li>
-                <li class="nav-item">
-                    <Link className="nav-link" to="/review">
-                        <ShuttleIcon />
-                        <span className="link-text">Review</span>
+                        <div className="standard-nav-animation" ref={applicationsContainer}/>
+                        {/* <AlienIcon /> */}
+                        <span className="link-text">Applications</span>
                     </Link>
                 </li>
-                <li class="nav-item">
+                <li 
+                    class="nav-item"
+                    onMouseEnter={() => lottie.play('settings')}
+                    onMouseLeave={() => lottie.stop('settings')}
+                >
                     <Link className="nav-link">
-                        <CogIcon />
+                        <div className="standard-nav-animation" ref={settingsContainer}/>
+                        {/* <CogIcon /> */}
                         <span className="link-text">Settings</span>
                     </Link>
                 </li>