mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the design (chatgpt and junie did)

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-03 20:54:41 +02:00
parent 9223f9d89a
commit 29b8768f0a
3 changed files with 143 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Navbar.tsx
View File

@@ -24,9 +24,9 @@ export default function Navbar() {
<NavLink <NavLink
to="/record" 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> </NavLink>
</div> </div>
); );

136
src/index.css
View File

@@ -1,14 +1,21 @@
@import "tailwindcss"; @import "tailwindcss";
:root { :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; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: var(--text);
background-color: var(--background-color); background-color: var(--bg);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@@ -16,31 +23,47 @@
-moz-osx-font-smoothing: grayscale; -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-background {
border-color: var(--background-color); border-color: var(--accent);
} }
.page { .page {
background-color: var(--background-color); background-color: var(--bg);
color: black; color: var(--text);
transition: background-color 0.3s, color 0.3s;
} }
.pageTitle { .pageTitle {
color: var(--color-fuchsia-50); color: var(--accent);
font-weight: bold;
font-size: 1.25em;
} }
.dreamPanel { .dreamPanel {
background-color: var(--color-violet-400); background-color: var(--card);
color: var(--color-fuchsia-200); border-radius: 10px;
padding: 1em;
color: var(--text);
border: 1px solid var(--accent);
} }
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: var(--accent);
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: var(--text-muted);
} }
body { body {
@@ -49,6 +72,9 @@ body {
place-items: center; place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
} }
h1 { h1 {
@@ -63,27 +89,87 @@ button {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a; background-color: var(--container);
color: var(--text);
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s, background-color 0.3s, color 0.3s;
} }
button:hover { button:hover {
border-color: #646cff; border-color: var(--accent);
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
@media (prefers-color-scheme: light) { .feed-container {
:root { background-color: var(--container);
color: #213547; padding: 1em;
--background-color: fuchsia; }
}
a:hover { .dream-card {
color: #747bff; background-color: var(--card);
} border-radius: 10px;
button { padding: 1em;
background-color: #f9f9f9; 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);
} }

59
src/pages/Feed.tsx
View File

@@ -8,35 +8,36 @@ export default function Feed() {
const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime()); const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
return ( return (
<div className="page p-4 space-y-4"> <div className="page p-4 space-y-4">
<h1 className="pageTitle text-2xl font-bold mb-4">Feed</h1> <div className="feed-container rounded-lg">
<ul className="space-y-6"> <ul className="space-y-6">
{sortedDreams.map((dream: Dream) => { {sortedDreams.map((dream: Dream) => {
const user: User | undefined = MockUserMap.get(dream.userId); const user: User | undefined = MockUserMap.get(dream.userId);
return ( return (
<li key={dream.id} className="dreamPanel border rounded p-4"> <li key={dream.id} className="dream-card mb-4">
<div className="flex rounded items-center mb-2"><img <div className="flex rounded items-center mb-2"><img
src={`/assets/profiles/${user?.profilePicture}`} src={`/assets/profiles/${user?.profilePicture}`}
alt={user?.name} alt={user?.name}
className="w-10 h-10 rounded-full"/> className="w-10 h-10 rounded-full"/>
<span className="ml-6 font-semibold">{user?.name} hat geträumt:</span> <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
</div> </div>
<h2 className="text-xl font-semibold"> <h2 className="title">
{dream.title} {dream.title}
</h2> </h2>
<p className="mt-2 text-gray-700">{dream.input}</p> <p className="mt-2 line-clamp-2">{dream.input}</p>
<p className="text-sm text-gray-500"> <p className="timestamp mt-2">
{dream.date.toLocaleDateString('de-DE', { {dream.date.toLocaleDateString('de-DE', {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
year: 'numeric', year: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
})} })}
</p> </p>
</li> </li>
) )
})} })}
</ul> </ul>
</div>
</div> </div>
); );
} }