Skip to content

Mis estilos harán que todo sea más bonito #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dwbessa merged 7 commits into from
Mar 19, 2026
Merged

Mis estilos harán que todo sea más bonito #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7f613f4
profile: improve match history empty state and heading visibility
joanveras Mar 19, 2026
99e0d93
styles: refine profile layout, empty-state divider, and 2FA toggle st…
joanveras Mar 19, 2026
0bf0b72
profile-page: adjust page structure and card-to-footer spacing
joanveras Mar 19, 2026
01edd34
settings: stabilize 2FA disable button styling with dedicated classes
joanveras Mar 19, 2026
05da0cc
profile: align match history heading spacing with stats section
joanveras Mar 19, 2026
251d1b1
styles: refine match history item alignment and spacing to match stat…
joanveras Mar 19, 2026
f2da15c
styles: restore match history card height to previous sizing
joanveras Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 33 additions & 4 deletions frontend/src/components/profile/MatchHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,15 @@ const MatchHistory = (props: MatchHistoryProps) => {
const heading = props.title;

return (
<section className={`flex flex-col flex-1 min-h-0 ${props.className ?? ""}`}>
{heading && <h3 className="profile-section-title text-sm">{heading}</h3>}
<section
className={`flex flex-col flex-1 min-h-0 text-left space-y-3 ${props.className ?? ""}`}
>
{heading && history.length > 0 && (
<h3 className="profile-section-title mt-4 mb-2 text-sm">{heading}</h3>
)}
{heading && history.length === 0 && (
<hr className="history-empty-divider" aria-hidden="true" />
)}
{history.length > 0 ? (
<dl
aria-label={`${props.username} match history`}
Expand Down Expand Up @@ -65,8 +72,30 @@ const MatchHistory = (props: MatchHistoryProps) => {
))}
</dl>
) : (
<div className="flex items-center justify-center p-6 text-slate-500 in-[.light]:text-gray-500">
<p>No matches played yet.</p>
<div className="history-empty-state" role="status" aria-live="polite">
<div className="history-empty-icon-ring" aria-hidden="true">
<span className="history-empty-ring-pulse" />
<span className="history-empty-ring-pulse history-empty-ring-pulse-2" />
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="history-empty-icon"
>
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
</div>
<div className="history-empty-text-wrap">
<p className="history-empty-title">No matches played yet</p>
<p className="history-empty-subtitle">
Play your first match to start building your history
</p>
</div>
</div>
)}
</section>
Expand Down
Loading
Loading