Little icons changes for tasks

src/elements/task.js

@@ -1,9 +1,34 @@
 import generateElement from "../modules/genElement";
-import { createElement as createIcon, Trash, Pencil, Star, AlarmClock } from 'lucide';
+import { createElement as createIcon, Trash, Pencil, Star, AlarmClock, Archive } from 'lucide';
 import { format, isPast } from 'date-fns';
 import { idValue } from "../modules/refreshDOM";
 
 function generateTask(title, description, dueDate, priority, done) {
+
+    const css = {};
+    css.doneCheck = "peer-checked/done";
+    css.doneColor = `${css.doneCheck}:text-slate-300`;
+    css.doneStrike = `${css.doneCheck}:line-through`;
+
+    const icons = Object.create({
+        stroke(icon, stroke) {
+            icon.classList.add(`*:stroke-${stroke}`);
+            return icon;
+        },
+        get trash() {
+            const icon = createIcon(Trash);
+            return this.stroke(icon, 1);
+        },
+        get edit() {
+            const icon = createIcon(Pencil);
+            return this.stroke(icon, 1);
+        },
+        get archive() {
+            const icon = createIcon(Archive);
+            return this.stroke(icon, 1);
+        },
+    })
+
     const task = generateElement({
         element: "div",
         className: "task flex gap-2 justify-between",
@@ -12,7 +37,7 @@ function generateTask(title, description, dueDate, priority, done) {
     const doneElement = generateElement({
         element: "input",
         type: "checkbox",
-        className: "done block",
+        className: "done block peer/done",
         checked: done,
     })
     const priorityCheckbox = generateElement({
@@ -24,42 +49,52 @@ function generateTask(title, description, dueDate, priority, done) {
     const priorityElement = generateElement({
         element: "label",
         "_for": `priority-${idValue.val}`,
-        className: `priority peer-checked/priority:bg-yellow-500 block cursor-pointer"`,
+        className: `priority peer-checked/priority:*:fill-yellow-500
+                    peer-checked/priority:*:stroke-yellow-500 block
+                    cursor-pointer *:stroke-slate-300 *:stroke-1
+                    peer-checked/priority:*:stroke-2
+                    
+                    peer-checked/priority/done:*:bg-yellow-500`,
     })
     priorityElement.append(createIcon(Star));
     const titleElement = generateElement({
         element: "div",
-        className: "title block",
+        className: `title block ${css.doneStrike} ${css.doneColor}`,
         innerHTML: `${title}`,
     })
     const descriptionElement = generateElement({
         element: "div",
-        className: "description block flex-1",
+        className: `description block flex-1 ${css.doneColor} ${css.doneStrike}`,
         innerHTML: `${description}`,
     })
     function bodge() {
-        let icon = createIcon(AlarmClock); icon.classList.add("inline-block"); return icon.outerHTML;
+        let icon = createIcon(AlarmClock); icon.classList.add("inline-block", "*:stroke-1"); return icon.outerHTML;
     }
     const dueDateElement = generateElement({
         element: "div",
-        className: `due-date block${isPast(dueDate) ? ` text-red-300` : ""}`,
+        className: `due-date block${isPast(dueDate) ? ` text-red-300 ${css.doneColor} ${css.doneStrike}` : ""} flex gap-1`,
         innerHTML: `${dueDate ? `${bodge()}` + format(dueDate, "dd.MM.yyyy hh:mm") : ""}`,
     })
-    const changeDetailsButton = generateElement({
+    const changeDetailsBtn = generateElement({
         element: "button",
         className: "change-details block",
     })
-    changeDetailsButton.append(createIcon(Pencil));
+    changeDetailsBtn.append(icons.edit);
-    const removeButton = generateElement({
+    const archiveBtn = generateElement({
+        element: "button",
+        className: "archive block",
+    })
+    archiveBtn.append(icons.archive);
+    const removeBtn = generateElement({
         element: "button",
         className: "remove block",
     })
-    removeButton.append(createIcon(Trash));
+    removeBtn.append(icons.trash);
 
     task.append(
         doneElement, priorityCheckbox, priorityElement,
         titleElement, descriptionElement, dueDateElement,
-        changeDetailsButton, removeButton
+        changeDetailsBtn, archiveBtn, removeBtn
     );
     idValue.val += 1;
     return task;