Updated styling of many things

frontend/src/components/HUD.tsx

@@ -87,7 +87,7 @@ function HUD({
 							},
 						});
 					}}
-					className="transition-all hover:brightness-125 border border-primary-content rounded ml-2 bg-accent h-8 w-8 flex items-center justify-center"
+					className="transition-all hover:brightness-125 border border-primary-content rounded-md ml-2 bg-accent h-8 w-8 flex items-center justify-center"
 				>
 					<svg
 						className="fill-primary-content"
@@ -101,7 +101,7 @@ function HUD({
 				</button>
 				<button
 					onClick={handleDelete}
-					className="transition-all hover:brightness-125 border border-primary-content rounded ml-2 bg-error h-8 w-8 flex items-center justify-center"
+					className="transition-all hover:brightness-125 border border-primary-content rounded-md ml-2 bg-error h-8 w-8 flex items-center justify-center"
 				>
 					<svg
 						className="fill-primary-content"

frontend/src/components/TaskCard.tsx

@@ -83,7 +83,7 @@ function TaskCard({
 								e.stopPropagation();
 								handleEdit();
 							}}
-							className="hover:brightness-125 border border-primary-content rounded bg-tertiary h-6 w-6 flex items-center justify-center"
+							className="transition-all hover:brightness-125 border border-primary-content rounded bg-tertiary h-6 w-6 flex items-center justify-center"
 						>
 							<svg
 								className="fill-primary-content"
@@ -100,7 +100,7 @@ function TaskCard({
 								e.stopPropagation();
 								handleDelete();
 							}}
-							className="hover:brightness-125 border border-primary-content rounded ml-2 bg-tertiary h-6 w-6 flex items-center justify-center"
+							className="transition-all hover:brightness-125 border border-primary-content rounded ml-2 bg-error h-6 w-6 flex items-center justify-center"
 						>
 							<svg
 								className="fill-primary-content"

frontend/src/components/modals/Settings.tsx

@@ -45,7 +45,7 @@ function Avatar() {
 				width={200}
 				height={200}
 				border={50}
-				color={[255, 255, 255, 0.5]}
+				color={[137, 87, 229, 0.5]}
 				borderRadius={200}
 				scale={zoom}
 				rotate={0}

frontend/src/index.css

@@ -86,9 +86,9 @@
 		font-size: 1.1rem;
 		text-align: center;
 		margin: 2px 0px 10px;
-		background-color: theme('colors.tertiary');
+		background-color: theme('colors.quaternary');
 		border: 1px solid theme('colors.tertiary');
-		/* border-radius: 8px; */
+		border-radius: 4px;
 	}
 }
 

frontend/src/pages/Dashboard.tsx

@@ -5,7 +5,7 @@ function Dashboard() {
 		<div className="base-page flex justify-start">
 			<Navbar />
 			<div className='h-full w-full flex justify-center items-center font-bold'>
-				Coming soon...
+				This Page Is Still Under Development...
 			</div>
 		</div>
 	);

frontend/src/pages/LandingPage.tsx

@@ -33,10 +33,10 @@ function LandingPage() {
 				<ul className="hidden items-end text-xl gap-4 font-semibold md:flex">
 					<li>
 						<a
-							className="svg-icon mr-2 text-2xl flex items-end gap-2 text-primary-content hover:text-accent transition-all"
+							className="svg-icon mr-1 text-2xl flex items-center gap-2 text-primary-content hover:text-accent transition-all"
 							href="/"
 						>
-							<Icon className="fill-primary-content h-7" />
+							<Icon className="fill-primary-content h-[24px] mt-0.5 -mr-1" />
 							Dtboard
 						</a>
 					</li>

frontend/tailwind.config.js

@@ -1,74 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: [],
 	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 	theme: {
 		extend: {
 			colors: {
 				primary: '#0f0f0f',
-
 				'primary-content': '#c9c9c9',
-
 				secondary: '#181818',
-
 				'secondary-content': '#c9c9c9',
-
+				tertiary: '#242424',
+				'tertiary-content': '#c9c9c9',
+				quaternary: '#4a4a4a',
+				'quaternary-content': '#c9c9c9',
 				accent: '#8957e5',
-
 				'accent-content': '#0f0f0f',
-
 				neutral: '#3b3b3b',
-
 				info: '#67e8f9',
-
 				success: '#307530',
-
 				warning: '#fde047',
-
-				error: '#b82323',
-
-				tertiary: '#242424',
-
-				'tertiary-content': '#c9c9c9',
-
-				quaternary: '#4a4a4a',
-
-				'quaternary-content': '#c9c9c9',
-
-				quinary: '',
-
-				'quinary-content': '#c9c9c9',
-			},
-			border: {
-				radius: '4px',
+				error: '#F23F43',
 			},
 		},
 	},
 	daisyui: {
 		themes: [
 			{
 				mytheme: {
-					primary: '#0f0f0f',
-
-					'primary-content': '#c9c9c9',
-
-					secondary: '#181818',
-
-					'secondary-content': '#c9c9c9',
-
-					accent: '#8957e5',
-
-					'accent-content': '#0f0f0f',
-
-					neutral: '#3b3b3b',
-
-					info: '#67e8f9',
-
-					success: '#307530',
-
-					warning: '#fde047',
-
-					error: '#b82323',
+					primary: 'colors.primary',
+					'primary-content': 'colors.primary-content',
+					secondary: 'colors.secondary',
+					'secondary-content': 'colors.secondary-content',
+					accent: 'colors.accent',
+					'accent-content': 'colors.accent-content',
+					neutral: 'colors.neutral',
+					info: 'colors.info',
+					success: 'colors.success',
+					warning: 'colors.warning',
+					error: 'colors.error',
 				},
 			},
 		],

notes.md

@@ -85,6 +85,8 @@ cluegi
 - validate big dates
 - validate uploaded pictures mroe
 - trim inputs
+- write jest tests
+- write husky pre commit hooks
 
 ## UX