diff --git a/pages/404.tsx b/pages/404.tsx new file mode 100644 index 0000000..cad8ac9 --- /dev/null +++ b/pages/404.tsx @@ -0,0 +1,36 @@ +import { NextPage } from "next" +import React, { ReactElement } from "react" +import ScottyLabsHeader from "src/components/design/ScottyLabsHeader" +import WaveBackground from "src/components/design/WaveBackground" +import ApplicationForm from "src/components/form/ApplicationForm" +import Menu from "src/components/menu/Menu" +import styles from "../styles/404.module.scss" + +const ApplicationPage: NextPage = (): ReactElement => { + return ( + <> + + +
+ +
+ +
+
+ + ) +} + +export default function Custom404() { + return ( + <> + +
+ +
+

404 - Page Not Found

+
+
+ + ) +} diff --git a/pages/500.tsx b/pages/500.tsx new file mode 100644 index 0000000..ef3f412 --- /dev/null +++ b/pages/500.tsx @@ -0,0 +1,36 @@ +import { NextPage } from "next" +import React, { ReactElement } from "react" +import ScottyLabsHeader from "src/components/design/ScottyLabsHeader" +import WaveBackground from "src/components/design/WaveBackground" +import ApplicationForm from "src/components/form/ApplicationForm" +import Menu from "src/components/menu/Menu" +import styles from "../styles/500.module.scss" + +const ApplicationPage: NextPage = (): ReactElement => { + return ( + <> + + +
+ +
+ +
+
+ + ) +} + +export default function Custom404() { + return ( + <> + +
+ +
+

500 - Server Error

+
+
+ + ) +} diff --git a/pages/_app.tsx b/pages/_app.tsx index ebdf979..fc9bd36 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,51 +1,51 @@ -import { StyledEngineProvider, ThemeProvider } from "@mui/material" -import type { AppProps } from "next/app" -import Head from "next/head" -import { ReactElement } from "react" -import { Provider } from "react-redux" -import Script from "next/script" -import store from "src/store" -import { theme } from "src/themes/theme" -import "styles/globals.scss" - -const App = ({ Component, pageProps }: AppProps): ReactElement => { - return ( - <> - - TartanHacks - {/* Disable cache control */} - - - - - - - - - - - - - - - - - ) -} - -export default App +import { StyledEngineProvider, ThemeProvider } from "@mui/material" +import type { AppProps } from "next/app" +import Head from "next/head" +import { ReactElement } from "react" +import { Provider } from "react-redux" +import Script from "next/script" +import store from "src/store" +import { theme } from "src/themes/theme" +import "styles/globals.scss" + +const App = ({ Component, pageProps }: AppProps): ReactElement => { + return ( + <> + + TartanHacks + {/* Disable cache control */} + + + + + + + + + + + + + + + + + ) +} + +export default App diff --git a/pages/login.tsx b/pages/login.tsx index 97ae024..1251b2f 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -1,28 +1,28 @@ -import { Collapse, LinearProgress } from "@mui/material" -import { deleteCookie } from "cookies-next" -import { NextPage } from "next" -import { ReactElement, useEffect } from "react" -import AuthenticationDialog from "src/components/auth/AuthenticationDialog" -import ScottyLabsIcon from "src/components/design/ScottyLabsIcon" -import WaveHeader from "src/components/design/WaveHeader" -import styles from "../styles/Auth.module.scss" - -const LoginPage: NextPage = (): ReactElement => { - useEffect(() => { - window.localStorage.removeItem("accessToken") - deleteCookie("accessToken") - }, []) - return ( -
- -
- -
-
- -
-
- ) -} - -export default LoginPage +import { Collapse, LinearProgress } from "@mui/material" +import { deleteCookie } from "cookies-next" +import { NextPage } from "next" +import { ReactElement, useEffect } from "react" +import AuthenticationDialog from "src/components/auth/AuthenticationDialog" +import ScottyLabsIcon from "src/components/design/ScottyLabsIcon" +import WaveHeader from "src/components/design/WaveHeader" +import styles from "../styles/Auth.module.scss" + +const LoginPage: NextPage = (): ReactElement => { + useEffect(() => { + window.localStorage.removeItem("accessToken") + deleteCookie("accessToken") + }, []) + return ( +
+ +
+ +
+
+ +
+
+ ) +} + +export default LoginPage diff --git a/src/components/auth/RequestResetDialog/index.module.scss b/src/components/auth/RequestResetDialog/index.module.scss index 8239c3f..bb02cb6 100644 --- a/src/components/auth/RequestResetDialog/index.module.scss +++ b/src/components/auth/RequestResetDialog/index.module.scss @@ -53,4 +53,4 @@ .link:hover { text-decoration: underline; filter: brightness(85%); -} \ No newline at end of file +} diff --git a/src/components/menu/Menu/index.module.scss b/src/components/menu/Menu/index.module.scss index 26157f8..bb6921f 100644 --- a/src/components/menu/Menu/index.module.scss +++ b/src/components/menu/Menu/index.module.scss @@ -1,104 +1,104 @@ -@import "~/styles/variables.scss"; -@import "~/styles/mixins.scss"; - -.burgerLine { - width: 3rem; - height: 0.25rem; - background-color: $color-primary; - border-radius: 10px; - position: relative; - margin-bottom: 2px; -} - -.burgerWrapper { - top: 0; - right: 0; - - position: absolute; - margin: 3% 3% 0 0; - cursor: pointer; - padding: 0; - z-index: 100; - - @include down($breakpoint-md) { - margin: 5% 5% 0 0; - } - - @include down($breakpoint-sm) { - margin: 8% 5% 0 0; - } -} - -.burger { - height: 3rem; - width: 3rem; - - @include down($breakpoint-sm) { - height: 2rem; - width: 2rem; - } -} - -.menuWrapper { - top: 0; - width: 100%; - position: absolute; -} - -.menuBox { - top: 8rem; - right: 5rem; - position: absolute; - width: 20rem; - - @include down($breakpoint-md) { - right: 3rem; - } - - @include down($breakpoint-xs) { - right: 1rem; - width: 19rem; - } - - text-align: center; - padding: 1em; - background: $color-primary-darker; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - box-shadow: $box-shadow; - border-radius: 10px; -} - -.menuBurgerContainer { - position: absolute; - top: 0; - left: 0; -} - -.link { - color: $text-color-contrast; - width: 100%; - text-decoration: none; -} - -.link:hover { - text-decoration: underline; - filter: brightness(85%); - cursor: pointer; -} - -.menuLine { - position: relative; - width: 100%; - height: 7px; -} - -.menuItem { - padding: 2em; - text-align: center; - color: $text-color-contrast; -} +@import "~/styles/variables.scss"; +@import "~/styles/mixins.scss"; + +.burgerLine { + width: 3rem; + height: 0.25rem; + background-color: $color-primary; + border-radius: 10px; + position: relative; + margin-bottom: 2px; +} + +.burgerWrapper { + top: 0; + right: 0; + + position: absolute; + margin: 3% 3% 0 0; + cursor: pointer; + padding: 0; + z-index: 100; + + @include down($breakpoint-md) { + margin: 5% 5% 0 0; + } + + @include down($breakpoint-sm) { + margin: 8% 5% 0 0; + } +} + +.burger { + height: 3rem; + width: 3rem; + + @include down($breakpoint-sm) { + height: 2rem; + width: 2rem; + } +} + +.menuWrapper { + top: 0; + width: 100%; + position: absolute; +} + +.menuBox { + top: 8rem; + right: 5rem; + position: absolute; + width: 20rem; + + @include down($breakpoint-md) { + right: 3rem; + } + + @include down($breakpoint-xs) { + right: 1rem; + width: 19rem; + } + + text-align: center; + padding: 1em; + background: $color-primary-darker; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + box-shadow: $box-shadow; + border-radius: 10px; +} + +.menuBurgerContainer { + position: absolute; + top: 0; + left: 0; +} + +.link { + color: $text-color-contrast; + width: 100%; + text-decoration: none; +} + +.link:hover { + text-decoration: underline; + filter: brightness(85%); + cursor: pointer; +} + +.menuLine { + position: relative; + width: 100%; + height: 7px; +} + +.menuItem { + padding: 2em; + text-align: center; + color: $text-color-contrast; +} diff --git a/styles/404.module.scss b/styles/404.module.scss new file mode 100644 index 0000000..b521da9 --- /dev/null +++ b/styles/404.module.scss @@ -0,0 +1,14 @@ +@import "./variables.scss"; +@import "./mixins.scss"; + +.background { + width: 100%; + display: flex; + justify-content: center; + padding-top: 150px; + box-sizing: border-box; + + @include down($breakpoint-md) { + padding-top: 3em; + } +} diff --git a/styles/500.module.scss b/styles/500.module.scss new file mode 100644 index 0000000..b521da9 --- /dev/null +++ b/styles/500.module.scss @@ -0,0 +1,14 @@ +@import "./variables.scss"; +@import "./mixins.scss"; + +.background { + width: 100%; + display: flex; + justify-content: center; + padding-top: 150px; + box-sizing: border-box; + + @include down($breakpoint-md) { + padding-top: 3em; + } +} diff --git a/styles/Auth.module.scss b/styles/Auth.module.scss index f719a6d..138cb3b 100644 --- a/styles/Auth.module.scss +++ b/styles/Auth.module.scss @@ -1,43 +1,43 @@ -@import "./variables.scss"; -@import "./mixins.scss"; - -.dialog { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - padding-top: 10em; - - @include down($breakpoint-md) { - padding-top: 3em; - } -} - -.scottyContainer { - bottom: 0; - z-index: -1; - opacity: 0.1; - position: absolute; - - width: 100%; - height: 100%; - - display: flex; - justify-content: center; - align-items: flex-end; -} - -.scottyIcon { - position: relative; - width: 40%; - bottom: 0; - - @include down($breakpoint-md) { - width: 60%; - } - - @include down($breakpoint-sm) { - width: 100%; - } -} +@import "./variables.scss"; +@import "./mixins.scss"; + +.dialog { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-top: 10em; + + @include down($breakpoint-md) { + padding-top: 3em; + } +} + +.scottyContainer { + bottom: 0; + z-index: -1; + opacity: 0.1; + position: absolute; + + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: flex-end; +} + +.scottyIcon { + position: relative; + width: 40%; + bottom: 0; + + @include down($breakpoint-md) { + width: 60%; + } + + @include down($breakpoint-sm) { + width: 100%; + } +} diff --git a/styles/mixins.scss b/styles/mixins.scss index a5ee132..d26e7c8 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -1,66 +1,66 @@ -@use "sass:map"; - -/* Breakpoint mixins */ -$breakpoint-xs: 320px; -$breakpoint-sm: 481px; -$breakpoint-md: 769px; -$breakpoint-lg: 1200px; -$breakpoints: ( - xs: $breakpoint-xs, - sm: $breakpoint-sm, - md: $breakpoint-md, - lg: $breakpoint-lg -); - -@mixin up($screen) { - @media (min-width: $screen) { - @content; - } -} - -@mixin down($screen) { - @media (max-width: $screen) { - @content; - } -} - -@mixin between($min-width, $max-width) { - @media (min-width: $min-width) and (max-width: $max-width) { - @content; - } -} - -@mixin height-down($screen) { - @media (max-height: $screen) { - @content; - } -} - -/* Font size mapping mixin */ -@mixin font-size($font-sizes) { - @each $breakpoint, $font-size in $font-sizes { - @if $breakpoint == "default" { - font-size: $font-size; - } @else { - @include down(map.get($breakpoints, $breakpoint)) { - font-size: $font-size; - } - } - } -} - -/* Link animation mixin */ -@mixin link($background-color) { - display: inline-block; - padding-bottom: 2px; - background-image: linear-gradient($background-color 0 0); - background-position: 0 100%; /*OR bottom left*/ - background-size: 0% 2px; - background-repeat: no-repeat; - transition: background-size 0.3s, background-position 0s 0.3s; /*change after the size immediately*/ - - &:hover { - background-position: 100% 100%; /*OR bottom right*/ - background-size: 100% 2px; - } -} +@use "sass:map"; + +/* Breakpoint mixins */ +$breakpoint-xs: 320px; +$breakpoint-sm: 481px; +$breakpoint-md: 769px; +$breakpoint-lg: 1200px; +$breakpoints: ( + xs: $breakpoint-xs, + sm: $breakpoint-sm, + md: $breakpoint-md, + lg: $breakpoint-lg +); + +@mixin up($screen) { + @media (min-width: $screen) { + @content; + } +} + +@mixin down($screen) { + @media (max-width: $screen) { + @content; + } +} + +@mixin between($min-width, $max-width) { + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } +} + +@mixin height-down($screen) { + @media (max-height: $screen) { + @content; + } +} + +/* Font size mapping mixin */ +@mixin font-size($font-sizes) { + @each $breakpoint, $font-size in $font-sizes { + @if $breakpoint == "default" { + font-size: $font-size; + } @else { + @include down(map.get($breakpoints, $breakpoint)) { + font-size: $font-size; + } + } + } +} + +/* Link animation mixin */ +@mixin link($background-color) { + display: inline-block; + padding-bottom: 2px; + background-image: linear-gradient($background-color 0 0); + background-position: 0 100%; /*OR bottom left*/ + background-size: 0% 2px; + background-repeat: no-repeat; + transition: background-size 0.3s, background-position 0s 0.3s; /*change after the size immediately*/ + + &:hover { + background-position: 100% 100%; /*OR bottom right*/ + background-size: 100% 2px; + } +}