From 9608e6bf325926a891a5e1bf7206fe2b810bae53 Mon Sep 17 00:00:00 2001 From: sahilkashyap64 Date: Sat, 9 May 2026 02:54:54 +0530 Subject: [PATCH 1/3] updated ui of lesson details and paying logic instantly --- src/hooks/usePlayerIdentity.ts | 34 +- src/pages/DashboardPage.css | 145 ++-- src/pages/DashboardPage.jsx | 3 +- src/pages/PlayerLessonDetailsPage.css | 696 ++++++++++++++----- src/pages/PlayerLessonDetailsPage.tsx | 916 +++++++++++++++++--------- 5 files changed, 1241 insertions(+), 553 deletions(-) diff --git a/src/hooks/usePlayerIdentity.ts b/src/hooks/usePlayerIdentity.ts index 1dcff212..ad40baa1 100644 --- a/src/hooks/usePlayerIdentity.ts +++ b/src/hooks/usePlayerIdentity.ts @@ -2,6 +2,25 @@ import { useMemo } from "react"; import { useAuth } from "../context/AuthContext"; const FALLBACK_EMAIL = "player@matchplay.app"; +const PLAYER_PERSONAL_DETAILS_KEY = "playerPersonalDetails"; + +const readStoredPersonalDetails = (): Record | null => { + if (typeof window === "undefined") { + return null; + } + + try { + const raw = window.localStorage.getItem(PLAYER_PERSONAL_DETAILS_KEY); + if (!raw) { + return null; + } + + const parsed = JSON.parse(raw); + return parsed && typeof parsed === "object" ? parsed as Record : null; + } catch { + return null; + } +}; const getInitialsFromIdentity = (name: string | null | undefined, email: string | null | undefined) => { if (name) { @@ -50,7 +69,7 @@ const getAvatarFromIdentity = (user: unknown): string | null => { } const profile = user as Record; - const avatarFields = ["avatar_url", "avatar", "picture", "image", "photoURL", "photoUrl"] as const; + const avatarFields = ["profile_picture", "avatar_url", "avatar", "picture", "image", "photoURL", "photoUrl"] as const; for (const field of avatarFields) { const value = profile[field]; @@ -65,14 +84,21 @@ const getAvatarFromIdentity = (user: unknown): string | null => { const usePlayerIdentity = () => { const auth = useAuth() as { user?: unknown } | undefined; const user = auth?.user; + const personalDetails = useMemo(() => readStoredPersonalDetails(), [user]); + const identity = useMemo( + () => ({ ...((user && typeof user === "object") ? user as Record : {}), ...(personalDetails ?? {}) }), + [personalDetails, user], + ); - const displayName = useMemo(() => extractDisplayName(user), [user]); - const email = (user as { email?: string } | undefined)?.email || FALLBACK_EMAIL; + const displayName = useMemo(() => extractDisplayName(identity), [identity]); + const email = + (identity as { email?: string } | undefined)?.email || + FALLBACK_EMAIL; const initials = useMemo( () => getInitialsFromIdentity(displayName, email), [displayName, email], ); - const avatarUrl = useMemo(() => getAvatarFromIdentity(user), [user]); + const avatarUrl = useMemo(() => getAvatarFromIdentity(identity), [identity]); return { displayName, email, initials, avatarUrl }; }; diff --git a/src/pages/DashboardPage.css b/src/pages/DashboardPage.css index 9fd583cc..660d36b5 100644 --- a/src/pages/DashboardPage.css +++ b/src/pages/DashboardPage.css @@ -246,25 +246,25 @@ .ph-main { width: min(1240px, 100%); margin: 0 auto; - padding: 0 0 16px; + padding: 0 0 12px; } .ph-welcome { - padding: 16px; + padding: 12px 16px 10px; background: #fff; border-bottom: 1px solid var(--ph-border); } .ph-welcome h1 { - font-size: 22px; - line-height: 1.1; + font-size: 18px; + line-height: 1.2; font-weight: 700; } .ph-welcome p { margin-top: 4px; color: var(--ph-muted); - font-size: 14px; + font-size: 13px; } .ph-invite-banner { @@ -515,9 +515,9 @@ .ph-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 8px; + gap: 6px; margin: 0; - padding: 16px; + padding: 10px 12px 12px; background: #fff; border-bottom: 1px solid var(--ph-border); } @@ -526,8 +526,9 @@ display: flex; flex-direction: column; align-items: center; - gap: 6px; - padding: 12px 6px; + gap: 4px; + min-height: 78px; + padding: 8px 4px; border: 1px solid var(--ph-border); border-radius: 12px; background: var(--ph-bg); @@ -543,20 +544,20 @@ } .ph-quick-action-icon { - width: 40px; - height: 40px; + width: 32px; + height: 32px; display: inline-flex; align-items: center; justify-content: center; - border-radius: 12px; + border-radius: 10px; background: #fff; - font-size: 20px; + font-size: 18px; } .ph-quick-action-label { - font-size: 11px; + font-size: 10px; font-weight: 700; - line-height: 1.2; + line-height: 1.1; text-align: center; } @@ -572,7 +573,7 @@ .ph-content-grid { /* display: grid; */ gap: 16px; - padding: 16px; + padding: 12px; } .ph-schedule, @@ -728,17 +729,17 @@ } .ph-play-today { - margin-top: 16px; - padding-bottom: 16px; + margin-top: 12px; + padding-bottom: 12px; } .ph-day-tabs, .ph-type-tabs { display: flex; - gap: 8px; + gap: 6px; overflow-x: auto; overflow-y: hidden; - padding: 0 16px; + padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; @@ -759,13 +760,13 @@ } .ph-day-tab { - min-width: 58px; - padding: 9px 14px; - border-radius: 12px; + min-width: 50px; + padding: 6px 10px; + border-radius: 10px; display: flex; flex-direction: column; align-items: center; - gap: 2px; + gap: 1px; } .ph-day-tab:hover, @@ -780,7 +781,7 @@ } .ph-day-tab-label { - font-size: 10px; + font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--ph-muted); @@ -791,18 +792,18 @@ } .ph-day-tab strong { - font-size: 18px; + font-size: 15px; line-height: 1; } .ph-day-tab small { - margin-top: 2px; - min-width: 18px; - padding: 2px 6px; + margin-top: 1px; + min-width: 16px; + padding: 1px 5px; border-radius: 6px; background: #e2e8f0; color: var(--ph-muted); - font-size: 9px; + font-size: 8px; font-weight: 700; } @@ -827,30 +828,32 @@ } .ph-type-tabs { - margin-top: 12px; - margin-bottom: 14px; - gap: 6px; - flex-wrap: wrap; + margin-top: 10px; + margin-bottom: 12px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; } .ph-type-tabs button { + min-width: 0; display: inline-flex; align-items: center; + justify-content: center; gap: 6px; - padding: 6px 12px; + padding: 6px 8px; border-radius: 999px; color: var(--ph-muted); - font-size: 12px; + font-size: 11px; font-weight: 700; white-space: nowrap; } .ph-type-tabs button small { - padding: 1px 5px; - border-radius: 999px; - background: rgba(15, 23, 42, 0.08); - font-size: 10px; + padding: 0; + border-radius: 0; + background: transparent; + font-size: 11px; } .ph-type-tabs button.active { @@ -864,7 +867,7 @@ } .ph-feedback { - padding: 12px 16px 4px; + padding: 10px 12px 2px; color: var(--ph-muted); font-size: 14px; } @@ -872,7 +875,7 @@ .ph-activities { display: grid; gap: 10px; - padding: 0 16px; + padding: 0 12px; } .ph-activity { @@ -1492,6 +1495,7 @@ .ph-quick-actions { gap: 6px; + padding: 8px 10px 10px; } .ph-invite-item { @@ -1504,14 +1508,15 @@ } .ph-quick-action { - padding: 12px 4px; + min-height: 72px; + padding: 7px 3px; } .ph-quick-action-icon { - width: 36px; - height: 36px; - border-radius: 10px; - font-size: 18px; + width: 30px; + height: 30px; + border-radius: 9px; + font-size: 16px; } .ph-quick-action-label { @@ -1520,7 +1525,7 @@ .ph-section-head, .ph-play-head { - padding: 12px 14px; + padding: 10px 12px; } .ph-play-head { @@ -1535,17 +1540,18 @@ .ph-day-tabs, .ph-type-tabs, .ph-activities { - padding-left: 14px; - padding-right: 14px; + padding-left: 12px; + padding-right: 12px; } .ph-day-tab { - min-width: 52px; - padding: 8px 12px; + min-width: 48px; + padding: 6px 9px; } .ph-type-tabs button { - padding: 6px 10px; + gap: 4px; + padding: 6px 4px; max-width: 100%; } @@ -1602,6 +1608,12 @@ } } +@media (max-width: 767px) { + .ph-welcome p { + display: none; + } +} + @media (min-width: 768px) { .ph-main { padding: 24px; @@ -1611,6 +1623,25 @@ font-size: 28px; } + .ph-type-tabs { + display: flex; + flex-wrap: wrap; + } + + .ph-type-tabs button { + width: auto; + justify-content: flex-start; + padding: 6px 12px; + font-size: 12px; + } + + .ph-type-tabs button small { + padding: 1px 5px; + border-radius: 999px; + background: rgba(15, 23, 42, 0.08); + font-size: 10px; + } + .ph-activities { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1774,6 +1805,7 @@ } .ph-type-tabs { + display: flex; margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; @@ -1784,6 +1816,13 @@ padding: 8px 16px; } + .ph-type-tabs button small { + padding: 1px 5px; + border-radius: 999px; + background: rgba(15, 23, 42, 0.08); + font-size: 10px; + } + .ph-activity { display: flex; padding: 18px; diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx index 69e49b0e..b003bdab 100644 --- a/src/pages/DashboardPage.jsx +++ b/src/pages/DashboardPage.jsx @@ -1045,6 +1045,7 @@ const DashboardPage = () => { const hasSchedule = scheduleState.status === "ready" && scheduleItems.length > 0; const inviteItems = inviteState.items; const hasInvites = inviteState.status === "ready" && inviteItems.length > 0; + const welcomeHeadline = `Hi ${firstName} đź‘‹`; const welcomeSubtitle = hasSchedule ? `You have ${scheduleItems.length} session${scheduleItems.length === 1 ? "" : "s"} this week` : `${activityState.items.length} nearby option${activityState.items.length === 1 ? "" : "s"} across lessons, groups, and matches`; @@ -1359,7 +1360,7 @@ const DashboardPage = () => {
-

Welcome back, {firstName}! đź‘‹

+

{welcomeHeadline}

{welcomeSubtitle}

diff --git a/src/pages/PlayerLessonDetailsPage.css b/src/pages/PlayerLessonDetailsPage.css index ff77e3d0..b18a41e3 100644 --- a/src/pages/PlayerLessonDetailsPage.css +++ b/src/pages/PlayerLessonDetailsPage.css @@ -1,262 +1,585 @@ .player-lesson-details { - display: flex; - flex-direction: column; - gap: 14px; - padding-bottom: 20px; + padding-bottom: 24px; } -.player-lesson-details__back { - width: fit-content; - display: inline-flex; +.player-lesson-details__empty { + display: flex; align-items: center; - gap: 6px; + gap: 8px; + padding: 16px; + border: 1px solid #e2e8f0; + border-radius: 18px; + background: #ffffff; color: #475569; - font-size: 14px; font-weight: 600; - text-decoration: none; } -.player-lesson-details__back:hover { - color: #1e293b; +.player-lesson-details__empty--error { + color: #b91c1c; } -.player-lesson-details__empty { - background: #ffffff; +.player-lesson-details__shell { + position: relative; + overflow: hidden; border: 1px solid #e2e8f0; - border-radius: 16px; - padding: 16px; - color: #475569; - font-weight: 600; + border-radius: 28px; + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); + box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08); } -.player-lesson-details__empty--error { +.player-lesson-details__topbar { display: flex; align-items: center; + justify-content: space-between; + gap: 12px; + padding: 14px 18px; + border-bottom: 1px solid #e2e8f0; + background: rgba(255, 255, 255, 0.94); + backdrop-filter: blur(14px); +} + +.player-lesson-details__back-link, +.player-lesson-details__topbar-action { + border: 0; + background: transparent; + cursor: pointer; +} + +.player-lesson-details__back-link { + display: inline-flex; + align-items: center; gap: 8px; - color: #b91c1c; + padding: 0; + color: #64748b; + font-size: 14px; + font-weight: 700; } -.player-lesson-details__banner { +.player-lesson-details__back-link:hover, +.player-lesson-details__topbar-action:hover { + color: #1e293b; +} + +.player-lesson-details__topbar-title { + color: #64748b; + font-size: 13px; + font-weight: 700; +} + +.player-lesson-details__topbar-actions { display: flex; - align-items: flex-start; - gap: 12px; - border-radius: 16px; - border: 1px solid transparent; - padding: 14px 16px; + align-items: center; + gap: 8px; } -.player-lesson-details__banner--awaiting { - background: #fef3c7; - border-color: #fde68a; +.player-lesson-details__topbar-action { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 36px; + padding: 0 12px; + border-radius: 12px; + color: #64748b; + font-size: 14px; + font-weight: 700; } -.player-lesson-details__banner--confirmed { - background: #f0fdf4; - border-color: #bbf7d0; +.player-lesson-details__layout { + display: grid; + grid-template-columns: minmax(0, 1fr); } -.player-lesson-details__banner--payment { - background: #eff6ff; - border-color: #bfdbfe; +.player-lesson-details__content { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px; } -.player-lesson-details__banner-icon { - flex-shrink: 0; +.player-lesson-details__hero { + display: flex; + flex-direction: column; + gap: 14px; } -.player-lesson-details__banner--awaiting .player-lesson-details__banner-icon, -.player-lesson-details__banner--awaiting .player-lesson-details__banner-title { - color: #d97706; +.player-lesson-details__badge-row { + display: flex; + flex-wrap: wrap; + gap: 8px; } -.player-lesson-details__banner--confirmed .player-lesson-details__banner-icon, -.player-lesson-details__banner--confirmed .player-lesson-details__banner-title { - color: #15803d; +.player-lesson-details__hero-badge { + display: inline-flex; + align-items: center; + min-height: 28px; + padding: 0 10px; + border: 1px solid #e2e8f0; + border-radius: 999px; + background: #ffffff; + color: #475569; + font-size: 11px; + font-weight: 800; + letter-spacing: 0.04em; + text-transform: uppercase; } -.player-lesson-details__banner--payment .player-lesson-details__banner-icon, -.player-lesson-details__banner--payment .player-lesson-details__banner-title { - color: #1d4ed8; +.player-lesson-details__hero-badge--primary { + border-color: #ddd6fe; + background: #f3e8ff; + color: #7c3aed; } -.player-lesson-details__banner-copy { +.player-lesson-details__hero-body { display: flex; flex-direction: column; - gap: 3px; + gap: 12px; } -.player-lesson-details__banner-title, -.player-lesson-details__banner-text, +.player-lesson-details__hero-title, +.player-lesson-details__section-label, +.player-lesson-details__card-title, .player-lesson-details__coach-name, -.player-lesson-details__coach-role, -.player-lesson-details__detail-title, -.player-lesson-details__detail-text, +.player-lesson-details__booking-price, +.player-lesson-details__booking-eyebrow, .player-lesson-details__info-title, -.player-lesson-details__status-pending, -.player-lesson-details__status-success, -.player-lesson-details__status-error, -.player-lesson-details__info-inline p { +.player-lesson-details__status-banner-copy strong { margin: 0; } -.player-lesson-details__banner-title, -.player-lesson-details__coach-name, -.player-lesson-details__detail-title, -.player-lesson-details__info-title { +.player-lesson-details__hero-title { + color: #0f172a; + font-size: clamp(34px, 5vw, 52px); + line-height: 0.98; + letter-spacing: -0.04em; font-weight: 700; - color: #1e293b; } -.player-lesson-details__banner-text, -.player-lesson-details__coach-role, -.player-lesson-details__detail-text, -.player-lesson-details__info-inline p { +.player-lesson-details__hero-copy, +.player-lesson-details__card-copy, +.player-lesson-details__status-banner-copy span, +.player-lesson-details__booking-subcopy, +.player-lesson-details__location-list, +.player-lesson-details__step, +.player-lesson-details__status-pending, +.player-lesson-details__status-error, +.player-lesson-details__status-success, +.player-lesson-details__info-inline p, +.player-lesson-details__payment-block p { + margin: 0; +} + +.player-lesson-details__hero-copy { + max-width: 720px; color: #64748b; + font-size: 16px; + line-height: 1.65; +} + +.player-lesson-details__hero-meta { + display: grid; + gap: 10px; +} + +.player-lesson-details__hero-meta-item { + display: inline-flex; + align-items: center; + gap: 10px; + color: #475569; + font-size: 15px; + font-weight: 600; +} + +.player-lesson-details__hero-meta-item svg { + flex-shrink: 0; + color: #7c3aed; +} + +.player-lesson-details__hero-meta-item--capacity svg { + color: #0f766e; } +.player-lesson-details__status-banner, .player-lesson-details__card, -.player-lesson-details__status-panel, -.player-lesson-details__actions { - background: #ffffff; +.player-lesson-details__booking-card { border: 1px solid #e2e8f0; - border-radius: 16px; + border-radius: 22px; + background: #ffffff; } -.player-lesson-details__coach-card { +.player-lesson-details__status-banner { display: flex; - align-items: center; + align-items: flex-start; gap: 12px; - padding: 14px 16px; + padding: 16px 18px; } -.player-lesson-details__coach-avatar { - width: 44px; - height: 44px; - border-radius: 999px; - background: linear-gradient(135deg, #065f46, #0f766e); - color: #ffffff; +.player-lesson-details__status-banner--confirmed { + border-color: #bbf7d0; + background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); +} + +.player-lesson-details__status-banner--awaiting { + border-color: #fde68a; + background: linear-gradient(180deg, #fef3c7 0%, #ffffff 100%); +} + +.player-lesson-details__status-banner--payment { + border-color: #c7d2fe; + background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%); +} + +.player-lesson-details__status-banner-icon { + flex-shrink: 0; + color: #7c3aed; +} + +.player-lesson-details__status-banner--confirmed .player-lesson-details__status-banner-icon { + color: #15803d; +} + +.player-lesson-details__status-banner--awaiting .player-lesson-details__status-banner-icon { + color: #b45309; +} + +.player-lesson-details__status-banner--payment .player-lesson-details__status-banner-icon { + color: #3730a3; +} + +.player-lesson-details__status-banner-copy { + display: flex; + flex-direction: column; + gap: 4px; +} + +.player-lesson-details__status-banner-copy strong { + color: #0f172a; + font-size: 15px; + font-weight: 800; +} + +.player-lesson-details__status-banner-copy span { + color: #475569; + font-size: 14px; + line-height: 1.55; +} + +.player-lesson-details__section { + display: flex; + flex-direction: column; + gap: 10px; +} + +.player-lesson-details__section-label { + color: #64748b; + font-size: 12px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.player-lesson-details__card { + padding: 18px; +} + +.player-lesson-details__card-block { + display: flex; + flex-direction: column; + gap: 8px; +} + +.player-lesson-details__card-title { + color: #0f172a; + font-size: 18px; + font-weight: 700; +} + +.player-lesson-details__card-copy { + color: #64748b; + font-size: 15px; + line-height: 1.65; +} + +.player-lesson-details__location-list { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 10px; + padding: 0; + list-style: none; + color: #64748b; + font-size: 14px; +} + +.player-lesson-details__secondary-action, +.player-lesson-details__coach-link, +.player-lesson-details__primary-action { + text-decoration: none; +} + +.player-lesson-details__secondary-action { display: inline-flex; align-items: center; justify-content: center; - overflow: hidden; - font-size: 15px; + min-height: 44px; + width: fit-content; + margin-top: 16px; + padding: 0 16px; + border: 1px solid #c4b5fd; + border-radius: 12px; + background: #ffffff; + color: #7c3aed; + font-size: 14px; font-weight: 700; } -.player-lesson-details__coach-avatar img { - width: 100%; - height: 100%; +.player-lesson-details__secondary-action:hover { + border-color: #8b5cf6; + color: #6d28d9; +} + +.player-lesson-details__coach-panel { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 14px; +} + +.player-lesson-details__coach-avatar { + width: 56px; + height: 56px; + border-radius: 999px; object-fit: cover; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); +} + +.player-lesson-details__coach-avatar--placeholder { + display: inline-flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 18px; + font-weight: 800; } -.player-lesson-details__coach-copy { +.player-lesson-details__coach-meta { display: flex; flex-direction: column; - gap: 2px; + gap: 6px; } -.player-lesson-details__detail-list { - overflow: hidden; +.player-lesson-details__coach-name { + color: #0f172a; + font-size: 19px; + font-weight: 700; } -.player-lesson-details__detail-row { +.player-lesson-details__coach-cert-list { display: flex; - gap: 12px; - align-items: flex-start; - padding: 14px 16px; - border-bottom: 1px solid #f1f5f9; + flex-wrap: wrap; + gap: 8px; +} + +.player-lesson-details__coach-cert { + display: inline-flex; + align-items: center; + min-height: 26px; + padding: 0 10px; + border-radius: 999px; + background: #ede9fe; + color: #7c3aed; + font-size: 11px; + font-weight: 800; } -.player-lesson-details__detail-row:last-child { - border-bottom: none; +.player-lesson-details__coach-link { + display: inline-flex; + margin-top: 14px; + color: #7c3aed; + font-size: 14px; + font-weight: 700; } -.player-lesson-details__detail-icon { - color: #475569; - flex-shrink: 0; - margin-top: 1px; +.player-lesson-details__coach-link:hover { + color: #6d28d9; } -.player-lesson-details__detail-copy { +.player-lesson-details__sidebar { + padding: 0 20px 20px; +} + +.player-lesson-details__booking-card { display: flex; flex-direction: column; - gap: 2px; + gap: 16px; + padding: 20px; + box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06); +} + +.player-lesson-details__booking-eyebrow { + color: #64748b; + font-size: 12px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.player-lesson-details__booking-price { + color: #0f172a; + font-size: 44px; + line-height: 0.95; + letter-spacing: -0.04em; + font-weight: 700; } -.player-lesson-details__status-panel { +.player-lesson-details__booking-subcopy { + color: #64748b; + font-size: 15px; +} + +.player-lesson-details__booking-list { display: flex; flex-direction: column; - gap: 14px; - padding: 14px 16px; + gap: 10px; } -.player-lesson-details__status-pending { - color: #1d4ed8; - font-weight: 600; +.player-lesson-details__booking-list div { + display: flex; + align-items: flex-start; + gap: 10px; + color: #64748b; + font-size: 14px; + line-height: 1.55; } -.player-lesson-details__status-success { - color: #166534; - font-weight: 600; +.player-lesson-details__booking-list svg { + flex-shrink: 0; + margin-top: 2px; + color: #64748b; } -.player-lesson-details__status-error { - color: #b91c1c; - font-weight: 600; +.player-lesson-details__booking-pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 36px; + border-radius: 12px; + font-size: 14px; + font-weight: 800; +} + +.player-lesson-details__booking-pill--confirmed { + background: #dcfce7; + color: #15803d; +} + +.player-lesson-details__booking-pill--awaiting { + background: #fef3c7; + color: #b45309; +} + +.player-lesson-details__booking-pill--payment { + background: #ede9fe; + color: #6d28d9; +} + +.player-lesson-details__price-breakdown { + display: flex; + flex-direction: column; + gap: 8px; + padding-top: 2px; +} + +.player-lesson-details__price-breakdown div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + color: #64748b; + font-size: 14px; +} + +.player-lesson-details__price-breakdown strong { + color: #0f172a; + font-weight: 700; } .player-lesson-details__info-card { - border-radius: 14px; - padding: 14px 16px; + border-radius: 18px; + padding: 16px; } .player-lesson-details__info-card--next { - background: #eff6ff; - border: 1px solid #bfdbfe; + border: 1px solid #c7d2fe; + background: #eef2ff; +} + +.player-lesson-details__info-title { + color: #1e40af; + font-size: 14px; + font-weight: 800; } .player-lesson-details__steps { display: flex; flex-direction: column; gap: 10px; + margin-top: 12px; } .player-lesson-details__step { display: flex; align-items: center; gap: 10px; - color: #1e40af; + color: #1e3a8a; font-size: 13px; + line-height: 1.5; } .player-lesson-details__step-number { width: 24px; height: 24px; - border-radius: 999px; - background: #3b82f6; - color: #ffffff; + flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; + border-radius: 999px; + background: #3b82f6; + color: #ffffff; font-size: 11px; font-weight: 800; - flex-shrink: 0; } .player-lesson-details__info-inline { display: flex; align-items: flex-start; gap: 8px; - color: #94a3b8; - font-size: 12px; + color: #64748b; + font-size: 13px; line-height: 1.6; } +.player-lesson-details__info-inline svg { + flex-shrink: 0; + color: #94a3b8; + margin-top: 2px; +} + +.player-lesson-details__payment-panel { + display: flex; + flex-direction: column; + gap: 12px; +} + +.player-lesson-details__status-pending { + color: #312e81; + font-size: 14px; + font-weight: 700; +} + .player-lesson-details__payment-choice { display: flex; flex-wrap: wrap; - gap: 12px; - align-items: center; + gap: 10px; } .player-lesson-details__payment-choice label { @@ -264,6 +587,7 @@ align-items: center; gap: 6px; color: #334155; + font-size: 14px; font-weight: 600; } @@ -273,84 +597,104 @@ gap: 10px; } -.player-lesson-details__payment-block p { - margin: 0; - color: #475569; -} - .player-lesson-details__payment-block select { width: 100%; + min-height: 46px; border: 1px solid #cbd5e1; - border-radius: 10px; - padding: 10px 12px; + border-radius: 12px; + padding: 0 14px; + background: #ffffff; + color: #0f172a; font-size: 14px; } -.player-lesson-details__accept { - border: none; - border-radius: 12px; - padding: 12px 16px; - background: #2563eb; - color: #fff; +.player-lesson-details__status-error { + color: #b91c1c; + font-size: 13px; + font-weight: 600; +} + +.player-lesson-details__status-success { + color: #15803d; + font-size: 13px; font-weight: 700; +} + +.player-lesson-details__primary-action { width: 100%; + min-height: 48px; + border: 0; + border-radius: 14px; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); + color: #ffffff; + font-size: 15px; + font-weight: 800; cursor: pointer; + box-shadow: 0 14px 28px rgba(124, 58, 237, 0.22); } -.player-lesson-details__accept:disabled { +.player-lesson-details__primary-action:disabled { opacity: 0.65; cursor: not-allowed; + box-shadow: none; } -.player-lesson-details__actions { +.player-lesson-details__sidebar-actions { display: flex; flex-direction: column; - gap: 8px; - padding: 12px 16px 16px; + gap: 10px; } -.player-lesson-details__action { +.player-lesson-details__secondary-action--button { width: 100%; - border-radius: 12px; - border: 1px solid transparent; - padding: 13px 14px; - display: inline-flex; - justify-content: center; - align-items: center; - gap: 8px; - font-size: 14px; - font-weight: 700; - cursor: pointer; } -.player-lesson-details__action:disabled { - opacity: 0.65; - cursor: not-allowed; -} +@media (max-width: 767px) { + .player-lesson-details__topbar { + padding: 12px 14px; + } -.player-lesson-details__action--primary { - background: #8b5cf6; - color: #ffffff; -} + .player-lesson-details__topbar-title, + .player-lesson-details__topbar-action span { + display: none; + } -.player-lesson-details__action--secondary { - background: #ede9fe; - color: #7c3aed; -} + .player-lesson-details__content, + .player-lesson-details__sidebar { + padding: 16px; + } -.player-lesson-details__action--danger { - background: #ffffff; - color: #ef4444; - border-color: #fecaca; + .player-lesson-details__sidebar { + padding-top: 0; + } + + .player-lesson-details__hero-title { + font-size: 38px; + } + + .player-lesson-details__booking-card { + padding: 18px; + } } -@media (max-width: 640px) { - .player-lesson-details { - gap: 12px; +@media (min-width: 1024px) { + .player-lesson-details__layout { + grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.95fr); + align-items: start; + } + + .player-lesson-details__content { + padding: 24px; + border-right: 1px solid #e2e8f0; + } + + .player-lesson-details__sidebar { + position: sticky; + top: 96px; + padding: 24px; } - .player-lesson-details__payment-choice { - flex-direction: column; - align-items: flex-start; + .player-lesson-details__booking-card { + padding: 22px; } } diff --git a/src/pages/PlayerLessonDetailsPage.tsx b/src/pages/PlayerLessonDetailsPage.tsx index 5618ce3d..b2c3305b 100644 --- a/src/pages/PlayerLessonDetailsPage.tsx +++ b/src/pages/PlayerLessonDetailsPage.tsx @@ -1,17 +1,19 @@ import { useCallback, useEffect, useMemo, useState } from "react"; -import { Link, useParams } from "react-router-dom"; +import { Link, useNavigate, useParams } from "react-router-dom"; import { ArrowLeft, AlertCircle, CalendarDays, - CalendarPlus, CheckCircle2, + Clock, CreditCard, Hourglass, Info, MapPin, MessageCircle, + Share2, UserRound, + Users, } from "lucide-react"; import { Elements } from "@stripe/react-stripe-js"; import { @@ -31,6 +33,7 @@ import { type PlayerStripePaymentMethod, } from "../api/playerStripe"; import { consumePackageCredits, fetchPackageCredits, type PackagePurchase } from "../api/playerPackages"; +import { updatePlayerLesson } from "../api/player"; import AddCardForm from "../components/payments/AddCardForm"; import { getStoredAuthToken } from "../services/authToken"; @@ -130,6 +133,95 @@ const getLessonTypeLabel = (lesson: Lesson | null) => { return String(lesson.lesson_type_name ?? record.lesson_type_name ?? "Lesson"); }; +const getLessonTitle = (lesson: Lesson | null) => { + if (!lesson) return "Lesson details"; + const record = lesson as Record; + const metadata = record.metadata as Record | undefined; + const title = + metadata?.title ?? + record.metadata_title ?? + lesson.lesson_type_name ?? + record.lesson_type_name; + return typeof title === "string" && title.trim() ? title.trim() : "Lesson details"; +}; + +const getLessonLevelLabel = (lesson: Lesson | null) => { + if (!lesson) return null; + const record = lesson as Record; + const metadata = record.metadata as Record | undefined; + const raw = metadata?.level ?? record.metadata_level; + return typeof raw === "string" && raw.trim() ? raw.trim() : null; +}; + +const getLessonDescription = (lesson: Lesson | null) => { + if (!lesson) return "Lesson details will appear here once the session is ready."; + const record = lesson as Record; + const metadata = record.metadata as Record | undefined; + const description = metadata?.description; + if (typeof description === "string" && description.trim()) { + return description.trim(); + } + + const kind = resolveLessonTypeForCredits(lesson); + if (kind === "group") { + return "Join a coach-led class built for shared reps, live feedback, and steady matchplay rhythm."; + } + if (kind === "semi") { + return "Train in a small-format session with focused coaching, partner reps, and more individualized feedback."; + } + return "A focused one-on-one lesson built around your goals, technique work, and live corrections."; +}; + +const getLessonDateBadgeLabel = (lesson: Lesson | null) => { + if (!lesson?.start_date_time) return "DATE TBD"; + const date = new Date(lesson.start_date_time); + if (Number.isNaN(date.getTime())) return "DATE TBD"; + return new Intl.DateTimeFormat("en-US", { + weekday: "long", + month: "short", + day: "numeric", + timeZone: "UTC", + }) + .format(date) + .toUpperCase() + .replace(",", " ·"); +}; + +const getLessonTypeVariantLabel = (lesson: Lesson | null) => { + const kind = resolveLessonTypeForCredits(lesson); + if (kind === "group") return "Open Group"; + if (kind === "semi") return "Semi-Private"; + return "Private Lesson"; +}; + +const getLessonDurationMinutes = (lesson: Lesson | null) => { + if (!lesson?.start_date_time || !lesson?.end_date_time) return 0; + const start = new Date(lesson.start_date_time); + const end = new Date(lesson.end_date_time); + if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) return 0; + return Math.max(Math.round((end.getTime() - start.getTime()) / 60000), 0); +}; + +const getLessonCapacityDetails = (lesson: Lesson | null) => { + if (!lesson) return null; + const limit = parseNumber((lesson as Record).player_limit) ?? (resolveLessonTypeForCredits(lesson) === "private" ? 1 : null); + if (!limit) return null; + const booked = parseNumber((lesson as Record).current_player_count) ?? 0; + const remaining = Math.max(limit - booked, 0); + return { limit, booked, remaining }; +}; + +const getLessonFormatSummary = (lesson: Lesson | null) => { + const kind = resolveLessonTypeForCredits(lesson); + if (kind === "group") { + return "Coach-led class with shared drills, group pacing, and live tactical feedback."; + } + if (kind === "semi") { + return "Small-group lesson with partner reps and more direct coaching attention."; + } + return "One-on-one coaching tailored to your goals, pace, and technical priorities."; +}; + const buildSmsHref = (phoneNumber: string, message: string) => { const trimmedPhoneNumber = phoneNumber.trim(); if (!trimmedPhoneNumber) return ""; @@ -172,6 +264,29 @@ const parseMoney = (value: unknown): number | null => { return null; }; +const buildGoogleCalendarHref = (lesson: Lesson | null, title: string, description: string, location: string) => { + if (!lesson?.start_date_time || !lesson?.end_date_time) { + return null; + } + + const start = new Date(lesson.start_date_time); + const end = new Date(lesson.end_date_time); + if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) { + return null; + } + + const formatUtc = (date: Date) => date.toISOString().replaceAll("-", "").replaceAll(":", "").replace(/\.\d{3}Z$/, "Z"); + const params = new URLSearchParams({ + action: "TEMPLATE", + text: title, + dates: `${formatUtc(start)}/${formatUtc(end)}`, + details: description, + location, + }); + + return `https://calendar.google.com/calendar/render?${params.toString()}`; +}; + const resolveLessonTypeForCredits = (lesson: Lesson | null) => { if (!lesson) return "private"; const record = lesson as Record; @@ -200,6 +315,21 @@ const extractPaymentMethods = (payload: PlayerStripePaymentMethod[] | Record { + const remaining = Number(purchase.credits_remaining ?? 0); + if (!Number.isFinite(remaining) || remaining <= 0) { + return false; + } + + const allowed = purchase.lesson_types_allowed; + if (!Array.isArray(allowed) || allowed.length === 0) { + return true; + } + + const lessonType = resolveLessonTypeForCredits(lesson); + return allowed.some((type) => resolveLessonTypeForCredits({ lesson_type_name: String(type) } as Lesson) === lessonType); +}; + const extractIntentStatus = (response: Record) => { const nestedIntent = response.payment_intent as Record | undefined; const raw = @@ -212,6 +342,7 @@ const extractIntentStatus = (response: Record) => { const PlayerLessonDetailsPage = () => { const { id } = useParams<{ id?: string }>(); + const navigate = useNavigate(); const [lesson, setLesson] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -346,6 +477,70 @@ const PlayerLessonDetailsPage = () => { isPaymentPending && playerId != null && createdBy != null && String(playerId) === String(createdBy); const requiresPlayerAcceptance = isPaymentPending && !isAwaitingCoachConfirmation; const coachPhone = useMemo(() => getCoachPhoneNumber(coachProfile), [coachProfile]); + const lessonTitle = useMemo(() => getLessonTitle(lesson), [lesson]); + const lessonDescription = useMemo(() => getLessonDescription(lesson), [lesson]); + const lessonTypeLabel = useMemo(() => getLessonTypeLabel(lesson), [lesson]); + const lessonTypeVariantLabel = useMemo(() => getLessonTypeVariantLabel(lesson), [lesson]); + const lessonLevelLabel = useMemo(() => getLessonLevelLabel(lesson), [lesson]); + const lessonDateBadgeLabel = useMemo(() => getLessonDateBadgeLabel(lesson), [lesson]); + const lessonDateLabel = useMemo(() => formatDateLabel(lesson?.start_date_time), [lesson]); + const lessonTimeRange = useMemo( + () => formatTimeRangeLabel(lesson?.start_date_time, lesson?.end_date_time), + [lesson], + ); + const lessonDurationMinutes = useMemo(() => getLessonDurationMinutes(lesson), [lesson]); + const coachName = useMemo(() => getCoachName(lesson), [lesson]); + const coachAvatarUrl = useMemo( + () => getCoachAvatarUrl(lesson) ?? coachProfile?.profilePicture ?? null, + [coachProfile?.profilePicture, lesson], + ); + const locationTitle = useMemo(() => getLocationTitle(lesson), [lesson]); + const lessonCapacity = useMemo(() => getLessonCapacityDetails(lesson), [lesson]); + const lessonFormatSummary = useMemo(() => getLessonFormatSummary(lesson), [lesson]); + const coachAboutCopy = useMemo(() => { + if (!coachProfile) return lessonFormatSummary; + const record = coachProfile as CoachProfileRecord & { + about?: string; + bio?: string; + summary?: string; + title?: string; + headlineBadge?: string; + }; + return record.about || record.bio || record.summary || lessonFormatSummary; + }, [coachProfile, lessonFormatSummary]); + const coachTitle = useMemo(() => { + const record = coachProfile as (CoachProfileRecord & { title?: string; headlineBadge?: string }) | null; + return record?.title || record?.headlineBadge || "Tennis Coach"; + }, [coachProfile]); + const googleCalendarHref = useMemo( + () => buildGoogleCalendarHref(lesson, lessonTitle, lessonDescription, locationTitle), + [lesson, lessonDescription, lessonTitle, locationTitle], + ); + const statusVariant = isConfirmed ? "confirmed" : isAwaitingCoachConfirmation ? "awaiting" : "payment"; + const statusTitle = isConfirmed + ? "Lesson confirmed" + : isAwaitingCoachConfirmation + ? "Awaiting coach confirmation" + : "Payment pending"; + const statusBody = isConfirmed + ? `${coachName} has confirmed your session. You’re set for ${lessonDateLabel} at ${lessonTimeRange.split(" · ")[0]}.` + : isAwaitingCoachConfirmation + ? `${coachName} still needs to confirm this lesson. You’ll be notified as soon as they do.` + : "Accept and pay to lock this lesson in."; + const sidebarStatusLabel = isConfirmed + ? "Booked" + : isAwaitingCoachConfirmation + ? "Pending coach" + : "Needs payment"; + const sessionMetaChips = [ + lessonDateBadgeLabel, + lessonLevelLabel, + lessonTypeVariantLabel, + ].filter(Boolean) as string[]; + const eligibleCredits = useMemo( + () => credits.filter((purchase) => isCreditEligibleForLesson(purchase, lesson)), + [credits, lesson], + ); useEffect(() => { if (!token || !coachId) return; @@ -403,13 +598,12 @@ const PlayerLessonDetailsPage = () => { includeExpired: false, }); if (cancelled) return; - const eligible = (creditsResponse.purchases ?? []).filter((purchase) => { - const remaining = parseNumber(purchase.credits_remaining) ?? 0; - return remaining > 0 && purchase.id != null; - }); + const eligible = (creditsResponse.purchases ?? []).filter( + (purchase) => purchase.id != null && isCreditEligibleForLesson(purchase, lesson), + ); setCredits(eligible); setSelectedCreditId(eligible.length ? String(eligible[0].id) : null); - if (eligible.length) { + if (eligible.length && !isGroupLessonType(lesson)) { setPaymentChoice("credits"); } } catch (err) { @@ -594,6 +788,11 @@ const PlayerLessonDetailsPage = () => { lessonId: lesson.id, purchaseId: selectedCreditId, }); + await updatePlayerLesson({ + token, + lessonId: lesson.id, + status: "CONFIRMED", + }); } else { if (!selectedPaymentMethodId) { throw new Error("Select a payment method to continue."); @@ -685,333 +884,412 @@ const PlayerLessonDetailsPage = () => { } }, [coachId, coachProfile, lesson, token]); - const content = useMemo(() => { - if (loading) { - return ( -
- Loading lesson details… -
- ); - } + const handleShare = useCallback(async () => { + const shareUrl = typeof window !== "undefined" ? window.location.href : ""; + if (!shareUrl) return; - if (error) { - return ( -
- - {error} -
- ); + if (navigator.share) { + try { + await navigator.share({ + title: lessonTitle, + text: `View ${lessonTitle} with ${coachName}`, + url: shareUrl, + }); + return; + } catch { + // fallback to clipboard + } } - if (!lesson) { - return ( -
- Lesson not found. -
- ); + try { + await navigator.clipboard.writeText(shareUrl); + } catch { + // ignore clipboard failures } + }, [coachName, lessonTitle]); - return ( - <> -
-
- {isConfirmed ? : isAwaitingCoachConfirmation ? : } -
-
-

- {isConfirmed - ? "Lesson confirmed" - : isAwaitingCoachConfirmation - ? "Awaiting confirmation" - : "Payment pending"} -

-

- {isConfirmed - ? `${getCoachName(lesson)} has confirmed. See you on ${formatDateLabel(lesson.start_date_time)} at ${formatTimeRangeLabel(lesson.start_date_time, lesson.end_date_time).split(" · ")[0]}.` - : isAwaitingCoachConfirmation - ? `${getCoachName(lesson)} hasn't confirmed this lesson yet. You'll be notified when they do.` - : "Accept and pay to confirm this lesson."} -

-
-
- -
-
- {getCoachAvatarUrl(lesson) ? ( - {getCoachName(lesson)} - ) : ( - {getInitials(getCoachName(lesson))} - )} -
-
-

{getCoachName(lesson)}

-

Tennis Coach

-
-
- -
-
-
- -
-
-

{formatDateLabel(lesson.start_date_time)}

-

{formatTimeRangeLabel(lesson.start_date_time, lesson.end_date_time)}

-
-
-
-
- -
-
-

{getLocationTitle(lesson)}

-
+ return ( + +
+ {loading ? ( +
+ Loading lesson details…
-
-
- -
-
-

{getLessonTypeLabel(lesson)}

-
+ ) : error ? ( +
+ + {error}
-
-
- -
-
-

- {lessonTotalAmountCents != null - ? `$${(lessonTotalAmountCents / 100).toFixed(2)} ${isConfirmed ? "paid" : "total"}` - : isConfirmed - ? "Payment completed" - : "Payment pending"} -

- {lessonTotalAmountCents != null ? ( -

- {[ - lessonPriceBreakdown ? `$${lessonPriceBreakdown.coachFee.toFixed(2)} coach fee` : null, - lessonPriceBreakdown ? `$${lessonPriceBreakdown.creditFee.toFixed(2)} credit fee` : null, - lessonPriceBreakdown ? `$${lessonPriceBreakdown.serviceFee.toFixed(2)} service fee` : null, - ] - .filter(Boolean) - .join(" · ")} -

- ) : null} -
+ ) : !lesson ? ( +
+ Lesson not found.
-
- -
- {isAwaitingCoachConfirmation ? ( -
-

What happens next

-
-
- 1 - A confirmation email has been sent to your inbox -
-
- 2 - {getCoachName(lesson)} will confirm this lesson soon -
-
- 3 - Your card won't be charged until {getCoachName(lesson)} confirms -
+ ) : ( +
+
+ +
Lesson details
+
+
- ) : null} - {isConfirmed ? ( -
- -

Cancel at least 24 hours before your lesson for a full refund. Cancellations within 24 hours are non-refundable.

-
- ) : null} - {requiresPlayerAcceptance ? ( - <> -

Payment pending. Accept and pay to confirm this lesson.

-
- - - -
- {paymentChoice === "credits" ? ( -
- {creditsLoading ?

Loading credits…

: null} - {creditsError ?

{creditsError}

: null} - {!creditsLoading && !credits.length ?

No eligible credits available for this coach.

: null} - {credits.length > 0 ? ( - - ) : null} -
- ) : paymentChoice === "apple-pay" ? ( -
-

- {isApplePayReady - ? "Pay instantly with Apple Pay." - : "Apple Pay is not available on this device/browser."} + Get directions + +

+
+ +
+

Your coach

+
+
+ {coachAvatarUrl ? ( + + ) : ( + + {getInitials(coachName)} + + )} +
+

{coachName}

+
+ {coachTitle} + {lessonTypeVariantLabel} +
+
+
+

{coachAboutCopy}

+ {coachId ? ( + + View full profile → + + ) : null} +
+
+ + + + + + )} ); From ba1a6521bcba02d89004144e33a48e64eabe1726 Mon Sep 17 00:00:00 2001 From: sahilkashyap64 Date: Sat, 9 May 2026 04:31:18 +0530 Subject: [PATCH 2/3] group lesson buy consume credit and redirect --- src/pages/PlayerLessonDetailsPage.tsx | 82 ++++++++++++++++----------- 1 file changed, 49 insertions(+), 33 deletions(-) diff --git a/src/pages/PlayerLessonDetailsPage.tsx b/src/pages/PlayerLessonDetailsPage.tsx index b2c3305b..d80989ba 100644 --- a/src/pages/PlayerLessonDetailsPage.tsx +++ b/src/pages/PlayerLessonDetailsPage.tsx @@ -457,6 +457,14 @@ const PlayerLessonDetailsPage = () => { }; }, [loadLesson]); + useEffect(() => { + if (!lesson || !isGroupLessonType(lesson)) { + return; + } + + navigate(`/group-lessons/${lesson.id}`, { replace: true }); + }, [lesson, navigate]); + const lessonStatus = useMemo(() => parseLessonStatus(lesson), [lesson]); const isPaymentPending = lessonStatus === 0; const isConfirmed = lessonStatus === 1; @@ -541,6 +549,8 @@ const PlayerLessonDetailsPage = () => { () => credits.filter((purchase) => isCreditEligibleForLesson(purchase, lesson)), [credits, lesson], ); + const hasEligibleCredits = eligibleCredits.length > 0; + const shouldUseGroupCredits = Boolean(lesson && isGroupLessonType(lesson) && hasEligibleCredits); useEffect(() => { if (!token || !coachId) return; @@ -603,7 +613,7 @@ const PlayerLessonDetailsPage = () => { ); setCredits(eligible); setSelectedCreditId(eligible.length ? String(eligible[0].id) : null); - if (eligible.length && !isGroupLessonType(lesson)) { + if (eligible.length) { setPaymentChoice("credits"); } } catch (err) { @@ -1150,38 +1160,42 @@ const PlayerLessonDetailsPage = () => { {requiresPlayerAcceptance ? (
-

Choose how you want to pay.

-
- - - -
+

+ {shouldUseGroupCredits ? "Use an eligible package credit to confirm this group lesson." : "Choose how you want to pay."} +

+ {!shouldUseGroupCredits ? ( +
+ + + +
+ ) : null} {paymentChoice === "credits" ? (
@@ -1256,6 +1270,8 @@ const PlayerLessonDetailsPage = () => { > {submitting ? "Processing…" + : shouldUseGroupCredits || paymentChoice === "credits" + ? "Use credit" : paymentChoice === "apple-pay" ? "Accept with Apple Pay" : "Accept lesson"} From 355c83afb87fa777272009ebfd5ece413f7dc48c Mon Sep 17 00:00:00 2001 From: sahilkashyap64 Date: Sat, 9 May 2026 04:34:07 +0530 Subject: [PATCH 3/3] host match added --- src/pages/DashboardPage.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/pages/DashboardPage.css b/src/pages/DashboardPage.css index 660d36b5..82c41675 100644 --- a/src/pages/DashboardPage.css +++ b/src/pages/DashboardPage.css @@ -645,7 +645,7 @@ .ph-play-head-action { flex-shrink: 0; - display: none; + display: inline-flex; align-items: center; gap: 8px; min-height: 38px; @@ -1537,6 +1537,18 @@ width: 100%; } + .ph-play-head-action { + gap: 5px; + min-height: 32px; + padding: 0 10px; + font-size: 12px; + } + + .ph-play-head-action svg { + width: 14px; + height: 14px; + } + .ph-day-tabs, .ph-type-tabs, .ph-activities { @@ -1770,10 +1782,6 @@ gap: 6px; } - .ph-play-head-action { - display: inline-flex; - } - .ph-schedule-copy strong { font-size: 15px; }