From 06f50c147a257c97318e35bcf51f339b492420db Mon Sep 17 00:00:00 2001
From: Marco Schlesier <marco.schlesier@de.zuken.com>
Date: Thu, 14 Sep 2023 11:30:56 +0200
Subject: [PATCH 1/2] edit todo items

---
 src/renderer/src/AppContext.jsx             | 167 ++++++-------
 src/renderer/src/components/Item.jsx        | 152 +++++++-----
 src/renderer/src/components/Item.module.css | 245 +++++++++++---------
 src/renderer/src/img/edit.svg               |   6 +
 4 files changed, 319 insertions(+), 251 deletions(-)
 create mode 100644 src/renderer/src/img/edit.svg

diff --git a/src/renderer/src/AppContext.jsx b/src/renderer/src/AppContext.jsx
index eea5356..e29e0b1 100644
--- a/src/renderer/src/AppContext.jsx
+++ b/src/renderer/src/AppContext.jsx
@@ -5,107 +5,108 @@ import { format } from "date-fns";
 export const AppContext = createContext();
 
 export function useAppState() {
-	return useContext(AppContext)[0];
+  return useContext(AppContext)[0];
 }
 
 export function useAppReducer() {
-	return useContext(AppContext)[1];
+  return useContext(AppContext)[1];
 }
 
 export function useItems() {
-	const { items } = useAppState();
+  const { items } = useAppState();
 
-	const pending = items.filter((item) => item.status === "pending");
-	const paused = items.filter((item) => item.status === "paused");
-	const completed = items.filter((item) => item.status === "completed");
+  const pending = items.filter((item) => item.status === "pending");
+  const paused = items.filter((item) => item.status === "paused");
+  const completed = items.filter((item) => item.status === "completed");
 
-	return { pending, paused, completed };
+  return { pending, paused, completed };
 }
 
 const appStateReducer = (state, action) => {
-	let nd = new Date();
+  let nd = new Date();
 
-	let currentDate = {
-		day: format(nd, "dd"),
-		dayDisplay: format(nd, "d"),
-		month: format(nd, "MM"),
-		monthDisplay: format(nd, "MMM"),
-		year: format(nd, "y"),
-		weekday: format(nd, "EEEE"),
-	};
+  let currentDate = {
+    day: format(nd, "dd"),
+    dayDisplay: format(nd, "d"),
+    month: format(nd, "MM"),
+    monthDisplay: format(nd, "MMM"),
+    year: format(nd, "y"),
+    weekday: format(nd, "EEEE"),
+  };
 
-	switch (action.type) {
-		case "ADD_ITEM": {
-			const newState = { ...state, items: state.items.concat(action.item) };
-			saveState(newState);
-			return newState;
-		}
-		case "UPDATE_ITEM": {
-			const newItems = state.items.map((i) => {
-				if (i.key === action.item.key) {
-					return Object.assign({}, i, {
-						status: action.item.status,
-					});
-				}
-				return i;
-			});
-			const newState = { ...state, items: newItems };
-			saveState(newState);
-			return newState;
-		}
-		case "DELETE_ITEM": {
-			const newState = {
-				...state,
-				items: state.items.filter((item) => item.key !== action.item.key),
-			};
-			saveState(newState);
-			return newState;
-		}
-		case "RESET_ALL": {
-			const newItems = state.items
-				.filter((item) => item.status !== "completed")
-				.map((i) => {
-					if (i.status === "paused") {
-						return Object.assign({}, i, {
-							status: "pending",
-						});
-					}
-					return i;
-				});
-			const newState = { ...state, items: newItems, date: currentDate };
-			saveState(newState);
-			return newState;
-		}
-		default:
-			return state;
-	}
+  switch (action.type) {
+    case "ADD_ITEM": {
+      const newState = { ...state, items: state.items.concat(action.item) };
+      saveState(newState);
+      return newState;
+    }
+    case "UPDATE_ITEM": {
+      const newItems = state.items.map((i) => {
+        if (i.key === action.item.key) {
+          return Object.assign({}, i, {
+            status: action.item.status,
+            text: action.item.text,
+          });
+        }
+        return i;
+      });
+      const newState = { ...state, items: newItems };
+      saveState(newState);
+      return newState;
+    }
+    case "DELETE_ITEM": {
+      const newState = {
+        ...state,
+        items: state.items.filter((item) => item.key !== action.item.key),
+      };
+      saveState(newState);
+      return newState;
+    }
+    case "RESET_ALL": {
+      const newItems = state.items
+        .filter((item) => item.status !== "completed")
+        .map((i) => {
+          if (i.status === "paused") {
+            return Object.assign({}, i, {
+              status: "pending",
+            });
+          }
+          return i;
+        });
+      const newState = { ...state, items: newItems, date: currentDate };
+      saveState(newState);
+      return newState;
+    }
+    default:
+      return state;
+  }
 };
 
 export function AppStateProvider({ children }) {
-	let initialState = loadState();
+  let initialState = loadState();
 
-	if (initialState === undefined) {
-		let nd = new Date();
+  if (initialState === undefined) {
+    let nd = new Date();
 
-		initialState = {
-			items: [],
-			date: {
-				day: format(nd, "dd"),
-				dayDisplay: format(nd, "d"),
-				month: format(nd, "MM"),
-				monthDisplay: format(nd, "MMM"),
-				year: format(nd, "y"),
-				weekday: format(nd, "EEEE"),
-			},
-		};
-	}
+    initialState = {
+      items: [],
+      date: {
+        day: format(nd, "dd"),
+        dayDisplay: format(nd, "d"),
+        month: format(nd, "MM"),
+        monthDisplay: format(nd, "MMM"),
+        year: format(nd, "y"),
+        weekday: format(nd, "EEEE"),
+      },
+    };
+  }
 
-	saveState(initialState);
+  saveState(initialState);
 
-	const value = useReducer(appStateReducer, initialState);
-	return (
-		<div className="App">
-			<AppContext.Provider value={value}>{children}</AppContext.Provider>
-		</div>
-	);
+  const value = useReducer(appStateReducer, initialState);
+  return (
+    <div className="App">
+      <AppContext.Provider value={value}>{children}</AppContext.Provider>
+    </div>
+  );
 }
diff --git a/src/renderer/src/components/Item.jsx b/src/renderer/src/components/Item.jsx
index 9eb6d00..8f6623d 100644
--- a/src/renderer/src/components/Item.jsx
+++ b/src/renderer/src/components/Item.jsx
@@ -1,70 +1,108 @@
+import { useState, useRef } from "react";
 import { useAppReducer } from "../AppContext.jsx";
 import styles from "./Item.module.css";
 
 // Individual todo item
 function Item({ item }) {
-	const dispatch = useAppReducer();
-	let text = item.text;
-	let paused = item.status === "paused";
-	let completed = item.status === "completed";
+  const dispatch = useAppReducer();
 
-	function deleteItem() {
-		dispatch({ type: "DELETE_ITEM", item });
-	}
+  const [isEditMode, setIsEditMode] = useState(false);
+  const editValueRef = useRef(item.text);
 
-	function pauseItem() {
-		const pausedItem = { ...item, status: "paused" };
-		dispatch({ type: "UPDATE_ITEM", item: pausedItem });
-	}
+  let text = item.text;
+  let paused = item.status === "paused";
+  let completed = item.status === "completed";
 
-	function resumeItem() {
-		const pendingItem = { ...item, status: "pending" };
-		dispatch({ type: "UPDATE_ITEM", item: pendingItem });
-	}
+  function deleteItem() {
+    dispatch({ type: "DELETE_ITEM", item });
+  }
 
-	function completeItem() {
-		const completedItem = { ...item, status: "completed" };
-		dispatch({ type: "UPDATE_ITEM", item: completedItem });
-	}
+  function editItem() {
+    const editedValue =
+      editValueRef.current.value === "" ? text : editValueRef.current.value;
+    const editedItem = { ...item, text: editedValue };
+    dispatch({ type: "UPDATE_ITEM", item: editedItem });
+    setIsEditMode(false);
+  }
 
-	return (
-		<div className={styles.item} tabIndex="0">
-			<div className={styles.itemname}>{text}</div>
-			<div
-				className={`${styles.buttons} ${
-					completed ? styles.completedButtons : ""
-				}`}
-			>
-				{completed && <button className={styles.empty} tabIndex="0"></button>}
-				<button
-					className={styles.delete}
-					onClick={deleteItem}
-					tabIndex="0"
-				></button>
-				{!paused && !completed && (
-					<button
-						className={styles.pause}
-						onClick={pauseItem}
-						tabIndex="0"
-					></button>
-				)}
-				{(paused || completed) && (
-					<button
-						className={styles.resume}
-						onClick={resumeItem}
-						tabIndex="0"
-					></button>
-				)}
-				{!completed && (
-					<button
-						className={styles.complete}
-						onClick={completeItem}
-						tabIndex="0"
-					></button>
-				)}
-			</div>
-		</div>
-	);
+  function pauseItem() {
+    const pausedItem = { ...item, status: "paused" };
+    dispatch({ type: "UPDATE_ITEM", item: pausedItem });
+  }
+
+  function resumeItem() {
+    const pendingItem = { ...item, status: "pending" };
+    dispatch({ type: "UPDATE_ITEM", item: pendingItem });
+  }
+
+  function completeItem() {
+    const completedItem = { ...item, status: "completed" };
+    dispatch({ type: "UPDATE_ITEM", item: completedItem });
+  }
+
+  return (
+    <div className={styles.item} tabIndex="0">
+      {isEditMode && (
+        <form onSubmit={() => editItem()} className={styles.editform}>
+          <input
+            ref={editValueRef}
+            defaultValue={text}
+            autoFocus
+            onBlur={() => editItem()}
+          />
+        </form>
+      )}
+      {!isEditMode && (
+        <div
+          className={styles.itemname}
+          onDoubleClick={() => setIsEditMode(true)}
+        >
+          {text}
+        </div>
+      )}
+      {!isEditMode && (
+        <div
+          className={`${styles.buttons} ${
+            completed ? styles.completedButtons : ""
+          }`}
+        >
+          <button
+            className={styles.edit}
+            onClick={() => setIsEditMode(true)}
+            tabIndex="0"
+          ></button>
+          <button
+            className={styles.delete}
+            onClick={deleteItem}
+            tabIndex="0"
+          ></button>
+          {!paused && !completed && (
+            <button
+              className={styles.pause}
+              onClick={pauseItem}
+              tabIndex="0"
+            ></button>
+          )}
+          {(paused || completed) && (
+            <button
+              className={styles.resume}
+              onClick={resumeItem}
+              tabIndex="0"
+            ></button>
+          )}
+          {!completed && (
+            <button
+              className={styles.complete}
+              onClick={completeItem}
+              tabIndex="0"
+            ></button>
+          )}
+
+          {completed && <button className={styles.empty} tabIndex="0"></button>}
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Item;
diff --git a/src/renderer/src/components/Item.module.css b/src/renderer/src/components/Item.module.css
index 7ff8db6..0b1114d 100644
--- a/src/renderer/src/components/Item.module.css
+++ b/src/renderer/src/components/Item.module.css
@@ -1,113 +1,136 @@
 .item {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0 0 10px 0;
-	padding: 20px;
-	width: 100%;
-	min-height: 70px;
-	background: var(--item-color);
-	border: none;
-	border-radius: 3px;
-	box-sizing: border-box;
-	font-size: var(--item-font-size);
-
-	@media (max-width: 600px) {
-		margin: 20px auto;
-	}
-
-	.itemname {
-		width: calc(100% - 110px);
-		overflow: auto;
-
-		&::-webkit-scrollbar {
-			background-color: var(--item-color);
-			height: 0.75em;
-			@media (max-width: 600px) {
-				height: 0.25em;
-			}
-		}
-
-		&::-webkit-scrollbar-thumb:window-inactive,
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg);
-			border: 3px solid var(--item-color);
-			border-left: none;
-			border-right: none;
-			border-radius: 3px;
-		}
-	}
-
-	.buttons {
-		display: flex;
-		justify-content: space-between;
-		width: 100px;
-
-		button {
-			position: relative;
-			height: 24px;
-			border: none;
-
-			/* used as placeholder so the icon spacing is consistent even if there only 2/3 of the buttons in the row */
-			&.empty {
-				width: 24px;
-				background: transparent;
-			}
-
-			&.delete {
-				width: 24px;
-				background: no-repeat url("../img/x.svg");
-				&:after {
-					background: var(--red);
-				}
-			}
-
-			&.pause {
-				width: 24px;
-				background: no-repeat url("../img/pause.svg");
-				&:after {
-					background: var(--yellow);
-				}
-			}
-
-			&.resume {
-				width: 24px;
-				background: no-repeat url("../img/resume.svg");
-				&:after {
-					background: var(--yellow);
-				}
-			}
-
-			&.complete {
-				width: 30px;
-				background: no-repeat url("../img/check.svg");
-				&:after {
-					background: var(--green);
-				}
-			}
-
-			&::after {
-				display: block;
-				content: "";
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				border-radius: 100%;
-				width: 0;
-				height: 0;
-			}
-
-			&:focus {
-				outline: 1px solid var(--item-color);
-				&:after {
-					animation: click 0.5s;
-				}
-			}
-
-			&:hover::after {
-				animation: click 0.5s;
-			}
-		}
-	}
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 10px 0;
+  padding: 20px;
+  width: 100%;
+  min-height: 70px;
+  background: var(--item-color);
+  border: none;
+  border-radius: 3px;
+  box-sizing: border-box;
+  font-size: var(--item-font-size);
+
+  @media (max-width: 600px) {
+    margin: 20px auto;
+  }
+
+  .itemname {
+    width: calc(100% - 110px);
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      background-color: var(--item-color);
+      height: 0.75em;
+      @media (max-width: 600px) {
+        height: 0.25em;
+      }
+    }
+
+    &::-webkit-scrollbar-thumb:window-inactive,
+    &::-webkit-scrollbar-thumb {
+      background: var(--bg);
+      border: 3px solid var(--item-color);
+      border-left: none;
+      border-right: none;
+      border-radius: 3px;
+    }
+  }
+
+  .editform {
+    width: 100%;
+    input {
+      width: 100%;
+      height: 24px;
+	  padding: 0 10px;
+      background: var(--input-color);
+      border: none;
+      border-radius: 3px;
+      box-sizing: border-box;
+      color: var(--font-color);
+      outline: none;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 130px;
+
+    button {
+      position: relative;
+      height: 24px;
+      border: none;
+
+      /* used as placeholder so the icon spacing is consistent even if there only 2/3 of the buttons in the row */
+      &.empty {
+        width: 24px;
+        background: transparent;
+      }
+
+      &.delete {
+        width: 24px;
+        background: no-repeat url("../img/x.svg");
+        &:after {
+          background: var(--red);
+        }
+      }
+
+      &.pause {
+        width: 24px;
+        background: no-repeat url("../img/pause.svg");
+        &:after {
+          background: var(--yellow);
+        }
+      }
+
+      &.resume {
+        width: 24px;
+        background: no-repeat url("../img/resume.svg");
+        &:after {
+          background: var(--yellow);
+        }
+      }
+
+      &.complete {
+        width: 30px;
+        background: no-repeat url("../img/check.svg");
+        &:after {
+          background: var(--green);
+        }
+      }
+
+      &.edit {
+        width: 30px;
+        background: no-repeat url("../img/edit.svg");
+        &:after {
+          background: var(--blue);
+        }
+      }
+
+      &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        width: 0;
+        height: 0;
+      }
+
+      &:focus {
+        outline: 1px solid var(--item-color);
+        &:after {
+          animation: click 0.5s;
+        }
+      }
+
+      &:hover::after {
+        animation: click 0.5s;
+      }
+    }
+  }
 }
diff --git a/src/renderer/src/img/edit.svg b/src/renderer/src/img/edit.svg
new file mode 100644
index 0000000..c9b1726
--- /dev/null
+++ b/src/renderer/src/img/edit.svg
@@ -0,0 +1,6 @@
+<svg width="100%" height="100%" viewBox="0 0 32 25" version="1.1" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" xmlns="http://www.w3.org/2000/svg">
+  <defs></defs>
+  <g id="Rectangle-3" transform="matrix(1.02946,0,0,1.0379,5.48217e-09,-0.00186355)">
+    <path d="M 4.247 16.481 L 27.078 -0.032 L 31.138 5.372 L 7.582 21.678 L 4.887 22.748 L 0.055 24.075 L 2.008 19.458 L 4.247 16.481 Z" style="fill: rgb(98, 155, 220);"></path>
+  </g>
+</svg>
\ No newline at end of file

From 5da608fa4268c09dd6bccfcc6d06a308c5111660 Mon Sep 17 00:00:00 2001
From: Marco Schlesier <marco.schlesier@de.zuken.com>
Date: Thu, 14 Sep 2023 11:57:26 +0200
Subject: [PATCH 2/2] fixed formatting differences

---
 src/renderer/src/AppContext.jsx             | 170 ++++++------
 src/renderer/src/components/Item.jsx        | 188 +++++++-------
 src/renderer/src/components/Item.module.css | 270 ++++++++++----------
 3 files changed, 314 insertions(+), 314 deletions(-)

diff --git a/src/renderer/src/AppContext.jsx b/src/renderer/src/AppContext.jsx
index e29e0b1..8f0535e 100644
--- a/src/renderer/src/AppContext.jsx
+++ b/src/renderer/src/AppContext.jsx
@@ -5,108 +5,108 @@ import { format } from "date-fns";
 export const AppContext = createContext();
 
 export function useAppState() {
-  return useContext(AppContext)[0];
+	return useContext(AppContext)[0];
 }
 
 export function useAppReducer() {
-  return useContext(AppContext)[1];
+	return useContext(AppContext)[1];
 }
 
 export function useItems() {
-  const { items } = useAppState();
+	const { items } = useAppState();
 
-  const pending = items.filter((item) => item.status === "pending");
-  const paused = items.filter((item) => item.status === "paused");
-  const completed = items.filter((item) => item.status === "completed");
+	const pending = items.filter((item) => item.status === "pending");
+	const paused = items.filter((item) => item.status === "paused");
+	const completed = items.filter((item) => item.status === "completed");
 
-  return { pending, paused, completed };
+	return { pending, paused, completed };
 }
 
 const appStateReducer = (state, action) => {
-  let nd = new Date();
+	let nd = new Date();
 
-  let currentDate = {
-    day: format(nd, "dd"),
-    dayDisplay: format(nd, "d"),
-    month: format(nd, "MM"),
-    monthDisplay: format(nd, "MMM"),
-    year: format(nd, "y"),
-    weekday: format(nd, "EEEE"),
-  };
+	let currentDate = {
+		day: format(nd, "dd"),
+		dayDisplay: format(nd, "d"),
+		month: format(nd, "MM"),
+		monthDisplay: format(nd, "MMM"),
+		year: format(nd, "y"),
+		weekday: format(nd, "EEEE"),
+	};
 
-  switch (action.type) {
-    case "ADD_ITEM": {
-      const newState = { ...state, items: state.items.concat(action.item) };
-      saveState(newState);
-      return newState;
-    }
-    case "UPDATE_ITEM": {
-      const newItems = state.items.map((i) => {
-        if (i.key === action.item.key) {
-          return Object.assign({}, i, {
-            status: action.item.status,
-            text: action.item.text,
-          });
-        }
-        return i;
-      });
-      const newState = { ...state, items: newItems };
-      saveState(newState);
-      return newState;
-    }
-    case "DELETE_ITEM": {
-      const newState = {
-        ...state,
-        items: state.items.filter((item) => item.key !== action.item.key),
-      };
-      saveState(newState);
-      return newState;
-    }
-    case "RESET_ALL": {
-      const newItems = state.items
-        .filter((item) => item.status !== "completed")
-        .map((i) => {
-          if (i.status === "paused") {
-            return Object.assign({}, i, {
-              status: "pending",
-            });
-          }
-          return i;
-        });
-      const newState = { ...state, items: newItems, date: currentDate };
-      saveState(newState);
-      return newState;
-    }
-    default:
-      return state;
-  }
+	switch (action.type) {
+		case "ADD_ITEM": {
+			const newState = { ...state, items: state.items.concat(action.item) };
+			saveState(newState);
+			return newState;
+		}
+		case "UPDATE_ITEM": {
+			const newItems = state.items.map((i) => {
+				if (i.key === action.item.key) {
+					return Object.assign({}, i, {
+						status: action.item.status,
+						text: action.item.text
+					});
+				}
+				return i;
+			});
+			const newState = { ...state, items: newItems };
+			saveState(newState);
+			return newState;
+		}
+		case "DELETE_ITEM": {
+			const newState = {
+				...state,
+				items: state.items.filter((item) => item.key !== action.item.key),
+			};
+			saveState(newState);
+			return newState;
+		}
+		case "RESET_ALL": {
+			const newItems = state.items
+				.filter((item) => item.status !== "completed")
+				.map((i) => {
+					if (i.status === "paused") {
+						return Object.assign({}, i, {
+							status: "pending",
+						});
+					}
+					return i;
+				});
+			const newState = { ...state, items: newItems, date: currentDate };
+			saveState(newState);
+			return newState;
+		}
+		default:
+			return state;
+	}
 };
 
 export function AppStateProvider({ children }) {
-  let initialState = loadState();
+	let initialState = loadState();
 
-  if (initialState === undefined) {
-    let nd = new Date();
+	if (initialState === undefined) {
+		let nd = new Date();
 
-    initialState = {
-      items: [],
-      date: {
-        day: format(nd, "dd"),
-        dayDisplay: format(nd, "d"),
-        month: format(nd, "MM"),
-        monthDisplay: format(nd, "MMM"),
-        year: format(nd, "y"),
-        weekday: format(nd, "EEEE"),
-      },
-    };
-  }
+		initialState = {
+			items: [],
+			date: {
+				day: format(nd, "dd"),
+				dayDisplay: format(nd, "d"),
+				month: format(nd, "MM"),
+				monthDisplay: format(nd, "MMM"),
+				year: format(nd, "y"),
+				weekday: format(nd, "EEEE"),
+			},
+		};
+	}
 
-  saveState(initialState);
+	saveState(initialState);
 
-  const value = useReducer(appStateReducer, initialState);
-  return (
-    <div className="App">
-      <AppContext.Provider value={value}>{children}</AppContext.Provider>
-    </div>
-  );
-}
+	const value = useReducer(appStateReducer, initialState);
+	return (
+		<div className="App">
+			<AppContext.Provider value={value}>{children}</AppContext.Provider>
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/src/renderer/src/components/Item.jsx b/src/renderer/src/components/Item.jsx
index 8f6623d..edfedb4 100644
--- a/src/renderer/src/components/Item.jsx
+++ b/src/renderer/src/components/Item.jsx
@@ -4,105 +4,105 @@ import styles from "./Item.module.css";
 
 // Individual todo item
 function Item({ item }) {
-  const dispatch = useAppReducer();
+	const dispatch = useAppReducer();
+	
+	const [isEditMode, setIsEditMode] = useState(false);
+	const editValueRef = useRef(item.text);
+	
+	let text = item.text;
+	let paused = item.status === "paused";
+	let completed = item.status === "completed";
 
-  const [isEditMode, setIsEditMode] = useState(false);
-  const editValueRef = useRef(item.text);
+	function deleteItem() {
+		dispatch({ type: "DELETE_ITEM", item });
+	}
 
-  let text = item.text;
-  let paused = item.status === "paused";
-  let completed = item.status === "completed";
+	function editItem() {
+		const editedValue = editValueRef.current.value === "" ? text : editValueRef.current.value;
+		const editedItem = { ...item, text: editedValue };
+		dispatch({ type: "UPDATE_ITEM", item: editedItem });
+		setIsEditMode(false);
+	}
 
-  function deleteItem() {
-    dispatch({ type: "DELETE_ITEM", item });
-  }
+	function pauseItem() {
+		const pausedItem = { ...item, status: "paused" };
+		dispatch({ type: "UPDATE_ITEM", item: pausedItem });
+	}
 
-  function editItem() {
-    const editedValue =
-      editValueRef.current.value === "" ? text : editValueRef.current.value;
-    const editedItem = { ...item, text: editedValue };
-    dispatch({ type: "UPDATE_ITEM", item: editedItem });
-    setIsEditMode(false);
-  }
+	function resumeItem() {
+		const pendingItem = { ...item, status: "pending" };
+		dispatch({ type: "UPDATE_ITEM", item: pendingItem });
+	}
 
-  function pauseItem() {
-    const pausedItem = { ...item, status: "paused" };
-    dispatch({ type: "UPDATE_ITEM", item: pausedItem });
-  }
+	function completeItem() {
+		const completedItem = { ...item, status: "completed" };
+		dispatch({ type: "UPDATE_ITEM", item: completedItem });
+	}
 
-  function resumeItem() {
-    const pendingItem = { ...item, status: "pending" };
-    dispatch({ type: "UPDATE_ITEM", item: pendingItem });
-  }
-
-  function completeItem() {
-    const completedItem = { ...item, status: "completed" };
-    dispatch({ type: "UPDATE_ITEM", item: completedItem });
-  }
-
-  return (
-    <div className={styles.item} tabIndex="0">
-      {isEditMode && (
-        <form onSubmit={() => editItem()} className={styles.editform}>
-          <input
-            ref={editValueRef}
-            defaultValue={text}
-            autoFocus
-            onBlur={() => editItem()}
-          />
-        </form>
-      )}
-      {!isEditMode && (
-        <div
-          className={styles.itemname}
-          onDoubleClick={() => setIsEditMode(true)}
-        >
-          {text}
-        </div>
-      )}
-      {!isEditMode && (
-        <div
-          className={`${styles.buttons} ${
-            completed ? styles.completedButtons : ""
-          }`}
-        >
-          <button
-            className={styles.edit}
-            onClick={() => setIsEditMode(true)}
-            tabIndex="0"
-          ></button>
-          <button
-            className={styles.delete}
-            onClick={deleteItem}
-            tabIndex="0"
-          ></button>
-          {!paused && !completed && (
-            <button
-              className={styles.pause}
-              onClick={pauseItem}
-              tabIndex="0"
-            ></button>
-          )}
-          {(paused || completed) && (
-            <button
-              className={styles.resume}
-              onClick={resumeItem}
-              tabIndex="0"
-            ></button>
-          )}
-          {!completed && (
-            <button
-              className={styles.complete}
-              onClick={completeItem}
-              tabIndex="0"
-            ></button>
-          )}
-
-          {completed && <button className={styles.empty} tabIndex="0"></button>}
-        </div>
-      )}
-    </div>
-  );
+	return (
+		<div className={styles.item} tabIndex="0">
+			{isEditMode && (
+				<form 
+					className={styles.editform}
+					onSubmit={() => editItem()}>
+					  <input
+						ref={editValueRef}
+						defaultValue={text}
+						autoFocus
+						onBlur={() => editItem()}
+					  />
+				</form>
+			  )}
+			  {!isEditMode && (
+				<div
+				  className={styles.itemname}
+				  onDoubleClick={() => setIsEditMode(true)}
+				>
+				  {text}
+				</div>
+			  )}
+			  {!isEditMode && (
+				<div
+				className={`${styles.buttons} ${
+					completed ? styles.completedButtons : ""
+				}`}
+			>
+				<button
+					className={styles.edit}
+					onClick={() => setIsEditMode(true)}
+					tabIndex="0"
+				></button>
+				<button
+					className={styles.delete}
+					onClick={deleteItem}
+					tabIndex="0"
+				></button>
+				{!paused && !completed && (
+					<button
+						className={styles.pause}
+						onClick={pauseItem}
+						tabIndex="0"
+					></button>
+				)}
+				{(paused || completed) && (
+					<button
+						className={styles.resume}
+						onClick={resumeItem}
+						tabIndex="0"
+					></button>
+				)}
+				{!completed && (
+					<button
+						className={styles.complete}
+						onClick={completeItem}
+						tabIndex="0"
+					></button>
+				)}
+				{completed && <button className={styles.empty} tabIndex="0"></button>}
+			</div>
+			  )}
+		</div>
+	);
 }
 
-export default Item;
+export default Item;
\ No newline at end of file
diff --git a/src/renderer/src/components/Item.module.css b/src/renderer/src/components/Item.module.css
index 0b1114d..dfe0f16 100644
--- a/src/renderer/src/components/Item.module.css
+++ b/src/renderer/src/components/Item.module.css
@@ -1,136 +1,136 @@
 .item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 10px 0;
-  padding: 20px;
-  width: 100%;
-  min-height: 70px;
-  background: var(--item-color);
-  border: none;
-  border-radius: 3px;
-  box-sizing: border-box;
-  font-size: var(--item-font-size);
-
-  @media (max-width: 600px) {
-    margin: 20px auto;
-  }
-
-  .itemname {
-    width: calc(100% - 110px);
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      background-color: var(--item-color);
-      height: 0.75em;
-      @media (max-width: 600px) {
-        height: 0.25em;
-      }
-    }
-
-    &::-webkit-scrollbar-thumb:window-inactive,
-    &::-webkit-scrollbar-thumb {
-      background: var(--bg);
-      border: 3px solid var(--item-color);
-      border-left: none;
-      border-right: none;
-      border-radius: 3px;
-    }
-  }
-
-  .editform {
-    width: 100%;
-    input {
-      width: 100%;
-      height: 24px;
-	  padding: 0 10px;
-      background: var(--input-color);
-      border: none;
-      border-radius: 3px;
-      box-sizing: border-box;
-      color: var(--font-color);
-      outline: none;
-    }
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-    width: 130px;
-
-    button {
-      position: relative;
-      height: 24px;
-      border: none;
-
-      /* used as placeholder so the icon spacing is consistent even if there only 2/3 of the buttons in the row */
-      &.empty {
-        width: 24px;
-        background: transparent;
-      }
-
-      &.delete {
-        width: 24px;
-        background: no-repeat url("../img/x.svg");
-        &:after {
-          background: var(--red);
-        }
-      }
-
-      &.pause {
-        width: 24px;
-        background: no-repeat url("../img/pause.svg");
-        &:after {
-          background: var(--yellow);
-        }
-      }
-
-      &.resume {
-        width: 24px;
-        background: no-repeat url("../img/resume.svg");
-        &:after {
-          background: var(--yellow);
-        }
-      }
-
-      &.complete {
-        width: 30px;
-        background: no-repeat url("../img/check.svg");
-        &:after {
-          background: var(--green);
-        }
-      }
-
-      &.edit {
-        width: 30px;
-        background: no-repeat url("../img/edit.svg");
-        &:after {
-          background: var(--blue);
-        }
-      }
-
-      &::after {
-        display: block;
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        border-radius: 100%;
-        width: 0;
-        height: 0;
-      }
-
-      &:focus {
-        outline: 1px solid var(--item-color);
-        &:after {
-          animation: click 0.5s;
-        }
-      }
-
-      &:hover::after {
-        animation: click 0.5s;
-      }
-    }
-  }
-}
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0 0 10px 0;
+	padding: 20px;
+	width: 100%;
+	min-height: 70px;
+	background: var(--item-color);
+	border: none;
+	border-radius: 3px;
+	box-sizing: border-box;
+	font-size: var(--item-font-size);
+
+	@media (max-width: 600px) {
+		margin: 20px auto;
+	}
+
+	.itemname {
+		width: calc(100% - 110px);
+		overflow: auto;
+
+		&::-webkit-scrollbar {
+			background-color: var(--item-color);
+			height: 0.75em;
+			@media (max-width: 600px) {
+				height: 0.25em;
+			}
+		}
+
+		&::-webkit-scrollbar-thumb:window-inactive,
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg);
+			border: 3px solid var(--item-color);
+			border-left: none;
+			border-right: none;
+			border-radius: 3px;
+		}
+	}
+
+	.editform {
+		width: 100%;
+		input {
+			width: 100%;
+			height: 24px;
+			padding: 0 10px;
+			background: var(--input-color);
+			border: none;
+			border-radius: 3px;
+			box-sizing: border-box;
+			color: var(--font-color);
+			outline: none;
+		}
+	}
+
+	.buttons {
+		display: flex;
+		justify-content: space-between;
+		width: 140px;
+
+		button {
+			position: relative;
+			height: 24px;
+			border: none;
+
+			/* used as placeholder so the icon spacing is consistent even if there only 2/3 of the buttons in the row */
+			&.empty {
+				width: 24px;
+				background: transparent;
+			}
+
+			&.delete {
+				width: 24px;
+				background: no-repeat url("../img/x.svg");
+				&:after {
+					background: var(--red);
+				}
+			}
+
+			&.pause {
+				width: 24px;
+				background: no-repeat url("../img/pause.svg");
+				&:after {
+					background: var(--yellow);
+				}
+			}
+
+			&.resume {
+				width: 24px;
+				background: no-repeat url("../img/resume.svg");
+				&:after {
+					background: var(--yellow);
+				}
+			}
+
+			&.complete {
+				width: 30px;
+				background: no-repeat url("../img/check.svg");
+				&:after {
+					background: var(--green);
+				}
+			}
+
+			&.edit {
+				width: 30px;
+				background: no-repeat url("../img/edit.svg");
+				&:after {
+					background: var(--blue);
+				}
+			}
+
+			&::after {
+				display: block;
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				border-radius: 100%;
+				width: 0;
+				height: 0;
+			}
+
+			&:focus {
+				outline: 1px solid var(--item-color);
+				&:after {
+					animation: click 0.5s;
+				}
+			}
+
+			&:hover::after {
+				animation: click 0.5s;
+			}
+		}
+	}
+}
\ No newline at end of file