Cleaned up accent color logic and theming functions. Started theming …

…manage users tab

components/Organizer/JudgingTab/JudgingTab.tsx

@@ -2,6 +2,7 @@ import { Skeleton } from 'antd';
 import { TeamData, ScoreData, UserData } from '../../../types/database';
 import { useCustomSWR, RequestType } from '../../../utils/request-utils';
 import AllScores from './allScores';
+import styles from '../../../styles/Organizer.module.css';
 
 const JudgingTab = () => {
 	// Teams data
@@ -30,15 +31,15 @@ const JudgingTab = () => {
 	const dataNull = !teamsData || !scoresData || !judgeData;
 
 	return (
-		<>
+		<div className={styles.tab}>
 			{error ? (
 				<div>Failed to load data.</div>
 			) : dataNull ? (
 				<div>Loading...</div>
 			) : (
 				<AllScores teamData={teamsData} scoreData={scoresData} userData={judgeData} />
 			)}
-		</>
+		</div>
 	);
 };
 

components/Organizer/ManageUsersTab/ManageUsersTab.tsx

@@ -2,11 +2,32 @@ import { Empty, Skeleton } from 'antd';
 import { useSWRConfig } from 'swr';
 import { useCustomSWR, RequestType } from '../../../utils/request-utils';
 import ManageRoleForm, { ManageFormFields } from './manageRoleForm';
-import { handleManageFormSubmit } from '../../../utils/organizer-utils';
+import { ScopedMutator } from 'swr/dist/types';
+import { handleSubmitSuccess, handleSubmitFailure } from '../../../lib/helpers';
 
 const ManageUsersTab = () => {
 	const { mutate } = useSWRConfig();
 
+	/**
+	 * Handles submission of the Manage Form with the specified role data.
+	 * @param {ManageFormFields} roleData - The form data for the role being managed.
+	 * @param {ScopedMutator} mutate - The scoped mutator function to update the query cache.
+	 */
+	const handleManageFormSubmit = async (roleData: ManageFormFields, mutate: ScopedMutator) => {
+		const res = await fetch(`/api/manage-role`, {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ formData: roleData }),
+		});
+
+		if (res.ok) {
+			mutate('/api/manage-role');
+			handleSubmitSuccess();
+		} else handleSubmitFailure(await res.text());
+	};
+
 	// User data
 	const { data: userData, error } = useCustomSWR<ManageFormFields>({
 		url: '/api/manage-role',

components/Organizer/ManageUsersTab/manageRoleForm.tsx

@@ -1,6 +1,8 @@
 import { Form, Button, Select, Row, Col, message } from 'antd';
 import Text from 'antd/lib/typography/Text';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import { ThemeContext, getAccentColor, getThemedClass } from '../../../theme/themeProvider';
+import styles from '../../../styles/ManageUsersTab.module.css';
 
 const { Option } = Select;
 
@@ -16,41 +18,44 @@ export interface ManageFormProps {
 	onSubmit: (value: ManageFormFields) => Promise<void>;
 }
 
-export default function ManageRoleForm(props: ManageFormProps) {
-	const { onSubmit } = props;
+export default function ManageRoleForm({ onSubmit, formData }: ManageFormProps) {
 	const layout = {
 		labelCol: { span: 16 },
 		labelAlign: 'left',
 	};
 
+	const { accentColor, baseTheme } = useContext(ThemeContext);
+
 	const [modified, setModified] = useState<string[]>([]);
 
 	// TODO: probably add search
 	const [form] = Form.useForm();
 
 	return (
 		<Form {...layout} labelAlign="left" form={form} onFinish={onSubmit}>
-			{props.formData.map(config => (
+			{formData.map(config => (
 				<Form.Item
 					name={config._id}
 					// display name and email
 					label={
-						<Text style={{ height: '50px' }}>
-							{config.name}
-							<br />
-							<Text type="secondary">{config.email}</Text>
-						</Text>
+						<div>
+							<span className={styles[getThemedClass('manageUserPrimaryLabel', baseTheme)]}>
+								{config.name}
+							</span>
+							<div style={{ color: getAccentColor(accentColor), fontWeight: 200, paddingBottom: '5px' }}>
+								{config.email}
+							</div>
+						</div>
 					}
 					colon={false}
 					key={config._id}
 					initialValue={config.userType}>
 					<Select
 						placeholder="Select Role"
-						status={modified.includes(config._id) ? 'warning' : ''}
-						// not really a warning just good visually
 						// make box glow if role has been changed
+						status={modified.includes(config._id) ? 'warning' : ''}
 						onSelect={(role: string) => {
-							if (role !== props.formData.find(user => user._id === config._id)?.userType) {
+							if (role !== formData.find(user => user._id === config._id)?.userType) {
 								setModified([...modified, config._id]);
 							} else {
 								setModified([...modified.filter(user => user !== config._id)]);
@@ -64,20 +69,24 @@ export default function ManageRoleForm(props: ManageFormProps) {
 			))}
 			<Row gutter={16}>
 				<Col offset={10}>
-					<Button type="primary" htmlType="submit">
+					<button
+						type="submit"
+						className={styles['manageUserSubmitButton']}
+						style={{ backgroundColor: getAccentColor(accentColor) }}>
 						Submit
-					</Button>
+					</button>
 				</Col>
 				<Col>
-					<Button
-						htmlType="reset"
+					<button
+						type="reset"
+						className={styles['manageUserClearButton']}
 						onClick={() => {
 							form.resetFields();
 							message.success('Successfuly reset form!');
 							setModified([]);
 						}}>
 						Clear
-					</Button>
+					</button>
 				</Col>
 			</Row>
 		</Form>

pages/OrganizerDash.tsx

@@ -7,22 +7,28 @@ import PreAddUsersTab from '../components/Organizer/PreAddUsersTab/PreAddUsersTa
 import ApplicantsTab from '../components/Organizer/ApplicantsTab/ApplicantsTab';
 import EventsTab from '../components/Organizer/EventsTab/EventsTab';
 import styles from '../styles/Organizer.module.css';
-import { useTheme } from '../theme/themeProvider';
+import { ThemeContext, getAccentColor, getThemedClass } from '../theme/themeProvider';
+import { useContext } from 'react';
 
 export default function OrganizerDash() {
 	// Get session data
 	const { data: session, status } = useSession();
+	const { accentColor, baseTheme } = useContext(ThemeContext);
 
-	console.log(useTheme('organizerHeaderEmailText'));
+	console.log(getThemedClass('organizerHeaderEmailText', baseTheme));
 
 	return (
-		<div className={styles[useTheme('organizerMain')]}>
-			<div className={styles[useTheme('organizerHeader')]}>
-				<h1 className={styles[useTheme('organizerTitle')]}>Organizer Dashboard</h1>
-				<div className={styles[useTheme('organizerHeaderEmail')]}>
-					<div className={styles[useTheme('organizerHeaderEmailText')]}>{session?.user?.email}</div>
+		<div className={styles[getThemedClass('organizerMain', baseTheme)]}>
+			<div className={styles[getThemedClass('organizerHeader', baseTheme)]}>
+				<h1 className={styles[getThemedClass('organizerTitle', baseTheme)]}>Organizer Dashboard</h1>
+				<div className={styles[getThemedClass('organizerHeaderEmail', baseTheme)]}>
+					<div className={styles[getThemedClass('organizerHeaderEmailText', baseTheme)]}>
+						{session?.user?.email}
+					</div>
 					<div>
-						<button className={styles[useTheme('organizerButton')]} onClick={() => signOut()}>
+						<button
+							className={styles[getThemedClass('organizerButton', baseTheme)]}
+							onClick={() => signOut()}>
 							Sign out
 						</button>
 					</div>
@@ -31,6 +37,10 @@ export default function OrganizerDash() {
 			<Space direction="vertical">
 				<Tabs
 					defaultActiveKey="1"
+					style={{
+						color: getAccentColor(accentColor),
+						width: '90vw',
+					}}
 					items={[
 						{
 							label: `Schedule`,

pages/index.tsx

@@ -35,8 +35,9 @@ export default function Page() {
 			<Layout
 				style={{
 					padding: session?.userType === undefined || session?.userType === 'HACKER' ? '0px' : '30px',
-					height: `100%`,
+					height: `100vh`,
 					width: `100vw`,
+					overflow: 'auto',
 					backgroundColor:
 						session?.userType === undefined || session?.userType === 'HACKER'
 							? 'white'

styles/ManageUsersTab.module.css

@@ -0,0 +1,28 @@
+.manageUserPrimaryLabel-light {
+	height: 50px;
+	color: black;
+	font-weight: 600;
+}
+
+.manageUserPrimaryLabel-dark {
+	height: 50px;
+	color: white;
+	font-weight: 600;
+}
+
+.manageUserSubmitButton {
+	border-radius: 10px;
+	border: none;
+	font-weight: 600;
+	padding: 4px 10px;
+	transition: 0.2s;
+}
+
+.manageUserClearButton {
+	border-radius: 10px;
+	background-color: rgb(208, 208, 208);
+	border: none;
+	font-weight: 600;
+	padding: 4px 10px;
+	transition: 0.2s;
+}

styles/Organizer.module.css

@@ -1,3 +1,8 @@
+.tab {
+	height: 100%;
+	width: 100%;
+}
+
 .organizerHeader-light {
 	display: flex;
 	justify-content: space-between;

styles/globals.css

@@ -5,6 +5,8 @@ body {
 	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
 		Helvetica Neue, sans-serif;
+	overscroll-behavior: none;
+	height: 100%;
 }
 
 a {

theme/theme.ts

@@ -1,9 +1,15 @@
 export const themeConstants = {
-	// A default color palette for buttons, in case one isn't provided
 	light: {
 		backgroundColor: '#ffffff',
 	},
 	dark: {
 		backgroundColor: '#1D1743',
 	},
+	accent: {
+		blue: '#2F80ED',
+		green: '#219653',
+		pink: '#EB5757',
+		yellow: '#F2C94C',
+		orange: '#F2994A',
+	},
 };

theme/themeProvider.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useState } from 'react';
+import { themeConstants } from './theme';
 
 // Base theme options
 export enum Theme {
@@ -34,7 +35,7 @@ export const ThemeContext = createContext<ThemeContextType>({
 // Create the wrapper for the theme context
 export const ThemeProvider = ({ children }: { children: any }) => {
 	const [baseTheme, setBaseTheme] = useState<Theme>(Theme.DARK);
-	const [accentColor, setAccentColor] = useState<AccentColor>(AccentColor.BLUE);
+	const [accentColor, setAccentColor] = useState<AccentColor>(AccentColor.ORANGE);
 
 	const value = {
 		baseTheme,
@@ -54,7 +55,33 @@ export const ThemeProvider = ({ children }: { children: any }) => {
  * 	<div className={styles[useTheme('organizerMain')]}>
  * ```
  */
-export const useTheme = (className: string) => {
-	const { baseTheme } = useContext(ThemeContext);
+export const getThemedClass = (className: string, baseTheme: Theme) => {
 	return `${className}-${baseTheme === Theme.LIGHT ? 'light' : 'dark'}`;
 };
+
+/**
+ * Returns the accent color hex code for a given accent color enum value
+ * @param accentColor - the accent color enum value
+ * @returns the hex code for the accent color
+ *
+ * @example
+ * ```tsx
+ * 	<div style={{ color: useAccentColor(AccentColor.BLUE) }}>Hello World</div>
+ * ```
+ */
+export const getAccentColor = (accentColor: AccentColor) => {
+	switch (accentColor) {
+		case AccentColor.BLUE:
+			return themeConstants.accent.blue;
+		case AccentColor.GREEN:
+			return themeConstants.accent.green;
+		case AccentColor.PINK:
+			return themeConstants.accent.pink;
+		case AccentColor.YELLOW:
+			return themeConstants.accent.yellow;
+		case AccentColor.ORANGE:
+			return themeConstants.accent.orange;
+		default:
+			return themeConstants.accent.blue;
+	}
+};

utils/organizer-utils.ts

@@ -42,26 +42,6 @@ export const generateScheduleB = (teams: TeamData[], judges: UserData[]) => {
 	return sessionsB;
 };
 
-/**
- * Handles submission of the Manage Form with the specified role data.
- * @param {ManageFormFields} roleData - The form data for the role being managed.
- * @param {ScopedMutator} mutate - The scoped mutator function to update the query cache.
- */
-export const handleManageFormSubmit = async (roleData: ManageFormFields, mutate: ScopedMutator) => {
-	const res = await fetch(`/api/manage-role`, {
-		method: 'PATCH',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({ formData: roleData }),
-	});
-
-	if (res.ok) {
-		mutate('/api/manage-role');
-		handleSubmitSuccess();
-	} else handleSubmitFailure(await res.text());
-};
-
 /**
  * Handles pre-add user deletion with the specified user data.
  * @param {PreAddData} user - The user data object to be deleted from pre-add.