CSS Visual Overhaul

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",

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;

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 (
         <>
 
-      <Box component = "section" sx = {{p: 2, width: '100%', bgcolor: '#008dd5', color: 'white', border: '5px white'}}>
+      <Box component = "section" sx = {{width: '100%', bgcolor: '#008dd5', color: 'white'}}>
+        <br></br>
+        <br></br>
+        <Typography variant = "h2" className='title'> Linkt </Typography>
+        <br></br>
         <br></br>
-        <Typography variant = "h2"> Linkt </Typography>
-        <Typography variant = "body1"> Welcome to our comprehensive campus Events & Ticketing service, designed to streamline event management and boost student engagement for students! 
+        <Typography variant = "body1" fontSize = {'19px'} padding={'2px'}> 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! </Typography> 
-        {user?.userType == 'organizer' && ( <br></br> )}
-        {user?.userType == 'organizer' && ( <br></br> )}
-
-        {user?.userType == 'organizer' && (
-        <Typography variant = "h5">
-            Hey! We noticed that you're an organizer! Feel free to add your event to our page!
-        </Typography>)}
-
-      {user?.userType == 'organizer' && (
-        <button onClick={() => navigate('/CreateData')}>
-        Create an Event!
-        </button>)}
-
+        <br></br>
       </Box>
 
+        <Box component = "section" sx = {{width: '100%', bgcolor: '#a63a50', color: 'white'}}>
+        <br></br>
+        <Typography variant = "h3" className='smallertitle'> Ready To Interact? </Typography><br></br>
+            {user?.userType == 'organizer' && (
+            <Typography variant = "h5">
+                Hey! We noticed that you're an organizer! Feel free to add your event to our page!
+            </Typography>)}
+
+            {user?.userType == 'organizer' && (
+            <button onClick={() => navigate('/CreateData')}>
+            Create an Event!
+            </button>)} 
+            {user?.userType == 'organizer' && (<br></br>)}
+            {user?.userType == 'organizer' && (<br></br>)}
+
+            <button onClick={() => navigate('/events')}>
+                Browse Events
+            </button> <br></br> <br></br>
+
+            <button onClick={() => navigate('/savedtickets')}>
+                Saved Tickets
+                </button> <br></br> <br></br>
+
+            <button onClick={() => navigate('/signup')}>
+                Go to Sign Up
+            </button> <br></br><br></br>
+            <button onClick={() => navigate('/login')}>
+                Go to Login
+            </button>
+            <br></br>
+            <br></br>
+      </Box>
 
 
 
-      <Box component = "section" sx = {{p: 2, width: '100%', bgcolor: '#373f51', color: 'white', border: '5px white'}}>
+      <Box component = "section" sx = {{width: '100%', bgcolor: '#373f51', color: 'white'}}>
+        <br></br>
         {/* 
         Former Logo
               <a href="https://vite.dev" target="_blank">
@@ -88,7 +112,7 @@ function Home() {
                 <img src={reactLogo} className="logo react" alt="React logo" />
       </a>
         */}
-      <Typography variant = "h2"> Top Events </Typography>
+      <Typography variant = "h3" className='smallertitle'> Top Events </Typography>
       <Typography variant = "h4"> Backend for this hasn't been implemented yet! </Typography>
       <img src = "src\images\samantha-gades-fIHozNWfcvs-unsplash.jpg" alt = "neat college photo!" style = {{maxWidth: '33%', maxHeight: '33%'}}></img>
       <Typography variant = "h3"> Frosh Night </Typography>
@@ -103,35 +127,9 @@ function Home() {
       <Typography variant = "body1"> Join us for a tour of the campus museum where you can browse artifacts of some of the school's greatest alumni! </Typography>
       {/* With this, the "Top Events" container is forced to extend its height to contain the floated images*/}
       <Box sx={{ clear: 'both' }}></Box>
+      <br></br>
       </Box>
 
-
-      <Box component = "section" sx = {{p: 2, width: '100%', bgcolor: '#a63a50', color: 'white', border: '5px white'}}>
-        <Typography variant = "h3"> Ready To Interact? </Typography>
-        {/*
-        <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-        <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
-        */}
-                <button onClick={() => navigate('/signup')}>
-                    Go to Sign Up
-                </button>
-                <button onClick={() => navigate('/login')}>
-                    Go to Login
-                </button>
-                <button onClick={() => navigate('/checkout/1')}>
-                    Go to Checkout
-                </button>
-                <button onClick={() => navigate('/savedtickets')}>
-                    Saved tickets
-                 </button>
-                <button onClick={() => navigate('/events')}>
-                    Browse events
-                </button>
-      </Box>
         </>
     );
 }

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;
+}

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 (
-        <div style={{maxWidth: 500, margin: 'auto', padding: 20}}>
-            <h2>CREATE EVENT</h2>
+        <div style={{maxWidth: 500, margin: 'auto', padding: 15}}>
+            <h2 className='createtitle'>CREATE EVENT</h2>
             <form onSubmit={handleSubmit}>
                 <div>
                     <label>Name Of Event: <span style={{color: 'red'}}>*</span></label><br/>
@@ -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

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 (
-        <div style={{ maxWidth: 400, margin: 'auto', padding: 20 }}>
-            <h2>Log In</h2>
+        <div style = {{backgroundColor: '#373f51', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh'}}>
+        <div className = 'loginDiv' style={{ maxWidth: 500, fontSize: '25px', margin: 'auto', padding: 20 , border: '1px solid #ccc', borderRadius: 8, boxShadow: '0 2px 4px rgba(0,0,0,0.1)', backgroundColor: '#a63a50'}}>
+            <h2 style = {{fontSize: '60px', fontFamily: 'Montserrat', fontStyle: 'italic', color: 'white'}}>LOGIN</h2>
             {error && (
                 <div
                     style={{
@@ -86,11 +88,11 @@ export default function Login() {
                 </div>
             )}
             <form onSubmit={handleSubmit}>
-                <div>
-                    <label>Email:</label>
-                    <br />
+                <div style = {{fontSize: '25px', color: 'white', height: '100px'}}>
+                    <label>Email:</label><br/>
                     <input
                         type="email"
+                        size={40}
                         value={email}
                         onChange={e => setEmail(e.target.value)}
                         disabled={loading}
@@ -103,11 +105,12 @@ export default function Login() {
                         }}
                     />
                 </div>
-                <div style={{ marginTop: 15 }}>
+                <div style={{ marginTop: 15, color: 'white' }}>
                     <label>Password:</label>
                     <br />
                     <input
                         type="password"
+                        size={40}
                         value={password}
                         onChange={e => setPassword(e.target.value)}
                         disabled={loading}
@@ -132,19 +135,20 @@ export default function Login() {
                         border: 'none',
                         borderRadius: 4,
                         cursor: loading ? 'not-allowed' : 'pointer',
-                        fontSize: 16
+                        fontSize: 20
                     }}
                 >
                     {loading ? 'Logging in...' : 'Log In'}
                 </button>
             </form>
             <button
                 style={{
-                    marginTop: 15,
+                    marginTop: 20,
                     width: '100%',
                     padding: '10px',
-                    backgroundColor: '#f5f5f5',
-                    border: '1px solid #ddd',
+                    backgroundColor: '#288af3',
+                    color: 'white',
+                    fontSize: 20,
                     borderRadius: 4,
                     cursor: 'pointer'
                 }}
@@ -154,5 +158,6 @@ export default function Login() {
                 Back To Home
             </button>
         </div>
+        </div>
     );
 }