fix(space): restore end session modal styling
This commit is contained in:
@@ -113,18 +113,6 @@ export const EndSessionConfirmModal = ({
|
||||
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
|
||||
)}
|
||||
>
|
||||
{!completionResult ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="absolute right-0 top-0 p-2 text-white/40 transition-colors hover:text-white"
|
||||
aria-label="Close end session modal"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{activeStage === 'decision' ? (
|
||||
<div className="flex w-full animate-fade-in-up flex-col items-center">
|
||||
<p className="mb-6 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
@@ -224,6 +212,7 @@ export const EndSessionConfirmModal = ({
|
||||
|
||||
{activeStage === 'result-success' && completionResult ? (
|
||||
<div className="flex w-full animate-fade-in-up flex-col items-center">
|
||||
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/20 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.16),transparent)] shadow-[0_0_50px_rgba(255,255,255,0.16)]" />
|
||||
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
{endSessionCopy.resultSuccess.eyebrow}
|
||||
</p>
|
||||
@@ -237,18 +226,18 @@ export const EndSessionConfirmModal = ({
|
||||
{endSessionCopy.resultSuccess.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-12 grid w-full max-w-lg gap-4 text-left">
|
||||
<div className="flex flex-col items-center justify-center rounded-3xl border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.05)_0%,transparent_100%)] px-8 py-8 text-center shadow-2xl backdrop-blur-md transition-transform hover:scale-[1.02] hover:border-white/20">
|
||||
<p className="mb-2 text-[11px] font-bold uppercase tracking-[0.2em] text-white/40">
|
||||
<div className="mb-12 flex w-full max-w-lg flex-col gap-4">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-7 text-center backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSuccess.focusedLabel}
|
||||
</p>
|
||||
<p className="text-6xl font-light tracking-tighter text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.2)] md:text-7xl">
|
||||
<p className="text-5xl font-light tracking-tight text-white md:text-6xl">
|
||||
{focusedMinutes}
|
||||
<span className="ml-2 text-3xl font-medium text-white/50">m</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSuccess.goalLabel}
|
||||
</p>
|
||||
@@ -258,7 +247,7 @@ export const EndSessionConfirmModal = ({
|
||||
</div>
|
||||
|
||||
{hasThoughts ? (
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSuccess.thoughtsLabel}
|
||||
@@ -295,7 +284,7 @@ export const EndSessionConfirmModal = ({
|
||||
|
||||
{activeStage === 'result-saved' && completionResult ? (
|
||||
<div className="flex w-full animate-fade-in-up flex-col items-center">
|
||||
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.09),transparent)] shadow-[0_0_28px_rgba(255,255,255,0.06)]" />
|
||||
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.09),transparent)]" />
|
||||
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
{endSessionCopy.resultSaved.eyebrow}
|
||||
</p>
|
||||
@@ -309,39 +298,37 @@ export const EndSessionConfirmModal = ({
|
||||
{endSessionCopy.resultSaved.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-12 grid w-full max-w-lg gap-4 text-left">
|
||||
<div className="flex flex-col items-center justify-center rounded-3xl border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.04)_0%,transparent_100%)] px-8 py-8 text-center shadow-2xl backdrop-blur-md">
|
||||
<p className="mb-2 text-[11px] font-bold uppercase tracking-[0.2em] text-white/40">
|
||||
<div className="mb-12 flex w-full max-w-lg flex-col gap-4">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-7 text-center backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.focusedLabel}
|
||||
</p>
|
||||
<p className="text-6xl font-light tracking-tighter text-white md:text-7xl">
|
||||
<p className="text-5xl font-light tracking-tight text-white md:text-6xl">
|
||||
{focusedMinutes}
|
||||
<span className="ml-2 text-3xl font-medium text-white/50">m</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-[0.9fr_1.1fr]">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.goalStatusLabel}
|
||||
</p>
|
||||
<p className="text-sm font-medium uppercase tracking-[0.18em] text-white/78">
|
||||
{endSessionCopy.resultSaved.goalStatusValue}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.goalStatusLabel}
|
||||
</p>
|
||||
<p className="text-sm font-medium uppercase tracking-[0.18em] text-white/78">
|
||||
{endSessionCopy.resultSaved.goalStatusValue}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.goalLabel}
|
||||
</p>
|
||||
<p className="text-lg font-medium text-white/90">
|
||||
{completionResult.goalText}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.goalLabel}
|
||||
</p>
|
||||
<p className="text-lg font-medium text-white/90">
|
||||
{completionResult.goalText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{hasThoughts ? (
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
|
||||
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSaved.thoughtsLabel}
|
||||
|
||||
Reference in New Issue
Block a user