+
diff --git a/frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.module.css b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.module.css
similarity index 55%
rename from frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.module.css
rename to frontend/src/Settings/SettingsNavbar/SettingsNavbar.module.css
index cba1533..a878c26 100644
--- a/frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.module.css
+++ b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.module.css
@@ -17,11 +17,29 @@
height: 24px;
}
+.section {
+ padding-bottom: 24px;
+}
+
.section .row:first-child {
font-weight: bold;
font-size: 1.2rem;
}
-.section .row:last-child {
+.container .section:last-child {
+ padding-bottom: 0;
+}
+
+.container .section:last-child .row:last-child {
padding-bottom: 0;
}
+
+.link {
+ color: inherit;
+ text-decoration: none;
+}
+
+.link.active {
+ margin-top: 2px;
+ border-bottom: 2px solid hsl(203, 88%, 27%);
+}
diff --git a/frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.tsx b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
similarity index 52%
rename from frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.tsx
rename to frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
index ed907c3..f5ae685 100644
--- a/frontend/src/SettingsPage/SettingsNavbar/SettingsNavbar.tsx
+++ b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
@@ -2,8 +2,10 @@ import {
CalendarIcon,
MegaphoneIcon,
StarIcon,
+ UserCircleIcon,
} from '@heroicons/react/24/outline';
import classes from './SettingsNavbar.module.css';
+import { NavLink } from 'react-router';
interface Row {
icon: React.ReactNode;
@@ -12,18 +14,28 @@ interface Row {
}
const rows: Row[][] = [
+ [
+ {
+ icon:
,
+ name: 'Profile',
+ to: '/settings/profile',
+ },
+ ],
[
{
icon:
,
name: 'Event Management',
+ to: '/settings/events',
},
{
icon:
,
- name: 'Events',
+ name: 'Create a new event',
+ to: '/settings/events/new',
},
{
icon:
,
- name: 'Discord Integration',
+ name: 'Discord integration',
+ to: '/settings/discord',
},
],
];
@@ -36,7 +48,20 @@ export function SettingsNavbar() {
{section.map((row, j) => (
{row.icon}
-
{row.name}
+ {row.to ? (
+
+ isActive
+ ? `${classes.link} ${classes.active}`
+ : classes.link
+ }
+ to={row.to}
+ >
+ {row.name}
+
+ ) : (
+
{row.name}
+ )}
))}
diff --git a/frontend/src/Settings/SettingsPage/EventManagementPage/EventManagementPage.tsx b/frontend/src/Settings/SettingsPage/EventManagementPage/EventManagementPage.tsx
new file mode 100644
index 0000000..0cb0258
--- /dev/null
+++ b/frontend/src/Settings/SettingsPage/EventManagementPage/EventManagementPage.tsx
@@ -0,0 +1,3 @@
+export function EventManagementPage() {
+ return <>Hi;
+}
diff --git a/frontend/src/ProfilePage/ProfilePage.tsx b/frontend/src/Settings/SettingsPage/ProfilePage/ProfilePage.tsx
similarity index 100%
rename from frontend/src/ProfilePage/ProfilePage.tsx
rename to frontend/src/Settings/SettingsPage/ProfilePage/ProfilePage.tsx
diff --git a/frontend/src/Settings/SettingsPage/SettingsPage.module.css b/frontend/src/Settings/SettingsPage/SettingsPage.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/Settings/SettingsPage/SettingsPage.tsx b/frontend/src/Settings/SettingsPage/SettingsPage.tsx
new file mode 100644
index 0000000..2055b05
--- /dev/null
+++ b/frontend/src/Settings/SettingsPage/SettingsPage.tsx
@@ -0,0 +1,25 @@
+import classes from './SettingsPage.module.css';
+
+export interface SettingsPageProps {
+ title: string;
+ headerButtons: React.ReactNode[];
+ pageAbovePath?: string;
+ children: React.ReactNode;
+}
+
+export function SetingsPage(props: SettingsPageProps) {
+ return (
+ <>
+
+ {props.pageAbovePath &&
}
+
+
+
{props.children}
+
+ );
+}
From 43f202e7deaf8411fc09b395b886d1d6c969c26d Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Tue, 10 Dec 2024 01:05:22 +1100
Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=86=97=20refactor=20button=20compon?=
=?UTF-8?q?ent,=20add=20variants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/index.html | 5 ++-
frontend/src/Button/Button.module.css | 11 +++--
frontend/src/Button/Button.tsx | 44 ++++++++++++-------
.../EventManagementPage.tsx | 18 +++++++-
.../SettingsPage/ProfilePage/ProfilePage.tsx | 8 +++-
.../SettingsPage/SettingsPage.module.css | 9 ++++
.../Settings/SettingsPage/SettingsPage.tsx | 12 +++--
7 files changed, 77 insertions(+), 30 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index f684169..6127731 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,10 @@
-
+
Pyramids
diff --git a/frontend/src/Button/Button.module.css b/frontend/src/Button/Button.module.css
index 98e770e..c5de60b 100644
--- a/frontend/src/Button/Button.module.css
+++ b/frontend/src/Button/Button.module.css
@@ -1,20 +1,23 @@
.button {
- background: hsl(203, 88%, 27%);
border: 0px;
border-radius: 8px;
width: fit-content;
font-size: 24px;
- color: hsl(202, 49%, 90%);
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
margin: 0px;
box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.25);
- transition: background 0.2s linear, color 0.2s linear;
+ transition: background 0.2s linear, color 0.2s linear;
+}
+
+.primary {
+ background: hsl(203, 88%, 27%);
+ color: hsl(202, 49%, 90%);
}
-.button:hover {
+.primary:hover {
background-color: hsl(202, 49%, 90%);
color: hsla(0, 0%, 0%);
}
diff --git a/frontend/src/Button/Button.tsx b/frontend/src/Button/Button.tsx
index e49de85..128aac4 100644
--- a/frontend/src/Button/Button.tsx
+++ b/frontend/src/Button/Button.tsx
@@ -1,43 +1,55 @@
-import { PlusIcon } from "@heroicons/react/24/solid";
-import classes from "./Button.module.css";
-import { BookmarkIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from '@heroicons/react/24/solid';
+import classes from './Button.module.css';
+import { BookmarkIcon } from '@heroicons/react/24/outline';
-export enum ButtonOptions {
- String,
- Plus,
- Bookmark,
+export enum ButtonIcons {
+ Plus = 'plus',
+ Bookmark = 'bookmark',
+}
+
+export enum ButtonVariants {
+ Primary = 'primary',
+ Secondary = 'secondary',
}
type ButtonProps = {
children?: string;
- variant: ButtonOptions;
+ icon?: ButtonIcons;
+ variant?: ButtonVariants;
className?: string;
- type: React.ButtonHTMLAttributes
["type"];
+ type: React.ButtonHTMLAttributes['type'];
};
function Button(props: ButtonProps) {
return (
- 
+