add v2 login page

client/src/Utils/ApiClient.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+const BASE_URL = import.meta.env.VITE_APP_API_V2_BASE_URL;
+
+const api = axios.create({
+	baseURL: BASE_URL || "http://localhost:55555/api/v2",
+	withCredentials: true,
+});
+
+export const get = <T>(
+	url: string,
+	config: AxiosRequestConfig = {}
+): Promise<AxiosResponse<T>> => api.get<T>(url, config);
+
+export const post = <T>(
+	url: string,
+	data: any,
+	config: AxiosRequestConfig = {}
+): Promise<AxiosResponse<T>> => api.post<T>(url, data, config);
+
+export default api;

client/src/Utils/Theme/constants.js

@@ -100,7 +100,6 @@ const newColors = {
 	blueGray900: "#515151",
 	blueBlueWave: "#1570EF",
 	lightBlueWave: "#CDE2FF",
-	/* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */
 	green100: "#67cd78",
 	green200: "#4B9B77",
 	green400: "#079455",

client/src/Utils/Theme/v2/palette.ts

@@ -0,0 +1,82 @@
+import { lighten, darken } from "@mui/material/styles";
+
+const typographyBase = 13;
+
+export const typographyLevels = {
+	base: typographyBase,
+	xs: `${(typographyBase - 4) / 16}rem`,
+	s: `${(typographyBase - 2) / 16}rem`,
+	m: `${typographyBase / 16}rem`,
+	l: `${(typographyBase + 2) / 16}rem`,
+	xl: `${(typographyBase + 10) / 16}rem`,
+};
+
+const colors = {
+	offWhite: "#FEFEFE",
+	offBlack: "#131315",
+	gray0: "#FDFDFD",
+	gray10: "#F4F4FF",
+	gray50: "#F9F9F9",
+	gray100: "#F3F3F3",
+	gray200: "#EFEFEF",
+	gray250: "#DADADA",
+	gray500: "#A2A3A3",
+	gray900: "#1c1c1c",
+	blueGray50: "#E8F0FE",
+	blueGray500: "#475467",
+	blueGray600: "#344054",
+	blueGray800: "#1C2130",
+	blueGray900: "#515151",
+	blueBlueWave: "#1570EF",
+	lightBlueWave: "#CDE2FF",
+	green100: "#67cd78",
+	green200: "#4B9B77",
+	green400: "#079455",
+	green700: "#026513",
+	orange100: "#FD8F22",
+	orange200: "#D69A5D",
+	orange600: "#9B734B",
+	orange700: "#884605",
+	red100: "#F27C7C",
+	red400: "#D92020",
+	red600: "#9B4B4B",
+	red700: "#980303",
+};
+
+export const lightPalette = {
+	accent: {
+		main: colors.blueBlueWave,
+		light: lighten(colors.blueBlueWave, 0.2),
+		dark: darken(colors.blueBlueWave, 0.2),
+		contrastText: colors.offWhite,
+	},
+	primary: {
+		main: colors.offWhite,
+		contrastText: colors.blueGray800,
+		contrastTextSecondary: colors.blueGray600,
+	},
+	secondary: {
+		main: colors.gray200,
+		light: colors.lightBlueWave,
+		contrastText: colors.blueGray600,
+	},
+};
+
+export const darkPalette = {
+	accent: {
+		main: colors.blueBlueWave,
+		light: lighten(colors.blueBlueWave, 0.2),
+		dark: darken(colors.blueBlueWave, 0.2),
+		contrastText: colors.offWhite,
+	},
+	primary: {
+		main: colors.offBlack,
+		contrastText: colors.blueGray50,
+		contrastTextSecondary: colors.gray200,
+	},
+	secondary: {
+		main: "#313131",
+		light: colors.lightBlueWave,
+		contrastText: colors.gray200,
+	},
+};

client/src/Utils/Theme/v2/theme.ts

@@ -0,0 +1,52 @@
+import { createTheme } from "@mui/material";
+import { lightPalette, darkPalette, typographyLevels } from "./palette";
+const fontFamilyPrimary = '"Inter" , sans-serif';
+
+export const theme = (mode: string, palette: any) =>
+	createTheme({
+		spacing: 2,
+		palette: {
+			mode: mode,
+			...palette,
+		},
+		typography: {
+			fontFamily: fontFamilyPrimary,
+			fontSize: typographyLevels.base,
+		},
+
+		components: {
+			MuiFormLabel: {
+				styleOverrides: {
+					root: ({ theme }) => ({
+						fontSize: typographyLevels.base,
+						"&.Mui-focused": {
+							color: theme.palette.secondary.contrastText,
+						},
+					}),
+				},
+			},
+			MuiInputLabel: {
+				styleOverrides: {
+					root: ({ theme }) => ({
+						top: `-${theme.spacing(4)}`,
+						"&.MuiInputLabel-shrink": {
+							top: 0,
+						},
+					}),
+				},
+			},
+			MuiTextField: {
+				styleOverrides: {
+					root: ({ theme }) => ({
+						"& .MuiOutlinedInput-root": {
+							height: 34,
+							fontSize: typographyLevels.base,
+						},
+					}),
+				},
+			},
+		},
+	});
+
+export const lightTheme = createTheme(theme("light", lightPalette));
+export const darkTheme = createTheme(theme("dark", darkPalette));