need to fix some colors

.gitignore

@@ -22,6 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-/src/assets/profiles/anja.png
+/public/assets/profiles/anja.png
-/src/assets/profiles/kim.png
+/public/assets/profiles/kim.png
-/src/assets/profiles/matthias.jpg
+/public/assets/profiles/matthias.jpg

src/index.css

@@ -25,11 +25,11 @@
   color: black;
 }
 
-.pagetitle {
+.pageTitle {
   color: var(--color-fuchsia-50);
 }
 
-.dreampanel {
+.dreamPanel {
   background-color: var(--color-violet-400);
   color: var(--color-fuchsia-200);
 }
@@ -78,7 +78,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    --background-color: #ffffff;
+    --background-color: fuchsia;
   }
   a:hover {
     color: #747bff;

src/pages/Feed.tsx

@@ -5,27 +5,25 @@ import type User from "../types/User.ts";
 import {MockUserMap} from "../data/MockUsers.ts";
 
 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>
+            <h1 className="pageTitle text-2xl font-bold mb-4">Feed</h1>
             <ul className="space-y-6">
-                {mockDreams.map((dream: Dream) => {
+                {sortedDreams.map((dream: Dream) => {
                     const user: User | undefined = MockUserMap.get(dream.userId);
                     return (
-                        <li
+                        <li key={dream.id} className="dreamPanel border rounded p-4">
-                            key={dream.id}
+                            <div className="flex rounded items-center mb-2"><img
-                            className="dreampanel border rounded p-4"
+                                src={`/assets/profiles/${user?.profilePicture}`}
-                        >
+                                alt={user?.name}
-                            {user && (
+                                className="w-10 h-10 rounded-full"/>
-                                <><img
+                                <span className="ml-6 font-semibold">{user?.name} hat geträumt:</span>
-                                    src={`/assets/profiles/${user.profilePicture}`}
+                            </div>
-                                    alt={user.name}
-                                    className="w-10 h-10 rounded-full"/><span
-                                    className="ml-2 text-sm font-semibold">{user.name} hat geträumt:</span></>
-                            )}
                             <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',
@@ -35,7 +33,6 @@ export default function Feed() {
                                     minute: '2-digit',
                                 })}
                             </p>
-                            <p className="mt-2 text-gray-700">{dream.input}</p>
                         </li>
                     )
                 })}