From 7c2f789a31e1bd494b5b8b625a67300dbe8e9d94 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 26 Sep 2025 15:19:35 -0700
Subject: [PATCH] add typography to theme, change UsePost return type

---
 client/src/Hooks/v2/UseApi.tsx     | 17 +++++++++++++----
 client/src/Pages/v2/Auth/Login.tsx |  8 ++------
 client/src/Utils/Theme/v2/theme.ts | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/client/src/Hooks/v2/UseApi.tsx b/client/src/Hooks/v2/UseApi.tsx
index fdb4e8a24..7cef2bf2e 100644
--- a/client/src/Hooks/v2/UseApi.tsx
+++ b/client/src/Hooks/v2/UseApi.tsx
@@ -4,6 +4,11 @@ import type { SWRConfiguration } from "swr";
 import type { AxiosRequestConfig } from "axios";
 import { get, post } from "@/Utils/ApiClient"; // your axios wrapper
 
+export type ApiResponse = {
+	message: string;
+	data: any;
+};
+
 // Generic fetcher for GET requests
 const fetcher = async <T,>(url: string, config?: AxiosRequestConfig) => {
 	const res = await get<T>(url, config);
@@ -29,19 +34,23 @@ export const useGet = <T,>(
 	};
 };
 
-export const usePost = <B = any, R = any>(endpoint: string) => {
+export const usePost = <B = any,>(endpoint: string) => {
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 
-	const postFn = async (body: B, config?: AxiosRequestConfig): Promise<R | null> => {
+	const postFn = async (
+		body: B,
+		config?: AxiosRequestConfig
+	): Promise<ApiResponse | null> => {
 		setLoading(true);
 		setError(null);
 
 		try {
-			const res = await post<R>(endpoint, body, config);
+			const res = await post<ApiResponse>(endpoint, body, config);
 			return res.data;
 		} catch (err: any) {
-			setError(err?.message ?? "Unknown error");
+			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
+			setError(errMsg);
 			return null;
 		} finally {
 			setLoading(false);
diff --git a/client/src/Pages/v2/Auth/Login.tsx b/client/src/Pages/v2/Auth/Login.tsx
index 6a76fdf76..16c40d5d9 100644
--- a/client/src/Pages/v2/Auth/Login.tsx
+++ b/client/src/Pages/v2/Auth/Login.tsx
@@ -14,15 +14,11 @@ const schema = z.object({
 });
 
 type FormData = z.infer<typeof schema>;
-type LoginData = {
-	username: string;
-	password: string;
-};
 
 const Login = () => {
 	const { t } = useTranslation();
 	const theme = useTheme();
-	const { post, loading, error } = usePost<FormData, LoginData>("/auth/login");
+	const { post, loading, error } = usePost<FormData>("/auth/login");
 
 	const {
 		handleSubmit,
@@ -39,7 +35,7 @@ const Login = () => {
 	const onSubmit = async (data: FormData) => {
 		const result = await post(data);
 		if (result) {
-			console.log("Login successful:", result);
+			console.log(result.message);
 		} else {
 			console.error("Login failed:", error);
 		}
diff --git a/client/src/Utils/Theme/v2/theme.ts b/client/src/Utils/Theme/v2/theme.ts
index f262386ce..55d2b9bb9 100644
--- a/client/src/Utils/Theme/v2/theme.ts
+++ b/client/src/Utils/Theme/v2/theme.ts
@@ -12,6 +12,27 @@ export const theme = (mode: string, palette: any) =>
 		typography: {
 			fontFamily: fontFamilyPrimary,
 			fontSize: typographyLevels.base,
+			h1: {
+				fontSize: typographyLevels.xl,
+				color: palette.primary.contrastText,
+				fontWeight: 500,
+			},
+			h2: {
+				fontSize: typographyLevels.l,
+				color: palette.primary.contrastTextSecondary,
+				fontWeight: 400,
+			},
+
+			body1: {
+				fontSize: typographyLevels.m,
+				color: palette.primary.contrastTextTertiary,
+				fontWeight: 400,
+			},
+			body2: {
+				fontSize: typographyLevels.s,
+				color: palette.primary.contrastTextTertiary,
+				fontWeight: 400,
+			},
 		},
 
 		components: {