From bae71612540ccb8a00dca71eea91eae06e13bf7b Mon Sep 17 00:00:00 2001 From: Nils Streedain Date: Wed, 13 Mar 2024 23:16:01 -0700 Subject: [PATCH] CSS cleanup and merged CSS files for redesign/refactoring (#166) * Updated top navbar so that users not logged in can access every page * Removed empty app.css * Cleanup old components.css file before rewrite * Initial cleanup of pages.css * Initial login CSS cleanup * Removed unused/legacy CSS selectors * Combined styles for refactor * Additional cleanup and fixed signup slider * Combine login/signup styles * Combine unessesary margin/padding in CSS * Fixed #41 --------- Co-authored-by: sirtinyhead --- client/public/Arrow_left_long.png | Bin 233 -> 0 bytes client/public/index.html | 60 +- client/public/ssoIcon.png | Bin 6931 -> 0 bytes client/src/App.css | 0 client/src/App.js | 1 - client/src/components/nav/SideNavbar.js | 3 +- client/src/components/nav/TopNavbar.js | 35 +- client/src/components/nav/components.css | 587 ----------- client/src/index.css | 14 - client/src/index.js | 5 +- client/src/pages/ConfirmationCodePassword.js | 25 +- client/src/pages/Login.js | 195 ++-- client/src/pages/Profile.js | 9 +- client/src/pages/ResetPassword.js | 11 +- client/src/pages/Signup.js | 185 ++-- client/src/styles/index.css | 970 +++++++++++++++++++ client/src/styles/pages.css | 788 --------------- 17 files changed, 1203 insertions(+), 1685 deletions(-) delete mode 100644 client/public/Arrow_left_long.png delete mode 100644 client/public/ssoIcon.png delete mode 100644 client/src/App.css delete mode 100644 client/src/components/nav/components.css delete mode 100644 client/src/index.css create mode 100644 client/src/styles/index.css delete mode 100644 client/src/styles/pages.css diff --git a/client/public/Arrow_left_long.png b/client/public/Arrow_left_long.png deleted file mode 100644 index cb04e49c0940468be56bd89e4cdee2a34b344eb0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 233 zcmeAS@N?(olHy`uVBq!ia0vp^ia;#E!3HEtCQboKa29w(7Bet#3xhBt!>l*8o|0J>k`E{Nyjv*C{Z!e$bZBP(kxo|Y1K{g}(R-6{7amyJR%Encc`QQ0T^@Vd#%S+ky4o;wuTYp7@Lxar8#he>}*i;vyes=YMs aB}22to7n=>o$ml$!r - - - - - - - - - - - - - - React App - - - -
- - + + + + + + + + + + + + MyClassroom + + + +
+ diff --git a/client/public/ssoIcon.png b/client/public/ssoIcon.png deleted file mode 100644 index 44e5520d827c1b15ff73332122688257396f1567..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6931 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 diff --git a/client/src/App.css b/client/src/App.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/App.js b/client/src/App.js index 8e39bb02..184841af 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,4 +1,3 @@ -import './App.css'; import { Route, Routes, Navigate, Outlet } from 'react-router-dom'; /* diff --git a/client/src/components/nav/SideNavbar.js b/client/src/components/nav/SideNavbar.js index c47d95d5..b3076fc9 100644 --- a/client/src/components/nav/SideNavbar.js +++ b/client/src/components/nav/SideNavbar.js @@ -1,7 +1,6 @@ import React from 'react'; import { NavLink } from 'react-bootstrap'; import { Link, useLocation } from 'react-router-dom'; -import './components.css' import SchoolIcon from '@mui/icons-material/School'; import MenuBookIcon from '@mui/icons-material/MenuBook'; import QuestionMarkIcon from '@mui/icons-material/QuestionMark'; @@ -51,4 +50,4 @@ function SideNavbar(props) { : <>} } -export default SideNavbar; \ No newline at end of file +export default SideNavbar; diff --git a/client/src/components/nav/TopNavbar.js b/client/src/components/nav/TopNavbar.js index 2710241e..faf5048f 100644 --- a/client/src/components/nav/TopNavbar.js +++ b/client/src/components/nav/TopNavbar.js @@ -1,6 +1,5 @@ import { React, useState } from 'react'; import { NavLink } from 'react-router-dom'; -import './components.css' import useAuth from '../../hooks/useAuth' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faUser } from '@fortawesome/free-solid-svg-icons' @@ -20,23 +19,43 @@ function TopNavbar(props) { {/*TODO: Finish obvious improvements, add functionality to read name of user*/}
- {console.log(props.inCourse)} {props.loggedIn ? : -

placeholder not logged in

} +

placeholder not logged in

+ }
-
- - -
+ {props.loggedIn ? + + : + + } +
); } +function LoggedOutRight(){ + return( + + Log In + Get Started + + ) +} + +function LoggedInRight(props){ + return( +
+ + +
+ ) +} + function LoggedInButtons(){ return( <> @@ -74,4 +93,4 @@ function UserMenu(props) { } } -export default TopNavbar; \ No newline at end of file +export default TopNavbar; diff --git a/client/src/components/nav/components.css b/client/src/components/nav/components.css deleted file mode 100644 index 9ec22a4d..00000000 --- a/client/src/components/nav/components.css +++ /dev/null @@ -1,587 +0,0 @@ -body{ - font-family:sans-serif; - /*margin: 20px 40px;*/ -} -#mainbox{ - - position: fixed; - font-size: 36px; - color: #4e4848; - display: block; - cursor: pointer; - transition: all 0.5s; - top:40%; - left: 0%; - - /*margin-left: -80px;*/ - /*padding-top:50%;*/ - -} -.mainBody { - position: relative; - margin: 0px; - padding: 0px; - width: 100%; - height: 100%; - display: flex; - z-index: 1; - flex-direction: row; -} - -.sidemenu{ - position: sticky; - top:0px; - left:0px; - height:100%; - width: 0px; - background-color: #E2e0e0; - z-index:1; - padding-top: 100px; - overflow-x: hidden; - transition: all 0.5s; -} -.sidemenu a{ - padding: 18px 18px 18px 64px; - text-decoration: none; - font-size: 20px; - color: #4e4848; - display: block; -} - -.sidemenu a:hover{ - color: #1d1a1a -} - -.sidemenu .closebtn{ - cursor: pointer; - position: absolute; - /*right:0%;*/ - font-size: 36px; - text-align: center; - top: 40%; - left:70%; -} - -/* Navbar */ - -#classroomIcon{ - height: 32px; - width: auto; - vertical-align: middle; - margin-right: 4px; -} -#classroomLink{ - font-weight: bold; -} -#classroomLink:hover { - text-decoration: underline; -} - -.navbarMain{ - /* background-color: #293846; */ - position: sticky; - display: flex; - justify-content: space-between; /* content: (navbar) Left, Center, Right*/ - /*padding-top: 5px;*/ - padding-left: 10px; - padding-right: 10px; - height: 5vh; - z-index: 100; - align-items: center; -} -.smallText{ - font-size: 18px !important; -} - -.navbarMain .navbarItem{ - color: black !important; - font-size: 24px; -} - -.navbarItem { - margin: 0px; /* best way to enforce centering? */ - text-align: center; - text-decoration: none; -} - -.navbarLeftContainer { -} - -.navbarCenterContainer{ - display: flex; - justify-content: center; - align-items: center; -} - -.navbarRightContainer { -} - -.navButtons{ - display: flex; - justify-content: center; - width: 20%; -} - -.navButtons a{ - - border-radius: 11px; - border-width: 1px; - border-style: solid; - border-color: grey; - background-color: transparent; - - color: black; - text-decoration: none; - - padding: 0px 15px; - margin: 0px 5px; -} - -.navButtons a:hover{ - text-decoration: underline; -} - -/* Dropdown in Navbar */ - -.dropdownMenu { - position: absolute; - display: none; - background-color: rgb(221, 221, 221); - padding: 0.5dvi; - border-radius: 3px; - top: 3vh; - right: 0; -} - -.dropdownIcon { - padding-top: 5px; /* For some reason this icon isn't centered vertically in the div like the other items, so this is a band-aid fix. */ - color: black; - height: 32px; - width: auto; -} - -.dropdown { -} - -.dropdownLink { - text-decoration: none; - padding: 0 0.5vw 0 0.5vw; - color: black !important; - font-size: calc(10px + 1vw); -} - -.dropdownItem { -} - -.dropdownLink:hover { - text-decoration: underline; -} - - - -.dropdown:hover .dropdownMenu { - display: flex; - flex-direction: column; - white-space: nowrap; -} - - - - -/*Sidebar*/ - -.sidebarBody{ - position: relative; - height: 100vh; - width: 15vw; - background-color: #2f4050; - border: 0px; - display: block; -} - -.sidebarList{ - height: auto; - padding: 0; - width: 100%; - white-space: wrap; -} - -.sidebarList .sidebarItem{ - width: 100%; - height: 8vh; - list-style-type: none; - margin: 0; - display: flex; - flex-direction: row; - color: white; - justify-content: center; - align-items: center; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; -} - -.sidebarList .sidebarItem:hover{ - cursor: pointer; - background-color: #293846; -} - -.sidebarItem #sidebarIcon{ - display: grid; - flex: 30%; - place-items: center; -} -.sidebarItem #sidebarTitle{ - flex: 70%; -} - -.sidemenu a { - text-decoration: none; -} -/* Question Card CSS */ - - -.cardContainer{ - display: flex; - align-items: center; - justify-content: center; -} - -.cardBody{ - -} - - -/* Roster CSS */ - -.allstudents { - display: block; - width: 80vw; - margin: 10px; - padding: 1.5vh 3vw 1.5vh 1vw; -} - -.studentrow { - overflow: hidden; - font-size: calc(10px + 0.8vw); - border: solid 1px black; - border-radius: 5px; - padding: 1vh; - margin-bottom: 0.8vh; - display: flex; - justify-content: space-between; - align-items: flex-end; -} - -.studentemail { - font-size: calc(11px + 0.4vw); -} - - -/* Questions CSS */ - -.questionListItem { - display: flex; - width: 80vw; - border: solid 2px black; - border-radius: 10px; - padding: 0.5vh 1vw 0.5vh 1vw; - font-size: calc(10px + 0.8vw); - margin: 2px; -} - -.questionListItem .checkbox { - width: 2vw; - height: 2vh; -} - -.questionListItem .checkboxContainer { - display: flex; - align-items: center; - padding-right: 0.5vw; -} - -.questionListItemInformation { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; - flex: 1; -} - -.questionListItemInformation .questionStem { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - max-width: 50vw; -} - -.questionListItemInformation .questionType { - font-size: calc(11px + 0.4vw); -} - -.contentView { - display: flex; - align-items: center; - flex-direction: column; - padding: 15px; - width: 100%; -} - -.searchBarContainer { - display: flex; - flex-direction: column; - margin-bottom: 3vh; -} - -.searchForm { - display: flex; - flex-direction: column; -} - -.searchBar { - border-radius: 5px; - width: 40vw; - font-size: calc(10px + 0.5vw); - padding: 0.5vw; -} - -.dynamic-btn { - font-size: calc(10px + 0.5vw); - border-radius: 5px; - margin-top: 1px; - padding: 0.5vw 0px 0.5vw 0px; - flex: 1; - color: white; -} - -.dynamic-btn:hover { - color: white; -} - -.footer { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.header { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.basicLink { - text-decoration: none; - color: inherit; -} - -.basicLink:hover { - color: inherit; -} - -.split-space { - display: flex; - justify-content: center; -} - -.question { - display: flex; - flex-direction: column; -} - -.question-subcontainer { - display: flex; - flex-direction: column; - margin: 5px; - font-size: calc(12px + 0.4vw) !important; -} - -.question-option { - display: flex; - flex-direction: row; - margin: 3px; - align-items: center; -} - -.question-reorder { - display: flex; - flex-direction: row; - height: 4vh; - align-items: center; - padding: 2px; -} - -.question-arrow { - display: flex; - font-size: calc(12px + 0.4vw) !important; - width: 4vh; - height: 4vh; - margin: 1px; - align-items: center; - justify-content: center; - align-content: center; -} - -.question-dropdown { - -} - -.question-text { - height: 4vh; - width: 40vw; - min-width: 100px; - max-width: 700px; -} - -.question-select { - width: 4vh; - height: 4vh; - margin: 2px; -} - -.negative-btn { - background-color: #ff4d7b; - margin: 3px; - color: white; -} - -.negative-btn:hover { - background-color: #e84470; - color: white; -} - -.btn-secondary:focus { - background-color: #6c757d; - text-decoration: none; - border: none; -} - - -.popup-background { - width: 100%; - height: 100%; - background-color: rgb(0, 0, 0, 0.2); - display: flex; - justify-content: center; - align-items: center; - position: fixed; - top: 0; - left: 0; - z-index: 1; -} - -.popup-container { - display: flex; - flex-direction: column; - width: 70%; - height: 80%; - background-color: white; -} -/* Single Question CSS */ - -.question-stem { - position: relative; - background-color: lightgray; - padding: 20px; - width: 100%; - font-size: x-large; - text-align: center; -} - -.student-question-wrapper { - position: relative; - border: 2px solid black; - border-radius: 5px; - margin-top: 50px; - left: 25%; - width: 50%; -} - -.student-question-answer-option { - -} - -.student-question-option-label { - font-size: x-large; -} - -.student-question-response-form { - margin-top: 20px; - margin-bottom: 20px; -} - -.student-question-radio { - width: 25%; - margin: 10px; -} - -.student-question-response-submit-button { - position: relative; - margin-bottom: 20px; - left: 40%; - width: 20%; - font-size: larger; -} - -.right-answer { - position: relative; - color: green; -} - -.wrong-answer { - position: relative; - color: #FF9494; -} - -.unselected-right-answer { - position: relative; - color: yellowgreen; -} - -.student-question-score { - position: relative; - margin-bottom: 20px; - left: 40%; - width: 20%; - font-size: x-large; - text-align: center; -} - -.student-question-li { - font-size: x-large; - margin-left: 20px; -} - -.horizontal-flex-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.lecture-card { - margin: 5px; -} - -.vertical-container { - display: flex; - flex-direction: column; - margin: 15px; -} - -.right-aligned { - display: flex; - align-items: flex-end; - flex-direction: row; - justify-content: flex-end; -} - -.add-section-h1 { - margin-left: 20px; -} - -.add-section-div { - margin-left: 20px; - margin-top: 20px; - margin-right: 20px; -} \ No newline at end of file diff --git a/client/src/index.css b/client/src/index.css deleted file mode 100644 index 83d55891..00000000 --- a/client/src/index.css +++ /dev/null @@ -1,14 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - overflow: scroll; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/client/src/index.js b/client/src/index.js index 51f225fe..04b9dcd3 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,18 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; -import './index.css'; +import './styles/index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Provider } from 'react-redux' import App from './App' import store from './redux/store' ReactDOM.render( - , document.getElementById('root') -); \ No newline at end of file +); diff --git a/client/src/pages/ConfirmationCodePassword.js b/client/src/pages/ConfirmationCodePassword.js index 58c8f452..9ef2aee2 100644 --- a/client/src/pages/ConfirmationCodePassword.js +++ b/client/src/pages/ConfirmationCodePassword.js @@ -1,6 +1,5 @@ import React, { useState } from "react" import { Row, Col, Container, ListGroup, Button, NavLink } from "react-bootstrap" -import '../styles/pages.css' import apiUtil from '../utils/apiUtil' import { getUserState } from '../redux/selectors' import { useSelector, useDispatch } from 'react-redux'; @@ -18,10 +17,8 @@ function ConfirmationCodePasswordRequest() { const [ message, setMessage ] = useState("") const dispatch = useDispatch() const navigate = useNavigate() - - - async function confirmationCodeRequest(emailPayload){ + async function confirmationCodeRequest(emailPayload) { let response = {} response = await apiUtil('put', '/users/password', {}, emailPayload) @@ -36,29 +33,20 @@ function ConfirmationCodePasswordRequest() { setEmail("") } - function emailObjectStaging(){ - const emailInput = { email: email } - //console.log({emailInput}) confirmationCodeRequest(emailInput) - } - return (

Confirmation Code

-

Please enter in your email address - related to your account. We will send - a confirmation code to that email.

+

Please enter in your email address related to your account. We will send a confirmation code to that email.


-
-
event.preventDefault()}>
setEmail(input.target.value)} placeholder="Enter email address here..."/> @@ -68,16 +56,11 @@ function ConfirmationCodePasswordRequest() {
-
-
- ) } //this function is the screen for the user to change their password to the account. -//Using the PUT that includes email, confirmation code, rawpassword, and confirmed new password. - - -export default ConfirmationCodePasswordRequest \ No newline at end of file +//Using the PUT that includes email, confirmation code, rawpassword, and confirmed new password. +export default ConfirmationCodePasswordRequest diff --git a/client/src/pages/Login.js b/client/src/pages/Login.js index 9683a5b3..437b4f32 100644 --- a/client/src/pages/Login.js +++ b/client/src/pages/Login.js @@ -8,40 +8,37 @@ import { login } from '../redux/actions'; import Notice from '../components/Notice' import { Link } from "react-router-dom"; import { TailSpin } from 'react-loader-spinner' -import styles from '../styles/pages.css'; export default function Login(props) { + const dispatch = useDispatch() + const navigate = useNavigate() + const [ params ] = useSearchParams() + + //form fields + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(false) + const [message, setMessage] = useState("") + const [loading, setLoading] = useState(false) + + // TODO: expand this validation & use it + function validateForm() { + return email.length > 0 && password.length > 0; + } - const dispatch = useDispatch() - const navigate = useNavigate() - const [ params ] = useSearchParams() - - //form fields - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(false) - const [message, setMessage] = useState("") - const [loading, setLoading] = useState(false) - - // TODO: expand this validation & use it - function validateForm() { - return email.length > 0 && password.length > 0; - } - - // TODO: add some sort of loading symbol when waiting for a response - async function authenticateUser(user){ + // TODO: add some sort of loading symbol when waiting for a response + async function authenticateUser(user){ const response = await apiUtil('post', 'users/login', { dispatch: dispatch, navigate: navigate}, user) setLoading(false) setMessage(response.message ? response.message : "") setError(response.error) if (response.status === 200) { - dispatch(login(response.data.user, response.data.status)) - try { - navigate(params.get('redirect')) - } - catch(e) { - navigate('/') - } + dispatch(login(response.data.user, response.data.status)) + try { + navigate(params.get('redirect')) + } catch(e) { + navigate('/') + } } } @@ -51,91 +48,83 @@ Could maybe be moved to its own component file. This component is an email and password login with non-functional SSO button logins are handled on submit through authenticateUser function */ - class LoginForm extends React.Component { +class LoginForm extends React.Component { constructor(props){ - super(props); - this.state = { - email: '', - rawPassword: '' - }; + super(props); + this.state = { + email: '', + rawPassword: '' + }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); - } - - // every time a text box is updated, it's react state is updated as well. - handleChange(event) { - const { name, value } = event.target; - this.setState({ - [name]: value - }); - } - - //input React states to authenticateUser function. - handleSubmit() { - event.preventDefault(); - setLoading(true) - const user = { - email: this.state.email, - rawPassword: this.state.rawPassword, } - authenticateUser(user); - } - - render(){ - return( -
- - - {/*Input fields: value mapped to React state through handleChange*/} - - - Forgot your password? - {message != "" && error && } - - + // every time a text box is updated, it's react state is updated as well. + handleChange(event) { + const { name, value } = event.target; + this.setState({ + [name]: value + }); + } -

or

+ //input React states to authenticateUser function. + handleSubmit() { + event.preventDefault(); + setLoading(true) + const user = { + email: this.state.email, + rawPassword: this.state.rawPassword, + } + authenticateUser(user); + } - - ) - } + render(){ + return( +
+ {/*Input fields: value mapped to React state through handleChange*/} + + + Forgot your password? + {message != "" && error && } + +

or

+ + + ) + } } - return ( -
-
-
- - {/*Image attr: Unknown, need to ask*/} - - {process.env.REACT_APP_NAME} - -
-

Welcome Back!

- New user? -
- + return ( +
+
+
+ + {/*Image attr: Unknown, need to ask*/} + + {process.env.REACT_APP_NAME} + +
+

Welcome Back!

+

New user?

+
+ +
+
+
+
+

Log in

+ +
+
-
- -
-
-

Log in

- - - -
-
-
- ); -} \ No newline at end of file + ); +} diff --git a/client/src/pages/Profile.js b/client/src/pages/Profile.js index 4fe1b967..e8f47590 100644 --- a/client/src/pages/Profile.js +++ b/client/src/pages/Profile.js @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import { Row, Col, Container, ListGroup, Button, NavLink } from "react-bootstrap" -import '../styles/pages.css' import apiUtil from '../utils/apiUtil' import { getUserState } from '../redux/selectors' import { useSelector, useDispatch } from 'react-redux'; @@ -58,7 +57,6 @@ function Profile(props) { //this function calls the api call, as well as sets the states all back to //being blank. function sendEditedAccountInfo(){ - const newAccountInfo = { email: email, firstName: firstName, @@ -90,7 +88,6 @@ function Profile(props) { if(editToggle){ return ( <> - { loading ? : @@ -130,8 +127,7 @@ function Profile(props) { } ); - } - else{ + } else{ return ( <> { message !== "" && } @@ -155,7 +151,6 @@ function Profile(props) { ); } - } -export default Profile; \ No newline at end of file +export default Profile; diff --git a/client/src/pages/ResetPassword.js b/client/src/pages/ResetPassword.js index 787b70fb..9b4df3a3 100644 --- a/client/src/pages/ResetPassword.js +++ b/client/src/pages/ResetPassword.js @@ -1,5 +1,4 @@ import React, { useRef, useState } from "react" -import '../styles/pages.css' import apiUtil from '../utils/apiUtil' import { useNavigate } from 'react-router-dom' import Notice from '../components/Notice' @@ -42,10 +41,7 @@ const navigate = useNavigate() } } - - function resetPasswordObjectStaging(){ - const resetPasswordInformation = { email: email, passwordResetCode: confirmationCode, @@ -67,9 +63,7 @@ const navigate = useNavigate() new password for the account.


-
-
event.preventDefault()}> {setEmail(event.target.value)} }/> {setConfirmationCode(event.target.value)} }/> @@ -80,11 +74,8 @@ const navigate = useNavigate()
{ message !== "" && }
- -
) - } -export default ResetPasswordForLoginUser \ No newline at end of file +export default ResetPasswordForLoginUser diff --git a/client/src/pages/Signup.js b/client/src/pages/Signup.js index a19bf526..acab99e9 100644 --- a/client/src/pages/Signup.js +++ b/client/src/pages/Signup.js @@ -3,7 +3,6 @@ import apiUtil from '../utils/apiUtil' import Notice from '../components/Notice' import { useNavigate } from 'react-router-dom' import { Link } from "react-router-dom"; -import styles from '../styles/pages.css'; function Signup(props){ const [email, setEmail] = useState("") @@ -12,20 +11,16 @@ function Signup(props){ const [firstName, setFirstName] = useState("") const [lastName, setLastName] = useState("") const [isTeacher, setIsTeacher] = useState(false); - const [ message, setMessage ] = useState("") - const [ error, setError ] = useState(false) + const [message, setMessage] = useState("") + const [error, setError] = useState(false) const emailInput = useRef(null) const passwordInput = useRef(null) const confirmPasswordInput = useRef(null) const firstNameInput = useRef(null) const lastNameInput = useRef(null) const navigate = useNavigate() - - const handleCheckboxChange = (event) => { - setIsTeacher(event.target.checked); - } + async function CreateAccountRequest(accountPayload){ - let response = {} response = await apiUtil('post', '/users', {}, accountPayload) @@ -42,7 +37,6 @@ function Signup(props){ if(response.status == 201){ navigate("/login") } - } function createAccountStaging(){ @@ -69,111 +63,106 @@ function Signup(props){ constructor(props){ super(props); this.state = { - email: '', - rawPassword: '', - confirmedPassword: '', - firstName: '', - lastName: '' + email: '', + rawPassword: '', + confirmedPassword: '', + firstName: '', + lastName: '', + isTeacher: false }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); - } + } - // every time a text box is updated, it's react state is updated as well. - handleChange(event) { - const { name, value } = event.target; + // every time a text box is updated, it's react state is updated as well. + handleChange(event) { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; this.setState({ - [name]: value + [name]: value }); - } + } - //input React states to CreateAccountRequest function. - handleSubmit() { + //input React states to CreateAccountRequest function. + handleSubmit() { event.preventDefault(); const accountInformation = { - email: this.state.email, - rawPassword: this.state.rawPassword, - confirmedPassword: this.state.confirmedPassword, - firstName: this.state.firstName, - lastName: this.state.lastName, - isTeacher: this.state.isTeacher + email: this.state.email, + rawPassword: this.state.rawPassword, + confirmedPassword: this.state.confirmedPassword, + firstName: this.state.firstName, + lastName: this.state.lastName, + isTeacher: this.state.isTeacher } + CreateAccountRequest(accountInformation) - } - - render(){ - return( -
- - - - {/*Input fields: value mapped to React state through handleChange*/} - - - - - - - - -

or

+ } - -
) - } + render(){ + return( +
+ + {/*Input fields: value mapped to React state through handleChange*/} + + + + + + +

or

+ +
+ ) } +} return ( -
-
-
- - {/*Image attr: Unknown, need to ask*/} - - {process.env.REACT_APP_NAME} - -
-

Create your free account today!

- already have an account? -
- +
+
+
+ + {/*Image attr: Unknown, need to ask*/} + + {process.env.REACT_APP_NAME} + +
+

Create your free account today!

+

Already have an account?

+
+ Return to home +
+
+
+
+

Sign Up

+ +
+
-
- -
-
-

Sign Up

- - -
-
-
- ) -} + ) + } -export default Signup \ No newline at end of file +export default Signup diff --git a/client/src/styles/index.css b/client/src/styles/index.css new file mode 100644 index 00000000..3faf8c77 --- /dev/null +++ b/client/src/styles/index.css @@ -0,0 +1,970 @@ +:root { + --primary: #fff; + --splash: #D2DFD3; + --accent: darkgrey; +} + +html, body, #root { + height: 100%; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.mainBody { + height: 100%; + display: flex; + flex-direction: row; +} + +/* Signup/Login */ +#auth { + display: flex; + width: 100%; + + .leftContainer { + position: relative; + width: 50%; + background-color: var(--splash); + border-radius: 0 50px 50px 0; + + .welcomeBox { + position: relative; + padding: 10vh 5vw; + height: 100%; + + .classroomLink { + font-size: 36px; + font-weight: bold; + color: black; + + .classroomIcon { + margin-right: 8px; + } + } + + .textBox { + margin-top: 3vh; + width: 70%; + } + + .homeButton { + position: absolute; + bottom: 5vw; + font-size: 18px; + color: black; + text-decoration: none; + border-radius: 13px; + background-color: var(--splash); + padding: 15px; + + img { + padding: 0px 10px 3px 5px; + height: 18px; + } + + &:hover { + background-color: var(--primary); + transition: .4s ease; + } + } + } + } + + .rightContainer { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + + .loginSection { + padding: 0 15%; + + .switch { + left: 50%; + transform: translateX(-50%); + margin-top: 32px; + position: relative; + display: inline-block; + width: 400px; + height: 56px; + border: 2px var(--accent) solid; + border-radius: 15px; + + #studentText, #teacherText { + cursor: pointer; + z-index: 99; + color: black; + position: absolute; + top: 50%; + transform: translate(0%, -50%); + } + + #studentText { + left: 12%; + } + + #teacherText { + right: 12%; + } + + .teacherCheck { + opacity: 0; + width: 0; + height: 0; + + &:checked + .slider:before { + transform: translateX(196px); + } + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 15px; + + &:before { + position: absolute; + content: ""; + height: 56px; + width: 208px; + left: -2px; + bottom: -2px; + background-color: var(--splash); + transition: 0.4s; + border-radius: 13px; + } + } + } + + .inputContainer { + margin-top: 40px; + background:transparent; + border: none; + border-bottom: 1px solid var(--accent); + padding-left: 6px; + width: 100%; + } + + .firstNameContainer { + width: 45% !important; + float: left; + } + + .lastNameContainer { + width: 45% !important; + margin-left: 10%; + } + + .changePasswordLink { + display: block; + margin-top: 20px; + color: gray; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .submitButton { + margin-top: 10vh; + } + + .submitButton, .ssoButton { + display: block; + position: relative; + left: 50%; + transform: translateX(-50%); + border: 1px solid var(--splash); + border-radius: 9px; + width: 256px; + height: 48px; + transition: 0.4s; + background-color: var(--splash); + + &:hover { + border: 1px solid black; + background-color: var(--primary); + } + } + + .orSSOText { + margin: 20px 0; + display: flex; + justify-content: center; + color: var(--accent); + } + } + } +} + +/* Login Page CSS */ +h1 { + font-size: 60px; + font-weight: bold; + color: black; + margin-bottom: 10px; /* without this, margin-bottom is 50, I have no idea why */ +} + +h2 a { + font-size: 30px; + color: gray; + text-decoration: underline; + margin-top: 1vh; /* margin-top has no effect, I dont know why*/ +} + +/* Student Landing Page */ +.card { + display:flex; + margin: 20px; + border: 1px solid black; + box-shadow: 5px 5px 5px lightgrey; +} + +.navbar .nav-link { + font-size: 15px; + margin-left: 40px; +} + +.buttons { + position: relative; + top: 70px; + left: 100px; + +} + +.hideBtn { + margin-left: 10px; +} + +.btn-add { + background-color: green; + border-color: green; +} + +.btn-add:hover { + background-color: rgb(1, 109, 1); + border-color: rgb(1, 109, 1); +} + +/* Profile Pages */ +.profileInfo { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; +} + +.tester { + margin-top: -10vh; + display: flex; + height: 40vh; + width: 40vw; +} + +.profileRow { + display: flex; + padding: 1em; + + & input { + width: 100%; + } +} + +.profileButton { + margin-top: 1em; + display: flex; +} + +/* Single Course Page CSS */ +.singleCourseContainer { + padding: 20px; + display: block; + width: fit-content; + height: fit-content; + text-align: center; +} + +.singleCourseDetails { + border: 4px solid rgb(221, 221, 221); + background-color: rgb(221, 221, 221); + border-radius: 10px; + color: black; +} + +.singleCourseBtnDiv { + padding-top: 20px; +} + +/* Landing Page */ +.landing-page { + width: 100%; +} + +#join-course { + width: 30%; + padding: 20px 0 0 100px; +} + +#landing-subtitle{ + padding: 20px 0 0 100px; + font-size: 27px; +} + +#create-course-btn { + margin: 0 0 20px 100px; +} + +hr { + border-top: 2px solid black; + margin: 0 100px; +} + +.course-card { + min-width: 300px; + width: 30%; +} + +/* Lectures */ +.lectures { + width: 100%; +} + +.lectures-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 20px 100px 100px 100px; +} + +#lectures-subtitle { + font-size: 27px; + margin: 20px 20px 0px; +} + +.lecture-card { + min-width: 300px; + margin: 5px; + width: 29%; +} + +.create-lecture-btn { + margin: auto 0 auto auto; +} + +/* Back button */ +.back-btn { + width: 40px; + background-image: url(../../public/free-back-arrow-1767531-1502435.webp); + background-size: cover; + border: none; + background-color: transparent; +} + +.back-btn:hover { + border: none; + background-color: transparent; +} + +.back-btn-lectures { + display: flex; + width: 40px; + height: 40px; + margin: auto 0; +} + +.lectures-top-bar { + margin: 20px 100px; + display: flex; +} + +/* Create */ +.create-container { + display: flex; + flex-direction: column; + width: 40%; + margin: 100px auto auto; +} + +.create-bar { + display: flex; + flex-direction: row; +} + +.back-btn-create { + display: flex; + margin: auto 0 auto; + width: 40px; + height: 40px; +} + +.create-subtitle { + font-size: 35px; + margin: auto 0 auto 20px; +} + +.create-hr-bar { + margin: 0 0; +} + +.inputPublishedContainer { + margin: 15px 0; +} + +.create-btns { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +#create-submit { + margin-left: 10px; +} + +.inputOrderContainer { + margin: 15px 0 20px; + display: flex; + flex-direction: row; + justify-content: start; +} + +#lecture-order-subtitle { + margin: auto 20px auto 0; +} + +#lecture-order-textentry { + width: 30%; + margin: auto 0; +} + +/* Lecture */ +.lecture-container { + width: 100%; + display: flex; + flex-direction: column; +} + +.lecture-page-container { + margin: 0 100px; + display: flex; + flex-direction: column; +} + +.lecture-subtitle { + font-size: 40px; + margin: auto 0 auto 20px; +} + +.lecture-hr { + margin: 0; +} + +.lecture-header-btns { + margin-bottom: 20px; + display: flex; + flex-direction: row; +} + +.lecture-publish-switch{ + margin-left: auto; +} + +.lecture-header { + display: flex; + flex-direction: row; + margin: 20px 0 0; +} + +/* Navbar */ +#classroomIcon { + height: 32px; + width: auto; + vertical-align: middle; + margin-right: 4px; +} + +#classroomLink { + font-weight: bold; +} + +#classroomLink:hover { + text-decoration: underline; +} + +.navbarMain { + position: sticky; + display: flex; + justify-content: space-between; /* content: (navbar) Left, Center, Right*/ + padding: 0 10px; + height: 5vh; + z-index: 100; + align-items: center; +} + +.smallText { + font-size: 18px !important; +} + +.navbarMain .navbarItem { + color: black !important; + font-size: 24px; + margin: 0px; /* best way to enforce centering? */ + text-align: center; + text-decoration: none; +} + +.navbarCenterContainer { + display: flex; + justify-content: center; + align-items: center; +} + +.navButtons { + box-sizing: content-box; + display: flex; + justify-content: center; + width: 20%; +} + +.rightButtons .navButtons { + width: 220px; +} + +.navButtons a { + border-radius: 11px; + border-width: 1px; + border-style: solid; + border-color: grey; + background-color: transparent; + color: black; + text-decoration: none; + padding: 0px 15px; + margin: 0px 5px; +} + +.navButtons a:hover { + text-decoration: underline; +} + +.navButtons .rightButtons a { + margin: 0px; +} + +.rightButtons .navLogin { + border-color: transparent; + font-weight: bold; +} + +.rightButtons .navSignup { + border-color: black; + background-color: black; + font-weight: bold; + color: white; +} + +/* Dropdown in Navbar */ +.dropdownMenu { + position: absolute; + display: none; + background-color: rgb(221, 221, 221); + padding: 0.5dvi; + border-radius: 3px; + top: 3vh; + right: 0; +} + +.dropdownIcon { + padding-top: 5px; /* For some reason this icon isn't centered vertically in the div like the other items, so this is a band-aid fix. */ + color: black; + height: 32px; + width: auto; +} + +.dropdownLink { + text-decoration: none; + padding: 0 0.5vw 0 0.5vw; + color: black !important; + font-size: calc(10px + 1vw); +} + +.dropdownLink:hover { + text-decoration: underline; +} + +.dropdown:hover .dropdownMenu { + display: flex; + flex-direction: column; + white-space: nowrap; +} + +/* Sidebar */ +.sidebarBody { + position: relative; + height: 100vh; + width: 15vw; + background-color: #2f4050; + border: 0px; + display: block; +} + +.sidebarList { + height: auto; + padding: 0; + width: 100%; + white-space: wrap; +} + +.sidebarList .sidebarItem { + width: 100%; + height: 8vh; + list-style-type: none; + margin: 0; + display: flex; + flex-direction: row; + color: white; + justify-content: center; + align-items: center; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +.sidebarList .sidebarItem:hover { + cursor: pointer; + background-color: #293846; +} + +.sidebarItem #sidebarIcon { + display: grid; + flex: 30%; + place-items: center; +} + +.sidebarItem #sidebarTitle { + flex: 70%; +} + +/* Roster CSS */ +.allstudents { + display: block; + width: 80vw; + margin: 10px; + padding: 1.5vh 3vw 1.5vh 1vw; +} + +.studentrow { + overflow: hidden; + font-size: calc(10px + 0.8vw); + border: solid 1px black; + border-radius: 5px; + padding: 1vh; + margin-bottom: 0.8vh; + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.studentemail { + font-size: calc(11px + 0.4vw); +} + +/* Questions CSS */ +.questionListItem { + display: flex; + width: 80vw; + border: solid 2px black; + border-radius: 10px; + padding: 0.5vh 1vw 0.5vh 1vw; + font-size: calc(10px + 0.8vw); + margin: 2px; +} + +.questionListItem .checkbox { + width: 2vw; + height: 2vh; +} + +.questionListItem .checkboxContainer { + display: flex; + align-items: center; + padding-right: 0.5vw; +} + +.questionListItemInformation { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + flex: 1; +} + +.questionListItemInformation .questionStem { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 50vw; +} + +.questionListItemInformation .questionType { + font-size: calc(11px + 0.4vw); +} + +.contentView { + display: flex; + align-items: center; + flex-direction: column; + padding: 15px; + width: 100%; +} + +.searchBarContainer { + display: flex; + flex-direction: column; + margin-bottom: 3vh; +} + +.searchForm { + display: flex; + flex-direction: column; +} + +.searchBar { + border-radius: 5px; + width: 40vw; + font-size: calc(10px + 0.5vw); + padding: 0.5vw; +} + +.dynamic-btn { + font-size: calc(10px + 0.5vw); + border-radius: 5px; + margin-top: 1px; + padding: 0.5vw 0px 0.5vw 0px; + flex: 1; + color: white; +} + +.dynamic-btn:hover { + color: white; +} + +.footer { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.header { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.basicLink { + text-decoration: none; + color: inherit; +} + +.basicLink:hover { + color: inherit; +} + +.split-space { + display: flex; + justify-content: center; +} + +.question { + display: flex; + flex-direction: column; +} + +.question-subcontainer { + display: flex; + flex-direction: column; + margin: 5px; + font-size: calc(12px + 0.4vw) !important; +} + +.question-option { + display: flex; + flex-direction: row; + margin: 3px; + align-items: center; +} + +.question-reorder { + display: flex; + flex-direction: row; + height: 4vh; + align-items: center; + padding: 2px; +} + +.question-arrow { + display: flex; + font-size: calc(12px + 0.4vw) !important; + width: 4vh; + height: 4vh; + margin: 1px; + align-items: center; + justify-content: center; + align-content: center; +} + +.question-text { + height: 4vh; + width: 40vw; + min-width: 100px; + max-width: 700px; +} + +.question-select { + width: 4vh; + height: 4vh; + margin: 2px; +} + +.negative-btn { + background-color: #ff4d7b; + margin: 3px; + color: white; +} + +.negative-btn:hover { + background-color: #e84470; + color: white; +} + +.btn-secondary:focus { + background-color: #6c757d; + text-decoration: none; + border: none; +} + +.popup-background { + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0, 0.2); + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.popup-container { + display: flex; + flex-direction: column; + width: 70%; + height: 80%; + background-color: white; +} + +/* Single Question CSS */ +.question-stem { + position: relative; + background-color: lightgray; + padding: 20px; + width: 100%; + font-size: x-large; + text-align: center; +} + +.student-question-wrapper { + position: relative; + border: 2px solid black; + border-radius: 5px; + margin-top: 50px; + left: 25%; + width: 50%; +} + +.student-question-option-label { + font-size: x-large; +} + +.student-question-response-form { + margin: 20px 0; +} + +.student-question-radio { + width: 25%; + margin: 10px; +} + +.student-question-response-submit-button { + position: relative; + margin-bottom: 20px; + left: 40%; + width: 20%; + font-size: larger; +} + +.right-answer { + position: relative; + color: green; +} + +.wrong-answer { + position: relative; + color: #FF9494; +} + +.unselected-right-answer { + position: relative; + color: yellowgreen; +} + +.student-question-score { + position: relative; + margin-bottom: 20px; + left: 40%; + width: 20%; + font-size: x-large; + text-align: center; +} + +.student-question-li { + font-size: x-large; + margin-left: 20px; +} + +.horizontal-flex-container { + display: flex; + width: 100%; + flex-direction: row; + flex-wrap: wrap; +} + +.vertical-container { + display: flex; + flex-direction: column; + margin: 15px; +} + +.right-aligned { + display: flex; + align-items: flex-end; + flex-direction: row; + justify-content: flex-end; +} + +.add-section-h1 { + margin-left: 20px; +} + +.add-section-div { + margin: 20px 20px 0 20px; +} diff --git a/client/src/styles/pages.css b/client/src/styles/pages.css deleted file mode 100644 index 8f6785aa..00000000 --- a/client/src/styles/pages.css +++ /dev/null @@ -1,788 +0,0 @@ -/* Signup Page CSS */ - -#signUp{ - display: flex; - height: 100%; - width: 100%; - line-height: 1; -} - -#studentText{ - cursor: pointer; - z-index: 99; - color:black; - - position: absolute; - top: 50%; - left: 12%; - transform: translate(0%, -50%); -} - -#teacherText{ - cursor: pointer; - z-index: 99; - color:black; - - position: absolute; - top: 50%; - right: 12%; - transform: translate(0%, -50%); -} - -.switch { - margin-top: 32px; - left: 50%; - transform: translateX(-50%); - position: relative; - display: inline-block; - width: 400px; - height: 56px; - border: 2px black solid; - border-radius: 15px; - -} - -.switch input { - opacity: 0; - width: 0; - height: 0; - -} - -.slider { - border-radius: 15px; - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: white; - -webkit-transition: .4s; - transition: .4s; -} - -.slider:before { - position: absolute; - content: ""; - height: 56px; - width: 208px; - bottom: -2px; - left: -4px; - background-color: #D2DFD3; - -webkit-transition: .4s; - transition: .8s; - - border-radius: 15px; -} - - -input:focus + .slider { - box-shadow: 0 0 1px #2196F3; -} - -input:checked + .slider:before { - -webkit-transform: translateX(196px); - -ms-transform: translateX(196px); - transform: translateX(196px); -} - - -.firstNameContainer{ - width: 45% !important; - float: left; -} - -.lastNameContainer{ - width: 45% !important; - margin-left: 10%; -} - -/* Login Page CSS */ - - -html{ - font-family: 'Open Sans', sans-serif; - height: 100%; - width: 100%; -} - -body{ - height: 100%; - width: 100%; - margin: 0; - padding: 0; -} - -#root{ - height: 100%; - width: 100%; - margin: 0; - padding: 0; -} - -.mainBody{ - height: 100%; - width: 100%; - margin: 0; - padding: 0; -} - -#login{ - display: flex; - height: 100%; - width: 100%; - line-height: 1; -} - -.classroomIcon -{ - height: 43px; - margin-right: 8px; -} - -.classroomLink -{ - font-size: 36px; - font-weight: bold; - color: black; -} - -/*leftContainer takes up 46% of the left screen*/ -.leftContainer{ - position: relative; - width: 46%; - min-width: 210px; - background-color: rgb(210, 223, 211); - border-top-right-radius: 60px; - border-bottom-right-radius: 60px; -} - -.rightContainer{ - position: relative; - flex: 1; -} - -.welcomeBox{ - position: absolute; - top: 10%; - width: 100%; - height: 40%; - padding-left: 10%; -} - -.textBox{ - margin-top: 3vh; - width: 72%; -} - -.mainText{ - font-size: 50px; - font-weight: bold; - color: black; - margin-bottom: 10px; /* without this, margin-bottom is 50, I have no idea why */ -} - -.subText{ - font-size: 30px; - color: gray; - text-decoration: underline; - margin-top: 1vh; /* margin-top has no effect, I dont know why*/ -} - -.linkBox{ - margin-top: 3vh; -} - -/* TODO: More visually appealing button*/ -.homeButton{ - font-size: 18px; - color: black; - text-decoration: none; - - border-radius: 15px; - border-width: 1px; - border-style: solid; - border-color: grey; - background-color: transparent; - - /* Icon attached to button using background image*/ - background: url(../../public/arrow-left-solid.svg); - background-position: 142px 7px; - background-repeat: no-repeat; - background-size: 12px; - - padding-top: 4px; - padding-bottom: 5px; - padding-left: 8px; - padding-right: 36px; -} - -.homeButton:hover{ - color: black; - background-color: #76B47B; -} - -.loginSection{ - position: relative; - top: 15%; - width: 100%; - height: 60%; - padding-left: 15%; - padding-right: 15%; -} - -.formLoginContainer{ - margin-top: 3vh; -} - -.inputContainer{ - margin-top: 40px; - background:transparent; - border: none; - border-bottom: 1px solid #000000; - padding-left: 6px; - width: 100%; -} - -.emailContainer{ - -} - -.passwordContainer{ - -} - -.submitButton{ - display: block; - position: relative; - margin-top: 10vh; - left: 50%; - transform: translateX(-50%); - - border: none; - border-radius: 5px; - - width: 256px; - height: 48px; - - color: white; - - /* Icon attached to button using background image*/ - padding-right: 32px; - background: #76B47B url(../../public/Arrow_left_long.png); - background-position: 150px 12px; - background-repeat: no-repeat; - background-size: 30px; -} - -/*free SSO icon source: https://thenounproject.com/browse/icons/term/sso/*/ -.ssoButton{ - display: block; - position: relative; - margin-top: 20px; - left: 50%; - transform: translateX(-50%); - - border: none; - border-radius: 5px; - - width: 256px; - height: 48px; - - color: white; - font-weight: bold; - - /* Icon attached to button using background image*/ - padding-left: 32px; - background: #76B47B url(../../public/ssoIcon.png); - background-position: 28px 8px; - background-repeat: no-repeat; - background-size: 32px; -} - - -.changePasswordLink{ - display: block; - margin-top: 20px; - color: gray; - text-decoration: none; -} - -.changePasswordLink:hover{ - text-decoration: underline; -} - -/*TODO: Horizonal line on either side of or text*/ -.orSSOText{ - margin-top: 20px; - position: relative; - display: flex; - justify-content: center; - align-items: center; - - color: gray; - font-weight: bold; -} - -/* Student Landing Page */ -.card { - display:flex; - margin-left: 20px; - margin-right: 20px; - margin-bottom: 20px; - border: 1px solid black; - box-shadow: 5px 5px 5px lightgrey; -} - -.navbar .nav-link { - font-size: 15px; - margin-left: 40px; -} - -.buttons { - position: relative; - top: 70px; - left: 100px; - -} - -.hideBtn { - margin-left: 10px; -} - -.bkgrnd { - margin: 0px; - padding: 0px; - background-color: white; -} - -.btn-add { - background-color: green; - border-color: green; -} - -.btn-add:hover { - background-color: rgb(1, 109, 1); - border-color: rgb(1, 109, 1); -} - - - - - -/*Profile Pages*/ - -.profileInfo{ - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - width: 100vw; -} - -.tester{ - margin-top: -10vh; - display: flex; - height: 40vh; - width: 40vw; - -} - -.profileRow{ - display: flex; - padding: 1em; - overflow: auto; -} - -.profileButton{ - margin-top: 1em; - display: flex; -} - - -/* StudentGreadeforSingleLecture page*/ -.SLG-gradePoints-parent{ - margin-left: 2em; - margin-top: 3em; - color: black; - display: flex; -} -.single-lecture-grade-info{ - -} -.single-lecture-grade-points-info{ - margin-top: 1em; - margin-left: 15em; - float: right; - padding-right: 3em; - border: 2px solid rgb(29, 34, 112); -} -.single-lecture-grade-table { - width: 100%; - height: 100vh; - margin-top: 3em; - margin-left: 2em; - justify-content: center; - -} - -table { - - border: 2px solid rgb(29, 34, 112); - width: 800px; - height: 200px; -} - -th { - background-color: rgb(36, 40, 90); - color: white; - text-align: center; - border-bottom: 1px solid black; - border-right: 1px solid black -} - -td { - text-align: center; - border-bottom: 1px solid black; - border-right: 1px solid black; -} - -/* StudentGradebook page*/ -.student-gradebook-grade-table{ - width: 100%; - height: 100vh; - margin-top: 3em; - margin-left: 2em; - justify-content: center; -} - -#student-gradebook-grade-table-headline{ - font-weight: bold; - color:black; - font-size: large; -} - -.student-gradebook-grade-table table{ - margin-bottom: 3em; - margin-left:auto; - margin-right:auto; -} - -#student-gradebook-info { - margin-top: 3em; - text-align: center; - - -} - -.delete { - background-color: red; - border-color: red -} - -.addQuestion { - padding: 40px; -} - -input { - width:400px; -} - -.qButton { - margin-top: 20px; - margin-right: 10px; -} - -.qstion { - margin-bottom: 20px; -} - -.loginContainer { - color: white; - text-decoration: none; - font-size: 20px; - text-align: center; - align-items: center; - align-self: center; - margin-top: 20px; -} - -.loginBtn { - color: white; - text-decoration: none; - font-size: 20px; - text-align: center; - align-items: center; - align-self: center; - margin-top: 20px; - padding: 10px; - border-radius: 3px; - background-color: green; -} - -.badRequest { - text-align: center; - color: red; - margin-top: 20px; -} - -.successRequest { - text-align: center; - margin-top: 20px; -} - - -/* Single Course Page CSS */ -.singleCourseContainer { - padding: 20px; - display: block; - width: fit-content; - height: fit-content; - text-align: center; - -} - -.singleCourseDetails { - border: 4px solid rgb(221, 221, 221); - background-color: rgb(221, 221, 221); - border-radius: 10px; - color: black; -} - -.singleCourseBtnDiv { - padding-top: 20px; - -} - -/* ResetPassword Page Styling */ - -.confirmationCodeDivContainer { - width: fit-content; - justify-content: center; - align-items: center; - text-align: center; - margin-top: 30vh; - display: block; - border: 2px solid rgb(92, 92, 92); - border-radius: 10px; -} - -/* Landing Page */ -.landing-page { - width: 100%; -} - -#join-course { - width: 30%; - padding-top: 20px; - padding-left: 100px; -} - -#landing-subtitle{ - padding-top: 20px; - padding-left: 100px; - font-size: 27px; -} - -#create-course-btn { - margin-left: 100px; - margin-bottom: 20px; - -} - -hr { - border-top: 2px solid black; - margin-left: 100px; - margin-right: 100px; -} - -.courses { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: 100px; - margin-right: 100px; - margin-bottom: 100px; -} - -.course-card { - min-width: 300px; - width: 30%; -} - -/* Lectures */ - -.lectures { - width: 100%; -} - -.lectures-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: 100px; - margin-right: 100px; - margin-bottom: 100px; - margin-top: 20px; -} - -#lectures-subtitle { - font-size: 27px; - margin-top: auto; - margin-left: 20px; - margin-bottom: 0px; -} - -.lecture-card { - min-width: 300px; - width: 29%; -} - -.create-lecture-btn { - margin-left: auto; - margin-top: auto; -} - -/* Back button */ - -.back-btn { - width: 40px; - background-image: url(../../public/free-back-arrow-1767531-1502435.webp); - background-size: cover; - border: none; - background-color: transparent; -} - -.back-btn:hover { - border: none; - background-color: transparent; -} - -.back-btn-lectures { - display: flex; - width: 40px; - height: 40px; - margin-top: auto; - margin-bottom: auto; -} - -.lectures-top-bar { - margin-top: 20px; - margin-left: 100px; - margin-right: 100px; - display: flex; -} - -/* Create */ - -.create-container { - display: flex; - flex-direction: column; - width: 40%; - margin: auto; - margin-top: 100px; -} - -.create-bar { - display: flex; - flex-direction: row; -} - -.back-btn-create { - display: flex; - margin-top: auto; - margin-bottom: auto; - width: 40px; - height: 40px; -} - -.create-subtitle { - font-size: 35px; - margin-top: auto; - margin-bottom: auto; - margin-left: 20px; -} - -.create-hr-bar { - margin-left: 0px; - margin-right: 0px; -} - -.inputPublishedContainer { - margin-top: 15px; - margin-bottom: 15px; -} - -.create-btns { - display: flex; - flex-direction: row; - justify-content: flex-end; -} - -#create-submit { - margin-left: 10px; -} - -.inputOrderContainer { - margin-top: 15px; - margin-bottom: 20px; - display: flex; - flex-direction: row; - justify-content: start; -} - -#lecture-order-subtitle { - margin-right: 20px; - margin-top: auto; - margin-bottom: auto; -} - -#lecture-order-textentry { - width: 30%; - margin-top: auto; - margin-bottom: auto; -} - -/* Lecture */ -.lecture-container { - width: 100%; - display: flex; - flex-direction: column; -} - -.lecture-page-container { - margin-left: 100px; - margin-right: 100px; - display: flex; - flex-direction: column; -} - -.lecture-subtitle { - font-size: 40px; - margin-top: auto; - margin-bottom: auto; - margin-left: 20px; -} - -.lecture-hr { - margin-left: 0px; - margin-right: 0px; -} - -.lecture-header-btns { - margin-bottom: 20px; - display: flex; - flex-direction: row; -} - -.lecture-publish-switch{ - margin-left: auto; -} - -.lecture-header { - display: flex; - flex-direction: row; - margin-bottom: 0px; - margin-top: 20px; -} \ No newline at end of file