From 17553b7f1e1f8da61ab5910010147575231b6bc1 Mon Sep 17 00:00:00 2001
From: me3za <medkrix1@gmail.com>
Date: Sun, 31 Mar 2024 07:10:18 +0000
Subject: [PATCH] Added some icons next to buttons to improve UX

---
 frontend/src/components/Navbar.tsx            | 10 ++++++----
 frontend/src/components/modals/Settings.tsx   |  2 +-
 .../components/modals/TaskCreationForm.tsx    | 14 ++++++++++++--
 .../src/components/modals/TaskEditForm.tsx    | 11 ++++++++++-
 frontend/src/pages/LandingPage.tsx            |  2 +-
 notes.md                                      | 19 +++----------------
 6 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a4be91a..497096b 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -65,23 +65,25 @@ const DropdownContainer = ({
 
 	if (menuOpen) {
 		return (
-			<div className="bg-secondary border-[1px] border-tertiary absolute bottom-2 left-16 ml-1 w-36 h-40 flex flex-col justify-center items-center">
+			<div className="bg-secondary border-[1px] border-tertiary absolute bottom-2 left-16 ml-1 w-36 h-40 flex flex-col gap-5 justify-center items-center">
 				<button
-					className="mb-2 hover:filter hover:brightness-125 transition-all font-semibold"
+					className="flex items-center mt-2 hover:filter hover:brightness-125 transition-all font-semibold"
 					onClick={() => {
 						setModal({ type: 'Settings' });
 						setMenuOpen(false);
 					}}
 				>
+					<svg className="mr-1 mt-1 fill-primary-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14"><path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path></svg>
 					Settings
 				</button>
-				<div className="w-[70%] mx-0.5 mt-1.5 mb-1.5 h-[1px] bg-tertiary"></div>
+				<div className="w-[70%] mx-0.5 h-[1px] bg-tertiary"></div>
 				<button
-					className="mt-2 hover:filter hover:brightness-125 transition-all font-semibold"
+					className="flex items-center hover:filter hover:brightness-125 transition-all font-semibold"
 					onClick={() => {
 						logout();
 					}}
 				>
+					<svg className="mr-1 mt-1 fill-primary-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14"><path d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm10.44 4.5-1.97-1.97a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.97-1.97H6.75a.75.75 0 0 1 0-1.5Z"></path></svg>
 					Log out
 				</button>
 			</div>
diff --git a/frontend/src/components/modals/Settings.tsx b/frontend/src/components/modals/Settings.tsx
index 4b4da69..73aa46f 100644
--- a/frontend/src/components/modals/Settings.tsx
+++ b/frontend/src/components/modals/Settings.tsx
@@ -105,7 +105,7 @@ function SettingsModal() {
 		<div className="text-primary-content flex flex-col justify-between pb-2 px-12">
 			<div className="flex items-center justify-center">
 				<h1 className="mb-5 mt-2 flex items-center justify-center font-semibold text-xl w-full">
-					Settings
+					<svg className="mr-1 mt-0.5 fill-primary-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="17" height="17"><path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path></svg>Settings
 				</h1>
 			</div>
 			<div className="mt-2">
diff --git a/frontend/src/components/modals/TaskCreationForm.tsx b/frontend/src/components/modals/TaskCreationForm.tsx
index 258ac3d..bff1258 100644
--- a/frontend/src/components/modals/TaskCreationForm.tsx
+++ b/frontend/src/components/modals/TaskCreationForm.tsx
@@ -57,8 +57,18 @@ function TaskCreationForm({
 					className="flex flex-col items-stretch w-96"
 					onSubmit={handleSubmit}
 				>
-					<h1 className="bg-accent mb-5 mt-2 flex items-center justify-center font-semibold text-xl w-full">
-						Create a new Task
+					<h1 className="mb-5 mt-2 flex items-center justify-center font-semibold text-xl w-full">
+						<svg
+						className="mr-1 mt-0.5 fill-primary-content"
+
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							width="16"
+							height="16"
+						>
+							<path d="M2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25V2.75C1 1.784 1.784 1 2.75 1Zm10.5 1.5H2.75a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25ZM8 4a.75.75 0 0 1 .75.75v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5A.75.75 0 0 1 8 4Z"></path>
+						</svg>
+						Create New Task
 					</h1>
 					<div className="flex flex-col">
 						<label htmlFor="title" className="font-semibold">
diff --git a/frontend/src/components/modals/TaskEditForm.tsx b/frontend/src/components/modals/TaskEditForm.tsx
index 40dbd61..5d2f90f 100644
--- a/frontend/src/components/modals/TaskEditForm.tsx
+++ b/frontend/src/components/modals/TaskEditForm.tsx
@@ -58,7 +58,16 @@ function TaskEditForm({
 					className="flex flex-col items-stretch w-96"
 					onSubmit={handleSubmit}
 				>
-					<h1 className="bg-tertiary mb-5 mt-2 flex items-center justify-center font-semibold text-xl w-full">
+					<h1 className="mb-5 mt-2 flex items-center justify-center font-semibold text-xl w-full">
+						<svg
+						className="mr-1 mt-0.5 fill-primary-content"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							width="16"
+							height="16"
+						>
+							<path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
+						</svg>
 						Edit Task
 					</h1>
 					<label htmlFor="title" className="font-semibold">
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index af3f595..72424b6 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -61,7 +61,7 @@ function LandingPage() {
 				</ul>
 				<Link
 					to="/login"
-					className="bg-quaternary transition-all flex items-center justify-center px-4 text-lg font-bold rounded-md w-24 h-10 border-2 border-accent text-primary-content hover:bg-accent hover:text-primary-content"
+					className="bg-quaternary transition-all flex items-center justify-center px-4 text-lg font-bold rounded-md w-24 h-10 border-2 focus:outline focus:outline-2 focus:outline-primary-content border-accent text-primary-content hover:bg-accent hover:text-primary-content"
 				>
 					Log In
 				</Link>
diff --git a/notes.md b/notes.md
index 9d1b148..8a566fe 100644
--- a/notes.md
+++ b/notes.md
@@ -52,12 +52,10 @@ cluegi
 - set a small horizontal bar that differentiates tasks based on priority (they should be sorted).
 - rich markdown text editor for notes component that behaves like discord text form parsing.
 - configure shadcn and use it for all complex components
-- add congratulations visualizers and dopamine pushes
-- make a custom confirm function that when called triggered a state somehow and returns either true or false
+- make a custom confirm function that when called triggers a state somehow and returns either true or false
 - add first name and last name change in settings
 - add ability to edit cycle start or end
-- add cycle time left
-- styling of completion on firefox does not have a border radius!!
+- add congratulations visualizers and dopamine pushes
 
 ### Yapping
 
@@ -65,29 +63,18 @@ cluegi
   - task context menu https://www.radix-ui.com/primitives/docs/components/context-menu
 - add feature to make checkboxes in description of tasks
 - indcator for end of debounce and successful api request
-- show completion of each task as a number!!!!!
-- everything looks clickable in task card because theres no indicator to whtas clickable and whats not!!
-- priority isnt visible in the ui of the task !!!
-- add some sort of explanation or something to show what the app is about in the home no board window
 - home page should not immediately load last unarchived role, add possiblity to load archived roles even if theres unarchived one !!!!
-- make an about modal that has licensing and note from creator (me :))
-- make a settings page
 - use ICONS MORE for better ux !!!
 - improve settings layout
 - fix insane number of api calls
 - figure out a good way to do logging
-- create a workflow for CI/CD
 - fix envs for contirbutors
 - make wesbite inaccesisble from phone
 - unify the css for buttons
-- figure out why nan in prod time left
 - handle uncaught execptions that would block the app such failed mail sending
-- validate big dates
 - validate uploaded pictures mroe
 - trim inputs
 - write jest tests
 - write husky pre commit hooks
-
-## UX
-
+- daisy ui navbar hover dialog bug
 - implement github/google OAUTH to make it easier for users to opt in to the app