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

refined DreamCardCompact layout by restructuring user display, simplifying spacing, and improving alignment for better visual balance

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:48:29 +02:00
parent d107630ae4
commit 5045a342b5
1 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/DreamCardCompact.tsx
View File

@@ -22,9 +22,9 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)', boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
border: '1px solid rgba(166, 77, 255, 0.1)' border: '1px solid rgba(166, 77, 255, 0.1)'
}}> }}>
<div className="flex items-center justify-between mb-1"> <div className="flex flex-col mb-1">
{showUser && user && ( {showUser && user && (
<div className="pl-2" style={{width: '120px', minWidth: '120px'}}> <div className="flex justify-center mb-2">
<div className="flex items-center"> <div className="flex items-center">
<div <div
className="w-8 h-8 rounded-full mr-2 flex items-center justify-center overflow-hidden border-2" className="w-8 h-8 rounded-full mr-2 flex items-center justify-center overflow-hidden border-2"
@@ -46,14 +46,12 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
</div> </div>
</div> </div>
)} )}
<div className="flex-1 text-center"> <div className="text-center">
<h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4> <h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4>
<p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80"> <p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80">
{formatDateSimple(dream.date)} {formatDateSimple(dream.date)}
</p> </p>
</div> </div>
{/* Add an empty div to balance the layout when user is shown */}
{showUser && user && <div className="invisible" style={{width: '120px', minWidth: '120px'}}></div>}
</div> </div>
</div> </div>
</NavLink> </NavLink>