diff --git a/frontend/grad-admissions-hub-app/package-lock.json b/frontend/grad-admissions-hub-app/package-lock.json index aac684f..d2f41f2 100644 --- a/frontend/grad-admissions-hub-app/package-lock.json +++ b/frontend/grad-admissions-hub-app/package-lock.json @@ -10874,6 +10874,11 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lottie-web": { + "version": "5.7.7", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.7.tgz", + "integrity": "sha512-dAUrMX5BRxP7dr+qDWzablhGY6SqXztCS46sW11wjuzExQKZl5GLX2yMGGqg4AkdjgfjetndcU+VR1xoLhlkpA==" + }, "lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", diff --git a/frontend/grad-admissions-hub-app/package.json b/frontend/grad-admissions-hub-app/package.json index c4a2453..002ebb2 100644 --- a/frontend/grad-admissions-hub-app/package.json +++ b/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", diff --git a/frontend/grad-admissions-hub-app/public/professor.jpg b/frontend/grad-admissions-hub-app/public/professor.jpg new file mode 100644 index 0000000..dc6b71b Binary files /dev/null and b/frontend/grad-admissions-hub-app/public/professor.jpg differ diff --git a/frontend/grad-admissions-hub-app/public/students.jpg b/frontend/grad-admissions-hub-app/public/students.jpg new file mode 100644 index 0000000..9d543d8 Binary files /dev/null and b/frontend/grad-admissions-hub-app/public/students.jpg differ diff --git a/frontend/grad-admissions-hub-app/src/App.css b/frontend/grad-admissions-hub-app/src/App.css index 121d4da..9056606 100644 --- a/frontend/grad-admissions-hub-app/src/App.css +++ b/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; diff --git a/frontend/grad-admissions-hub-app/src/App.js b/frontend/grad-admissions-hub-app/src/App.js index e396bea..4240a6d 100644 --- a/frontend/grad-admissions-hub-app/src/App.js +++ b/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() { - + + diff --git a/frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js b/frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js index fc447a6..f2a0b9a 100644 --- a/frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js +++ b/frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js @@ -1,4 +1,4 @@ -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'; @@ -6,10 +6,64 @@ 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 (