Merge branch 'main' into oorja and fixed clash

web/src/App.tsx

@@ -3,10 +3,12 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { useState } from "react";
 import Home from "@pages/Home";
 import Login from "@pages/Login";
-import Store from "@pages/Events";
+import Events from "@pages/Events";
 import SignUp from "@pages/SignUp";
 import About from "@pages/About";
 import Profile from "@pages/Profile";
+import Leaderboard from "@pages/Leaderboard"
+
 
 const router = createBrowserRouter([
     {
@@ -22,8 +24,8 @@ const router = createBrowserRouter([
         element: <SignUp />,
     },
     {
-        path: "/store",
-        element: <Store />,
+        path: "/events",
+        element: <Events />,
     },
     {
         path: "/profile",
@@ -33,6 +35,10 @@ const router = createBrowserRouter([
         path: "/about",
         element: <About />,
     },
+    {
+        path: "leaderboard",
+        element: <Leaderboard /> 
+    }
 ]);
 
 export default function App() {

web/src/components/ColourKey.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import '../styles/ColourKey.css'
+
+const ColorKey: React.FC = () => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+
+    const toggleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+    };
+
+    return (
+        <div className={`color-key-container ${isCollapsed ? 'collapsed' : ''}`}>
+            <button className="collapse-button" onClick={toggleCollapse}>
+                {isCollapsed ? 'Expand' : 'Collapse'}
+            </button>
+            {!isCollapsed && (
+                <div className="color-key-content">
+                    <div className="color-key-item">
+                        <div className="color-flag no-event"></div>
+                        <span>No Events</span>
+                    </div>
+                    <div className="color-key-item">
+                        <div className="color-flag event-soon"></div>
+                        <span>Event Soon</span>
+                    </div>
+                    <div className="color-key-item">
+                        <div className="color-flag event-later"></div>
+                        <span>Event in a While</span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ColorKey;

web/src/pages/Leaderboard.tsx

@@ -1,6 +1,7 @@
 import NavBar from "@components/NavBar";
 import React from "react";
 
+
 export default function Sell() {
     return (
         <div>

web/src/pages/Profile.tsx

@@ -1,11 +1,28 @@
+import React from 'react';
 import NavBar from "@components/NavBar";
-import React from "react";
+import '../styles/profile.css';
+import Key from  "@components/ColourKey"
 
-export default function Profile() {
+function Profile() {
     return (
-        <div>
+        <div className="profile-container">
             <NavBar />
-            <p>This is the profile page</p>
+            <Key />
+            <div className="profile-content">
+                <h1 className="profile-title">MY  ACCOUNT</h1>
+                <hr className="title-line" />
+                <div className="profile-details">
+                    <div className="picture-placeholder"></div>
+                    <div className="profile-info">
+                        <p className="profile-name">NAME</p>
+                        <p className="events-attended">Events Attended: 5</p>
+                        <p className="events-attended">Points: 10</p>
+                        <p className="events-attended">placeholder</p>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }
+
+export default Profile;

web/src/styles/ColourKey.css

@@ -0,0 +1,55 @@
+.color-key-container {
+    border: 1px solid #ccc;
+    padding: 10px;
+    width: 200px;
+    position: fixed;
+    bottom: 20px; 
+    right: 20px;   
+    background-color: white;
+    z-index: 1000;
+}
+
+.color-key-container.collapsed .color-key-content {
+    display: none;
+}
+
+.collapse-button {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: yellow;
+    color: white;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+}
+
+.color-key-content {
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+}
+
+.color-key-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.color-flag {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+}
+
+.no-event {
+    background-color: gray;
+}
+
+.event-soon {
+    background-color: red;
+}
+
+.event-later {
+    background-color: blue;
+}

web/src/styles/Profile.css

@@ -0,0 +1,65 @@
+.profile-container {
+    display: flex;
+    flex-direction: column;
+
+}
+
+
+.profile-content {
+    width: 93%;
+    margin-left: 50px;
+    margin-top: 15px;
+}
+
+.profile-title {
+    font-size: 3em;
+    font-weight: 1000;
+    margin-bottom: 10px;
+    text-align: left;
+    width: 100%;
+    word-spacing: 20px;
+    color: #364652;
+}
+
+.title-line {
+    border: none;
+    height: 4px;
+    background-color: #364652;;
+    margin-bottom: 20px;
+}
+
+.profile-details {
+    display: flex;
+    align-items: center;
+    margin-left: 20;
+}
+
+
+.picture-placeholder {
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    background-color: #ccc;
+    margin: 30px;
+}
+
+.profile-info {
+    display: flex;
+    flex-direction: column;
+    margin-top: -40px;
+    margin-left: 70px;
+}
+
+.profile-name {
+    font-size: 2em;
+    font-weight: 800;
+    margin: 0;
+    color: #364652;
+}
+
+.events-attended {
+    font-size: 1.2em;
+    margin: 5px 0 0 0;
+    font-weight: 800;
+    color: #364652;
+}