From e09fbd98950395839d1f42f9b2272d498f0f47fe Mon Sep 17 00:00:00 2001 From: Nancy Wei Date: Sat, 13 Jul 2024 11:24:51 +1200 Subject: [PATCH 1/3] changed routing --- web/src/App.tsx | 12 +++++++++--- web/src/components/NavBar.tsx | 4 ++-- web/src/pages/Leaderboard.tsx | 1 + web/src/pages/Profile.tsx | 1 + 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 7197270..048cf08 100644 --- a/web/src/App.tsx +++ b/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: , }, { - path: "/store", - element: , + path: "/events", + element: , }, { path: "/profile", @@ -33,6 +35,10 @@ const router = createBrowserRouter([ path: "/about", element: , }, + { + path: "leaderboard", + element: + } ]); export default function App() { diff --git a/web/src/components/NavBar.tsx b/web/src/components/NavBar.tsx index e695ba0..e85f730 100644 --- a/web/src/components/NavBar.tsx +++ b/web/src/components/NavBar.tsx @@ -12,8 +12,8 @@ export default function NavBar() { ReStore
- EVENTS - LEADERBOARD + EVENTS + LEADERBOARD Profile
diff --git a/web/src/pages/Leaderboard.tsx b/web/src/pages/Leaderboard.tsx index 5b76dbf..0f7633b 100644 --- a/web/src/pages/Leaderboard.tsx +++ b/web/src/pages/Leaderboard.tsx @@ -1,6 +1,7 @@ import NavBar from "@components/NavBar"; import React from "react"; + export default function Sell() { return (
diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx index fee958b..7b276c8 100644 --- a/web/src/pages/Profile.tsx +++ b/web/src/pages/Profile.tsx @@ -1,6 +1,7 @@ import NavBar from "@components/NavBar"; import React from "react"; + export default function Profile() { return (
From d5929657bcffa880470abb1a2d513bad3a9f54c2 Mon Sep 17 00:00:00 2001 From: Nancy Wei Date: Sat, 13 Jul 2024 11:55:46 +1200 Subject: [PATCH 2/3] edited profile page --- web/src/pages/Profile.tsx | 24 +++++++++++--- web/src/styles/Profile.css | 64 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 web/src/styles/Profile.css diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx index 7b276c8..cd48d5e 100644 --- a/web/src/pages/Profile.tsx +++ b/web/src/pages/Profile.tsx @@ -1,12 +1,26 @@ +import React from 'react'; import NavBar from "@components/NavBar"; -import React from "react"; +import '../styles/profile.css'; - -export default function Profile() { +function Profile() { return ( -
+
-

This is the profile page

+
+

MY ACCOUNT

+
+
+
+
+

NAME

+

Events Attended: 5

+

Points: 10

+

placeholder

+
+
+
); } + +export default Profile; diff --git a/web/src/styles/Profile.css b/web/src/styles/Profile.css new file mode 100644 index 0000000..f1cc1d6 --- /dev/null +++ b/web/src/styles/Profile.css @@ -0,0 +1,64 @@ +.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; + color: #364652; +} From da77b3f39b076f45480640246e55a32ea1d842a6 Mon Sep 17 00:00:00 2001 From: Nancy Wei Date: Sat, 13 Jul 2024 12:37:37 +1200 Subject: [PATCH 3/3] made colour key --- web/src/components/ColourKey.tsx | 36 +++++++++++++++++++++ web/src/pages/Profile.tsx | 2 ++ web/src/styles/ColourKey.css | 55 ++++++++++++++++++++++++++++++++ web/src/styles/Profile.css | 1 + 4 files changed, 94 insertions(+) create mode 100644 web/src/components/ColourKey.tsx create mode 100644 web/src/styles/ColourKey.css diff --git a/web/src/components/ColourKey.tsx b/web/src/components/ColourKey.tsx new file mode 100644 index 0000000..5effd2a --- /dev/null +++ b/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 ( +
+ + {!isCollapsed && ( +
+
+
+ No Events +
+
+
+ Event Soon +
+
+
+ Event in a While +
+
+ )} +
+ ); +}; + +export default ColorKey; diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx index cd48d5e..4e6bc49 100644 --- a/web/src/pages/Profile.tsx +++ b/web/src/pages/Profile.tsx @@ -1,11 +1,13 @@ import React from 'react'; import NavBar from "@components/NavBar"; import '../styles/profile.css'; +import Key from "@components/ColourKey" function Profile() { return (
+

MY ACCOUNT

diff --git a/web/src/styles/ColourKey.css b/web/src/styles/ColourKey.css new file mode 100644 index 0000000..4c9aa72 --- /dev/null +++ b/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; +} diff --git a/web/src/styles/Profile.css b/web/src/styles/Profile.css index f1cc1d6..297c991 100644 --- a/web/src/styles/Profile.css +++ b/web/src/styles/Profile.css @@ -60,5 +60,6 @@ .events-attended { font-size: 1.2em; margin: 5px 0 0 0; + font-weight: 800; color: #364652; }