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

updated DreamCardCompact to improve user display by resizing avatar and name elements, adjusting spacings for better layout balance, and refining font sizes for consistency

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:37:05 +02:00
parent ccca533db6
commit 204ea4f4bc
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/DreamCardCompact.tsx
View File

@@ -24,10 +24,10 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
}}> }}>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
{showUser && user && ( {showUser && user && (
<div className="pl-2" style={{width: '90px', minWidth: '90px'}}> <div className="pl-2" style={{width: '120px', minWidth: '120px'}}>
<div className="flex items-center"> <div className="flex items-center">
<div <div
className="w-6 h-6 rounded-full mr-1.5 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"
style={{ style={{
background: 'var(--accent-gradient)', background: 'var(--accent-gradient)',
borderColor: 'var(--accent-soft)', borderColor: 'var(--accent-soft)',
@@ -38,11 +38,11 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
alt={user.name} className="w-full h-full object-cover"/> alt={user.name} className="w-full h-full object-cover"/>
) : ( ) : (
<span <span
className="text-xs text-white">{user.name.charAt(0)}</span> className="text-sm text-white">{user.name.charAt(0)}</span>
)} )}
</div> </div>
<span <span
className="font-medium text-xs dreamy-text">{user.name}</span> className="font-medium text-sm dreamy-text">{user.name}</span>
</div> </div>
</div> </div>
)} )}
@@ -53,7 +53,7 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
</p> </p>
</div> </div>
{/* Add an empty div to balance the layout when user is shown */} {/* Add an empty div to balance the layout when user is shown */}
{showUser && user && <div className="invisible" style={{width: '90px', minWidth: '90px'}}></div>} {showUser && user && <div className="invisible" style={{width: '120px', minWidth: '120px'}}></div>}
</div> </div>
</div> </div>
</NavLink> </NavLink>