diff --git a/frontend/my-react-app/package-lock.json b/frontend/my-react-app/package-lock.json index 6525cc83..c6f9148f 100644 --- a/frontend/my-react-app/package-lock.json +++ b/frontend/my-react-app/package-lock.json @@ -30,6 +30,7 @@ "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "^5.0.0", "@vitest/ui": "^4.0.9", + "baseline-browser-mapping": "^2.8.29", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", @@ -2791,9 +2792,9 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.4", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.4.tgz", - "integrity": "sha512-L+YvJwGAgwJBV1p6ffpSTa2KRc69EeeYGYjRVWKs0GKrK+LON0GC0gV+rKSNtALEDvMDqkvCFq9r1r94/Gjwxw==", + "version": "2.8.29", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.29.tgz", + "integrity": "sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/frontend/my-react-app/package.json b/frontend/my-react-app/package.json index 3da44a00..084c6c0f 100644 --- a/frontend/my-react-app/package.json +++ b/frontend/my-react-app/package.json @@ -35,6 +35,7 @@ "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "^5.0.0", "@vitest/ui": "^4.0.9", + "baseline-browser-mapping": "^2.8.29", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", diff --git a/frontend/my-react-app/src/App.css b/frontend/my-react-app/src/App.css index 88f67968..aeeb7ba7 100644 --- a/frontend/my-react-app/src/App.css +++ b/frontend/my-react-app/src/App.css @@ -6,6 +6,32 @@ min-height: 100vh; } + + +@keyframes titleAnimation { + 50% {transform: scale(1.4); +} +} + +h2.title +{ + font-family: 'Montserrat'; + font-weight: 800; + animation-name: titleAnimation; + animation-duration: 3s; + animation-direction: reverse; + animation-iteration-count: infinite; + display: inline-block; /* makes it ONLY dynamically move! */ + transform-origin: center; +} + +h3.smallertitle +{ + font-family: 'Montserrat'; + font-weight: 600; + font-style: italic; +} + body { margin: 0; padding: 0; diff --git a/frontend/my-react-app/src/App.tsx b/frontend/my-react-app/src/App.tsx index 8dd26d29..1e991982 100644 --- a/frontend/my-react-app/src/App.tsx +++ b/frontend/my-react-app/src/App.tsx @@ -2,7 +2,7 @@ import {Routes, Route, useNavigate, Outlet, Navigate} from 'react-router-dom'; import { useAuth } from './contexts/AuthContext'; import { Toolbar, Box, Typography } from "@mui/material"; -//import '@fontsource-variable/cabin'; + import './App.css'; import SignUp from './SignUp'; import Login from './Login'; @@ -51,34 +51,58 @@ function Home() { return ( <> - + +

+

+ Linkt +



- Linkt - Welcome to our comprehensive campus Events & Ticketing service, designed to streamline event management and boost student engagement for students! + Welcome to our comprehensive campus Events & Ticketing service, designed to streamline event management and boost student engagement for students! We allow students to easily discover and search for events using comprehensive filters, save them to their personal calendar, and claim digital, QR-coded tickets (free or mock paid) for check-in! If you are an organizer, then you are welcome too! Organizers benefit from the ability to create, manage, and track attendance for their events. They can also gain valuable insights for their events via our analytics dashboards. We are also welcoming campus administrators, who can oversee organizations and moderate all content. Linkt is our brand-new system that connects students with campus life while providing essential tools for hosting and administrating events! - {user?.userType == 'organizer' && (

)} - {user?.userType == 'organizer' && (

)} - - {user?.userType == 'organizer' && ( - - Hey! We noticed that you're an organizer! Feel free to add your event to our page! - )} - - {user?.userType == 'organizer' && ( - )} - +

+ +

+ Ready To Interact?

+ {user?.userType == 'organizer' && ( + + Hey! We noticed that you're an organizer! Feel free to add your event to our page! + )} + + {user?.userType == 'organizer' && ( + )} + {user?.userType == 'organizer' && (

)} + {user?.userType == 'organizer' && (

)} + +



+ +



+ +



+ +

+

+ - + +

{/* Former Logo @@ -88,7 +112,7 @@ function Home() { React logo */} - Top Events + Top Events Backend for this hasn't been implemented yet! neat college photo! Frosh Night @@ -103,35 +127,9 @@ function Home() { Join us for a tour of the campus museum where you can browse artifacts of some of the school's greatest alumni! {/* With this, the "Top Events" container is forced to extend its height to contain the floated images*/} +

- - - Ready To Interact? - {/* - -

- Edit src/App.tsx and save to test HMR -

- */} - - - - - - ); } diff --git a/frontend/my-react-app/src/CreateData.css b/frontend/my-react-app/src/CreateData.css new file mode 100644 index 00000000..fae95a8b --- /dev/null +++ b/frontend/my-react-app/src/CreateData.css @@ -0,0 +1,18 @@ +@keyframes dissolveIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +/* source that helped me realize how to do this animation: https://blog.hubspot.com/website/css-fade-in */ + +h2.createtitle { + font-family: 'Montserrat'; + font-weight: 400; + font-style: italic; + font-size: 55px; + animation: dissolveIn 2s; +} + +label { + font-family: 'Montserrat'; + font-weight: 600; +} \ No newline at end of file diff --git a/frontend/my-react-app/src/CreateData.tsx b/frontend/my-react-app/src/CreateData.tsx index 13bf2b33..d7b7cd0d 100644 --- a/frontend/my-react-app/src/CreateData.tsx +++ b/frontend/my-react-app/src/CreateData.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { addEvent } from './api/events.api.ts'; import { useAuth } from './contexts/AuthContext'; import { useSnackbar } from 'notistack'; +import './CreateData.css'; export default function AddEvent() { const [title, setTitle] = useState(''); @@ -54,8 +55,8 @@ export default function AddEvent() { }; return ( -
-

CREATE EVENT

+
+

CREATE EVENT


@@ -163,10 +164,11 @@ export default function AddEvent() { disabled={loading} style={{ padding: '10px 20px', - border: '1px solid #ccc', - background: 'white', + background: 'black', + color: 'white', cursor: loading ? 'not-allowed' : 'pointer', - borderRadius: 4 + borderRadius: 4, + fontWeight: 'bold' }} > Cancel diff --git a/frontend/my-react-app/src/Login.tsx b/frontend/my-react-app/src/Login.tsx index 21022df2..c68ce17d 100644 --- a/frontend/my-react-app/src/Login.tsx +++ b/frontend/my-react-app/src/Login.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { useAuth } from './contexts/AuthContext'; import authService from './services/authService'; + export default function Login() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -68,8 +69,9 @@ export default function Login() { }; return ( -
-

Log In

+
+
+

LOGIN

{error && (
)} -
- -
+
+
setEmail(e.target.value)} disabled={loading} @@ -103,11 +105,12 @@ export default function Login() { }} />
-
+

setPassword(e.target.value)} disabled={loading} @@ -132,7 +135,7 @@ export default function Login() { border: 'none', borderRadius: 4, cursor: loading ? 'not-allowed' : 'pointer', - fontSize: 16 + fontSize: 20 }} > {loading ? 'Logging in...' : 'Log In'} @@ -140,11 +143,12 @@ export default function Login() {
+
); } diff --git a/frontend/my-react-app/src/SignUp.css b/frontend/my-react-app/src/SignUp.css new file mode 100644 index 00000000..2e5aa8c7 --- /dev/null +++ b/frontend/my-react-app/src/SignUp.css @@ -0,0 +1,139 @@ +@keyframes dissolveIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +/* source that helped me realize how to do this animation: https://blog.hubspot.com/website/css-fade-in */ + +.signuptitle { + font-family: 'Montserrat'; + font-weight: 700; + font-style: italic; + font-size: 55px; + animation: dissolveIn 2s; +} + +.signup-container { + color: white; + background-color: #373f51; + font-weight: 600; + max-width: 550px; + margin: auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + + +.signup-container h2 { + text-align: center; + margin-bottom: 20px; +} + +.signup-form div { + margin-bottom: 15px; +} + +.signup-form label { + display: block; + margin-bottom: 5px; +} + +.signup-form input { + width: 100%; + padding: 8px; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 5px; +} + +.password-note { + font-size: 0.8em; + color: #666; +} + +.user-type-toggle { + position: relative; + width: 100%; + max-width: 300px; + margin: 0 auto 20px; + height: 40px; + border-radius: 20px; + background-color: #0072c6; + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px; +} + +.user-type-slider { + position: absolute; + top: 4px; + width: calc(50% - 8px); + height: calc(100% - 8px); + background-color: #61dafbaa; + border-radius: 14px; + transition: left 0.2s ease; +} + +.user-type-slider.student { + left: 4px; +} + +.user-type-slider.org { + left: calc(50% + 4px); +} + +.user-type-button { + flex: 1; + z-index: 1; + background: none; + border: none; + font-weight: bold; + cursor: pointer; + outline: none; +} + +.user-type-button.active { + color: #fff; +} + +.user-type-button:not(.active) { + color: #000; +} + + +.submit-button { + width: 100%; + padding: 10px; + background-color: #288af3; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +.submit-button:hover { + background-color: #0072c6; +} + +.back-button { + width: 100%; + padding: 10px; + background-color: #6c757d; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + margin-top: 10px; +} + +.back-button:hover { + background-color: #5a6268; +} + +body.signup-page-background { + background-color: var(--background); +} \ No newline at end of file diff --git a/frontend/my-react-app/src/SignUp.tsx b/frontend/my-react-app/src/SignUp.tsx index 83304045..ef2a3617 100644 --- a/frontend/my-react-app/src/SignUp.tsx +++ b/frontend/my-react-app/src/SignUp.tsx @@ -1,7 +1,9 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { signUp } from './api/users.api'; import { useAuth } from './contexts/AuthContext'; +import { Toolbar, Box, Container, Typography } from "@mui/material"; +import './SignUp.css'; export default function SignUp() { const [name, setName] = useState(''); @@ -74,8 +76,9 @@ export default function SignUp() { }; return ( -
-

Sign Up

+
+
+

SIGN UP

{error && (
)} -
+

@@ -162,7 +165,7 @@ export default function SignUp() {

+
); } diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf new file mode 100644 index 00000000..76e3f9d2 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf new file mode 100644 index 00000000..451e6928 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/OFL.txt b/frontend/my-react-app/src/assets/fonts/Montserrat/OFL.txt new file mode 100644 index 00000000..45157748 --- /dev/null +++ b/frontend/my-react-app/src/assets/fonts/Montserrat/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/README.txt b/frontend/my-react-app/src/assets/fonts/Montserrat/README.txt new file mode 100644 index 00000000..526747dc --- /dev/null +++ b/frontend/my-react-app/src/assets/fonts/Montserrat/README.txt @@ -0,0 +1,81 @@ +Montserrat Variable Font +======================== + +This download contains Montserrat as both variable fonts and static fonts. + +Montserrat is a variable font with this axis: + wght + +This means all the styles are contained in these files: + Montserrat-VariableFont_wght.ttf + Montserrat-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Montserrat: + static/Montserrat-Thin.ttf + static/Montserrat-ExtraLight.ttf + static/Montserrat-Light.ttf + static/Montserrat-Regular.ttf + static/Montserrat-Medium.ttf + static/Montserrat-SemiBold.ttf + static/Montserrat-Bold.ttf + static/Montserrat-ExtraBold.ttf + static/Montserrat-Black.ttf + static/Montserrat-ThinItalic.ttf + static/Montserrat-ExtraLightItalic.ttf + static/Montserrat-LightItalic.ttf + static/Montserrat-Italic.ttf + static/Montserrat-MediumItalic.ttf + static/Montserrat-SemiBoldItalic.ttf + static/Montserrat-BoldItalic.ttf + static/Montserrat-ExtraBoldItalic.ttf + static/Montserrat-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Black.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Black.ttf new file mode 100644 index 00000000..2fab7ab0 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Black.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BlackItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BlackItalic.ttf new file mode 100644 index 00000000..04d3b47f Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BlackItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Bold.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Bold.ttf new file mode 100644 index 00000000..40335875 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Bold.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BoldItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BoldItalic.ttf new file mode 100644 index 00000000..0cc5c2cb Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-BoldItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBold.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBold.ttf new file mode 100644 index 00000000..476ec30b Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBold.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf new file mode 100644 index 00000000..a1ac9a95 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLight.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLight.ttf new file mode 100644 index 00000000..efaeab06 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLight.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf new file mode 100644 index 00000000..a8d18dec Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Italic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Italic.ttf new file mode 100644 index 00000000..5f08df02 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Italic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Light.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Light.ttf new file mode 100644 index 00000000..881f12d0 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Light.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-LightItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-LightItalic.ttf new file mode 100644 index 00000000..b2991d02 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-LightItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Medium.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Medium.ttf new file mode 100644 index 00000000..c9a39ea1 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Medium.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-MediumItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-MediumItalic.ttf new file mode 100644 index 00000000..086dd6e4 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-MediumItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Regular.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Regular.ttf new file mode 100644 index 00000000..895e220a Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Regular.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf new file mode 100644 index 00000000..161477a8 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf new file mode 100644 index 00000000..73dc6c61 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Thin.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Thin.ttf new file mode 100644 index 00000000..c9cf1956 Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-Thin.ttf differ diff --git a/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ThinItalic.ttf b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ThinItalic.ttf new file mode 100644 index 00000000..e6dfc05d Binary files /dev/null and b/frontend/my-react-app/src/assets/fonts/Montserrat/static/Montserrat-ThinItalic.ttf differ diff --git a/frontend/my-react-app/src/components/Header.tsx b/frontend/my-react-app/src/components/Header.tsx index 85ee4619..8d13af82 100644 --- a/frontend/my-react-app/src/components/Header.tsx +++ b/frontend/my-react-app/src/components/Header.tsx @@ -311,7 +311,7 @@ const Header: React.FC = () => { }, }} > - Log In + Login , { }; return ( - - + + + Settings @@ -380,6 +381,7 @@ const Settings = () => { + ); }; diff --git a/frontend/my-react-app/src/index.css b/frontend/my-react-app/src/index.css index a4ef4740..18419945 100644 --- a/frontend/my-react-app/src/index.css +++ b/frontend/my-react-app/src/index.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,800;1,800&display=swap'); @import './colors.css'; html, body, #root { @@ -6,7 +8,7 @@ html, body, #root { } :root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: 'Montserrat', 'Roboto', sans-serif; line-height: 1.5; font-weight: 400; @@ -20,6 +22,7 @@ html, body, #root { -moz-osx-font-smoothing: grayscale; } + a { font-weight: 500; color: var(--primary); diff --git a/frontend/my-react-app/src/mytickets.tsx b/frontend/my-react-app/src/mytickets.tsx index 09acc920..0fa0160e 100644 --- a/frontend/my-react-app/src/mytickets.tsx +++ b/frontend/my-react-app/src/mytickets.tsx @@ -98,14 +98,14 @@ END:VCALENDAR`; return (
{/* Back button */} - -

My Tickets

+

My Tickets

{tickets.length === 0 ? ( -

No tickets found. Browse events to purchase tickets!

+

No tickets found. Browse events to purchase tickets!

) : (
{tickets.map((ticket) => ( diff --git a/frontend/my-react-app/src/pages/AdminDashboard.tsx b/frontend/my-react-app/src/pages/AdminDashboard.tsx index 06061c12..3b2641a9 100644 --- a/frontend/my-react-app/src/pages/AdminDashboard.tsx +++ b/frontend/my-react-app/src/pages/AdminDashboard.tsx @@ -110,8 +110,9 @@ const AdminDashboard: React.FC = () => { const displayedEvents = events; return ( + - + Admin Dashboard diff --git a/frontend/my-react-app/src/pages/ApproveEventsPage.tsx b/frontend/my-react-app/src/pages/ApproveEventsPage.tsx index 288162a4..697a40b5 100644 --- a/frontend/my-react-app/src/pages/ApproveEventsPage.tsx +++ b/frontend/my-react-app/src/pages/ApproveEventsPage.tsx @@ -46,8 +46,8 @@ const ApproveEventsPage: React.FC = () => { const pending = events.filter(e => e.status === 'pending'); return ( - - + + Pending Event Approvals {error && {error}} diff --git a/frontend/my-react-app/src/pages/EventsPage.tsx b/frontend/my-react-app/src/pages/EventsPage.tsx index 280d4f65..c5752ce6 100644 --- a/frontend/my-react-app/src/pages/EventsPage.tsx +++ b/frontend/my-react-app/src/pages/EventsPage.tsx @@ -240,10 +240,12 @@ function EventsPage() { } return ( - + + {/* Header */} - +

+ Browse Events @@ -297,7 +299,7 @@ function EventsPage() { - + Price Range: {priceRange[0] === 0 ? 'Free' : `$${priceRange[0]}`} - {priceRange[1] === 0 ? 'Free' : `$${priceRange[1]}`} - + Showing {filteredAndSortedEvents.length} event{filteredAndSortedEvents.length !== 1 ? 's' : ''} @@ -497,6 +499,7 @@ function EventsPage() { )} + ); } diff --git a/frontend/my-react-app/src/pages/MyEventsPage.tsx b/frontend/my-react-app/src/pages/MyEventsPage.tsx index 74bd0c2c..cfc984fb 100644 --- a/frontend/my-react-app/src/pages/MyEventsPage.tsx +++ b/frontend/my-react-app/src/pages/MyEventsPage.tsx @@ -169,13 +169,15 @@ const MyEventsPage: React.FC = () => { } return ( - + +

+
- + My Events - + Manage and monitor all your events in one place
@@ -232,10 +234,10 @@ const MyEventsPage: React.FC = () => { borderColor: 'divider' }} > - + You haven't created any events yet - + Get started by creating your first event!