Applied changes to the edit and delete icons colors and to the dialog…

… buttons opacity
the-collab-lab · Oct 12, 2024 · 469508c · 469508c
1 parent 293f9bf
commit 469508c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -117,7 +117,7 @@ export function ListItem({
 					<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
 						<DialogTrigger asChild>
 							<Button className="bg-transparent hover:bg-transparent p-0">
-								<Pencil className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
+								<Pencil className="w-5 h-5 text-light-grey hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
 							</Button>
 						</DialogTrigger>
 						<DialogContent>
@@ -146,7 +146,7 @@ export function ListItem({
 								id={id}
 								onClick={() => setIsAlertOpen(true)}
 							>
-								<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
+								<Trash2 className="w-5 h-5 text-gray-600 hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
 							</Button>
 						</AlertDialogTrigger>
 						<AlertDialogContent className="p-6 sm:p-10">
@@ -167,7 +167,7 @@ export function ListItem({
 									Cancel
 								</AlertDialogCancel>
 								<AlertDialogAction
-									className="bg-primary-pink text-white hover:bg-opacity-75 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
+									className="bg-primary-pink text-white hover:bg-opacity-90 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
 									onClick={handleDelete}
 								>
 									Delete

diff --git a/src/components/ManageListForms/AddItemForm.jsx b/src/components/ManageListForms/AddItemForm.jsx
@@ -98,7 +98,10 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 							name="timeFrame"
 							className="border  border-soon text-soon"
 						/>
-						<label htmlFor="soon" className="font-semibold text-sm">
+						<label
+							htmlFor="soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Soon
 						</label>
 					</div>
@@ -109,13 +112,19 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 							name="timeFrame"
 							className="border border-kind-of-soon text-kind-of-soon"
 						/>
-						<label htmlFor="kind-of-soon" className="font-semibold text-sm">
+						<label
+							htmlFor="kind-of-soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Kind of soon
 						</label>
 					</div>
 					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
-						<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
-						<label htmlFor="not of soon" className="font-semibold text-sm">
+						<RadioGroupItem value="30" id="not-soon" name="timeFrame" />
+						<label
+							htmlFor="not-soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Not soon
 						</label>
 					</div>
@@ -141,7 +150,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 			<div className="flex w-full">
 				<Button
 					type="submit"
-					className="bg-primary-pink text-black rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-80 text-sm p-6"
+					className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-90 text-sm p-6"
 				>
 					Add Item
 				</Button>

diff --git a/src/components/ManageListForms/EditItemForm.jsx b/src/components/ManageListForms/EditItemForm.jsx
@@ -126,7 +126,10 @@ export default function EditItemForm({
 							name="timeFrame"
 							className="border border-soon text-soon"
 						/>
-						<label htmlFor="soon" className="font-semibold text-sm">
+						<label
+							htmlFor="soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Soon
 						</label>
 					</div>
@@ -137,13 +140,19 @@ export default function EditItemForm({
 							name="timeFrame"
 							className="border border-kind-of-soon text-kind-of-soon"
 						/>
-						<label htmlFor="kind-of-soon" className="font-semibold text-sm">
+						<label
+							htmlFor="kind-of-soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Kind of soon
 						</label>
 					</div>
 					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
-						<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
-						<label htmlFor="not of soon" className="font-semibold text-sm">
+						<RadioGroupItem value="30" id="not-soon" name="timeFrame" />
+						<label
+							htmlFor="not-soon"
+							className="font-semibold text-sm cursor-pointer"
+						>
 							Not soon
 						</label>
 					</div>
@@ -169,7 +178,7 @@ export default function EditItemForm({
 			<div className="flex w-full">
 				<Button
 					type="submit"
-					className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
+					className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-90 text-sm"
 				>
 					Apply Changes
 				</Button>

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -79,7 +79,7 @@ export function List({ data, listPath, listName }) {
 						<Button className="bg-transparent hover:bg-transparent p-0">
 							<SquarePlus
 								aria-label="Add a new item"
-								className="h-7 w-7 text-primary-green dark:text-primary-pink  transition-opacity hover:opacity-75"
+								className="h-7 w-7 text-primary-green dark:text-primary-pink transition-opacity hover:opacity-75"
 							/>
 						</Button>
 					</DialogTrigger>