From 718ef2adc62461dfc1aae0dd07d46efe1b12831f Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Tue, 3 Feb 2026 08:57:02 +0100
Subject: [PATCH] Enhance entry styling based on status

Updated the UI to change background, text color, and opacity for entries based on their status. This improves visual clarity and user feedback when toggling an entry's crossed-out state.
---
 frontend/src/App.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ecabd6f..bc4dd76 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -322,16 +322,29 @@ export default function App() {
 
               <div style={{ display: "grid" }}>
                 {sec.entries.map((e) => (
-                  <div key={e.entry_id} style={styles.row}>
+                  <div
+                    key={e.entry_id}
+                    style={{
+                      ...styles.row,
+                      background:
+                        e.status === 1
+                          ? "rgba(255, 0, 0, 0.06)"   // leicht rot
+                          : "rgba(255,255,255,0.22)",
+                    }}
+                  >
                     {/* Name: Tap toggelt crossed */}
                     <div
                       onClick={() => toggleCross(e)}
                       style={{
                         ...styles.name,
                         textDecoration: e.status === 1 ? "line-through" : "none",
-                        opacity: e.status === 1 ? 0.85 : 1,
+
+                        // ✅ Rot wenn gestrichen
+                        color: e.status === 1 ? "#b10000" : "#20140c",
+
+                        // optional etwas transparenter
+                        opacity: e.status === 1 ? 0.75 : 1,
                       }}
-                      title="Tippen = durchstreichen"
                     >
                       {e.label}
                     </div>