From 29b8768f0a99c318023dcfe7b3fec531db7ace19 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Thu, 3 Jul 2025 20:54:41 +0200
Subject: [PATCH] fixed the design (chatgpt and junie did)

---
 src/components/Navbar.tsx |   4 +-
 src/index.css             | 136 +++++++++++++++++++++++++++++++-------
 src/pages/Feed.tsx        |  59 +++++++++--------
 3 files changed, 143 insertions(+), 56 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b359a7b..b5985c5 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -24,9 +24,9 @@ export default function Navbar() {
 
             <NavLink
                 to="/record"
-                className="fixed bottom-2 left-1/2 transform -translate-x-1/2 bg-violet-700 p-4 rounded-full border-6 border-background z-20"
+                className="microphone-button fixed bottom-2 left-1/2 transform -translate-x-1/2 p-4 rounded-full z-20"
             >
-                <FaMicrophone className="w-8 h-8 text-fuchsia-400"/>
+                <FaMicrophone className="w-8 h-8 text-white"/>
             </NavLink>
         </div>
     );
diff --git a/src/index.css b/src/index.css
index f278ac6..5960035 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,21 @@
 @import "tailwindcss";
 
 :root {
-  --background-color: var(--color-pink-900);
+  --bg: #f9f6ff;
+  --container: #ede6fa;
+  --card: #d6c6ff;
+  --text: #1e102e;
+  --text-muted: #4a375e;
+  --accent: #7f39fb;
+  --accent-gradient: linear-gradient(135deg, #7f39fb, #d500f9);
+
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: var(--background-color);
+  color: var(--text);
+  background-color: var(--bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -16,31 +23,47 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+[data-theme="dark"] {
+  --bg: #1e102e;
+  --container: #3a1a5d;
+  --card: #5c2d91;
+  --text: #f5e6ff;
+  --text-muted: #c9a4e3;
+  --accent: #bb86fc;
+  --accent-gradient: linear-gradient(135deg, #7f39fb, #d500f9);
+}
+
 .border-background {
-  border-color: var(--background-color);
+  border-color: var(--accent);
 }
 
 .page {
-  background-color: var(--background-color);
-  color: black;
+  background-color: var(--bg);
+  color: var(--text);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 .pageTitle {
-  color: var(--color-fuchsia-50);
+  color: var(--accent);
+  font-weight: bold;
+  font-size: 1.25em;
 }
 
 .dreamPanel {
-  background-color: var(--color-violet-400);
-  color: var(--color-fuchsia-200);
+  background-color: var(--card);
+  border-radius: 10px;
+  padding: 1em;
+  color: var(--text);
+  border: 1px solid var(--accent);
 }
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--accent);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--text-muted);
 }
 
 body {
@@ -49,6 +72,9 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: var(--bg);
+  color: var(--text);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 h1 {
@@ -63,27 +89,87 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--container);
+  color: var(--text);
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: border-color 0.25s, background-color 0.3s, color 0.3s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--accent);
 }
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    --background-color: fuchsia;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.feed-container {
+  background-color: var(--container);
+  padding: 1em;
+}
+
+.dream-card {
+  background-color: var(--card);
+  border-radius: 10px;
+  padding: 1em;
+  color: var(--text);
+  border: 1px solid var(--accent);
+}
+
+.dream-card .title {
+  color: var(--accent);
+  font-weight: bold;
+  font-size: 1.25em;
+}
+
+.dream-card .timestamp {
+  color: var(--text-muted);
+  font-size: 0.85em;
+}
+
+.microphone-button {
+  background: var(--accent-gradient);
+  color: white;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Theme Toggle Styles */
+.theme-toggle {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-block;
+}
+
+.theme-toggle input {
+  display: none;
+}
+
+.theme-toggle .slider {
+  width: 40px;
+  height: 20px;
+  background-color: #bbb;
+  border-radius: 20px;
+  cursor: pointer;
+  position: relative;
+}
+
+.theme-toggle .slider::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.theme-toggle input:checked + .slider::before {
+  transform: translateX(20px);
+}
+
+.theme-toggle input:checked + .slider {
+  background-color: var(--accent);
 }
diff --git a/src/pages/Feed.tsx b/src/pages/Feed.tsx
index 9f8f608..115dd29 100644
--- a/src/pages/Feed.tsx
+++ b/src/pages/Feed.tsx
@@ -8,35 +8,36 @@ export default function Feed() {
     const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
     return (
         <div className="page p-4 space-y-4">
-            <h1 className="pageTitle text-2xl font-bold mb-4">Feed</h1>
-            <ul className="space-y-6">
-                {sortedDreams.map((dream: Dream) => {
-                    const user: User | undefined = MockUserMap.get(dream.userId);
-                    return (
-                        <li key={dream.id} className="dreamPanel border rounded p-4">
-                            <div className="flex rounded items-center mb-2"><img
-                                src={`/assets/profiles/${user?.profilePicture}`}
-                                alt={user?.name}
-                                className="w-10 h-10 rounded-full"/>
-                                <span className="ml-6 font-semibold">{user?.name} hat geträumt:</span>
-                            </div>
-                            <h2 className="text-xl font-semibold">
-                                {dream.title}
-                            </h2>
-                            <p className="mt-2 text-gray-700">{dream.input}</p>
-                            <p className="text-sm text-gray-500">
-                                {dream.date.toLocaleDateString('de-DE', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    year: 'numeric',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                })}
-                            </p>
-                        </li>
-                    )
-                })}
-            </ul>
+            <div className="feed-container rounded-lg">
+                <ul className="space-y-6">
+                    {sortedDreams.map((dream: Dream) => {
+                        const user: User | undefined = MockUserMap.get(dream.userId);
+                        return (
+                            <li key={dream.id} className="dream-card mb-4">
+                                <div className="flex rounded items-center mb-2"><img
+                                    src={`/assets/profiles/${user?.profilePicture}`}
+                                    alt={user?.name}
+                                    className="w-10 h-10 rounded-full"/>
+                                    <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
+                                </div>
+                                <h2 className="title">
+                                    {dream.title}
+                                </h2>
+                                <p className="mt-2 line-clamp-2">{dream.input}</p>
+                                <p className="timestamp mt-2">
+                                    {dream.date.toLocaleDateString('de-DE', {
+                                        day: '2-digit',
+                                        month: '2-digit',
+                                        year: 'numeric',
+                                        hour: '2-digit',
+                                        minute: '2-digit',
+                                    })}
+                                </p>
+                            </li>
+                        )
+                    })}
+                </ul>
+            </div>
         </div>
     );
 }