feat: finishing adjusting colors

Client/src/Components/BasicTable/index.jsx

@@ -201,7 +201,27 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
 	return (
 		<>
 			<TableContainer component={Paper}>
-				<Table>
+				<Table
+					sx={{
+						"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
+							paddingLeft: theme.spacing(12),
+						},
+						"& th": {
+							backgroundColor: theme.palette.secondary.main,
+							color: theme.palette.secondary.contrastText,
+							/* 
+						TODO all general styling for th should live here
+					 */
+						},
+						"& td": {
+							backgroundColor: theme.palette.primary.main,
+							color: theme.palette.primary.contrastTextSecondary,
+							/* 
+						TODO all general styling for td should live here
+					 */
+						},
+					}}
+				>
 					<TableHead>
 						<TableRow>
 							{data.cols.map((col) => (

Client/src/Components/TabPanels/Account/PasswordPanel.jsx

@@ -228,7 +228,7 @@ const PasswordPanel = () => {
 				>
 					<LoadingButton
 						variant="contained"
-						color="primary"
+						color="accent"
 						type="submit"
 						loading={isLoading}
 						loadingIndicator="Saving..."

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -344,7 +344,7 @@ const ProfilePanel = () => {
 					<Box width="fit-content">
 						<LoadingButton
 							variant="contained"
-							color="primary"
+							color="accent"
 							onClick={handleSaveProfile}
 							loading={isLoading}
 							loadingIndicator="Saving..."

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -242,7 +242,7 @@ const TeamPanel = () => {
 					<LoadingButton
 						loading={isSendingInvite}
 						variant="contained"
-						color="primary"
+						color="accent"
 						onClick={() => setIsOpen(true)}
 					>
 						Invite a team member

Client/src/Pages/Account/index.jsx

@@ -57,10 +57,10 @@ const Account = ({ open = "profile" }) => {
 			className="account"
 			px={theme.spacing(20)}
 			py={theme.spacing(12)}
-			border={1}
-			borderColor={theme.palette.primary.lowContrast}
-			borderRadius={theme.shape.borderRadius}
 			backgroundColor={theme.palette.primary.main}
+			borderColor={theme.palette.primary.lowContrast}
+			border={1}
+			borderRadius={theme.shape.borderRadius}
 		>
 			<TabContext value={tab}>
 				<Box
@@ -88,17 +88,18 @@ const Account = ({ open = "profile" }) => {
 									textTransform: "none",
 									minWidth: "fit-content",
 									minHeight: 0,
-									paddingLeft: 0,
 									paddingY: theme.spacing(4),
 									fontWeight: 400,
-									marginRight: theme.spacing(8),
+									/* marginRight: theme.spacing(8), */
 									borderBottom: "2px solid transparent",
-									"&:focus": {
-										borderBottom: `2px solid ${theme.palette.primary.lowContrast}`,
+									"&:focus, &.Mui-selected": {
+										/* TODO this appears and disapears. Investigate */
+										color: theme.palette.primary.contrastText,
+										borderColor: theme.palette.primary.contrastText,
+										fontWeight: 700,
 									},
-
 									"&:hover": {
-										borderBottom: `2px solid ${theme.palette.primary.lowContrast}`,
+										borderColor: theme.palette.primary.lowContrast,
 									},
 								}}
 							/>