refactor(space): refine end session modal motion
This commit is contained in:
@@ -36,21 +36,27 @@ export const EndSessionConfirmModal = ({
|
||||
|
||||
const endSessionCopy = copy.space.endSession;
|
||||
const trimmedGoal = currentGoal.trim() || copy.space.focusHud.goalFallback;
|
||||
|
||||
const activeStage = completionResult
|
||||
? completionResult.completionSource === 'manual-end'
|
||||
? 'result-saved'
|
||||
: 'result-success'
|
||||
: stage;
|
||||
|
||||
const focusedMinutes = completionResult
|
||||
? formatFocusedMinutes(completionResult.focusedSeconds)
|
||||
: 0;
|
||||
|
||||
const hasThoughts = Boolean(completionResult && completionResult.thoughts.length > 0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setStage('decision');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
// Add a slight delay before resetting state so the fade-out animation can finish smoothly
|
||||
const timer = setTimeout(() => {
|
||||
setStage('decision');
|
||||
setIsSubmitting(false);
|
||||
}, 700);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
|
||||
const allowEscape = !isSubmitting && !completionResult;
|
||||
@@ -67,10 +73,7 @@ export const EndSessionConfirmModal = ({
|
||||
}, [completionResult, isSubmitting, onClose, open]);
|
||||
|
||||
const handleFinishHere = async () => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onFinishHere();
|
||||
@@ -80,10 +83,7 @@ export const EndSessionConfirmModal = ({
|
||||
};
|
||||
|
||||
const handleSaveAndReturn = async () => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onSaveAndReturn();
|
||||
@@ -95,59 +95,70 @@ export const EndSessionConfirmModal = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
open ? 'opacity-100' : 'opacity-0',
|
||||
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4',
|
||||
)}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
{/* Abyssal Backdrop: Direct filter animation to prevent WebKit blur pop-in */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
|
||||
open ? 'opacity-100' : 'opacity-0',
|
||||
'absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] transform-gpu',
|
||||
open ? 'bg-black/80 backdrop-blur-[40px]' : 'bg-transparent backdrop-blur-none',
|
||||
)}
|
||||
/>
|
||||
>
|
||||
<div className={cn("absolute inset-0 bg-[url('/noise.png')] mix-blend-overlay pointer-events-none transition-opacity duration-1000", open ? "opacity-20" : "opacity-0")} />
|
||||
<div className={cn("absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_70%)] pointer-events-none transition-opacity duration-1000", open ? "opacity-100" : "opacity-0")} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
|
||||
'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
'max-h-[100dvh] overflow-y-auto overscroll-y-contain py-12 sm:py-16 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
|
||||
open ? 'pointer-events-auto translate-y-0 scale-100 opacity-100' : 'pointer-events-none translate-y-12 scale-[0.98] opacity-0',
|
||||
)}
|
||||
>
|
||||
{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">
|
||||
<div className="flex w-full flex-col items-center animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<p className="mb-6 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 drop-shadow-sm">
|
||||
{endSessionCopy.decision.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="end-session-title"
|
||||
className="mb-10 text-3xl font-light leading-tight tracking-tight text-white md:text-5xl"
|
||||
className="mb-12 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
|
||||
>
|
||||
{endSessionCopy.decision.title}
|
||||
</h3>
|
||||
|
||||
<div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{/* Volumetric Card */}
|
||||
<div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
|
||||
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
||||
{endSessionCopy.decision.goalLabel}
|
||||
</p>
|
||||
<p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
|
||||
<p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
|
||||
{/* Primary CTA (The Pearl) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinishHere}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
|
||||
className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting
|
||||
? copy.space.goalComplete.finishPending
|
||||
: endSessionCopy.decision.finishedAnswer}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<span className="relative z-10">
|
||||
{isSubmitting
|
||||
? copy.space.goalComplete.finishPending
|
||||
: endSessionCopy.decision.finishedAnswer}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Secondary CTA (Ghost Button) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStage('unfinished-confirm')}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
|
||||
className="flex-1 rounded-full border border-white/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{endSessionCopy.decision.unfinishedAnswer}
|
||||
</button>
|
||||
@@ -157,7 +168,7 @@ export const EndSessionConfirmModal = ({
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="mt-8 text-[12px] font-medium text-white/30 underline decoration-transparent underline-offset-4 transition-colors hover:text-white/70 hover:decoration-white/30 disabled:opacity-50"
|
||||
className="mt-10 text-[11px] font-light uppercase tracking-widest text-white/20 transition-all duration-300 hover:text-white/60 disabled:opacity-50"
|
||||
>
|
||||
{endSessionCopy.decision.cancelButton}
|
||||
</button>
|
||||
@@ -165,26 +176,26 @@ export const EndSessionConfirmModal = ({
|
||||
) : null}
|
||||
|
||||
{activeStage === 'unfinished-confirm' ? (
|
||||
<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.12),transparent)] shadow-[0_0_32px_rgba(255,255,255,0.08)]" />
|
||||
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
<div className="flex w-full flex-col items-center animate-in fade-in zoom-in-95 duration-700">
|
||||
<div className="mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)] backdrop-blur-md" />
|
||||
<p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30">
|
||||
{endSessionCopy.unfinishedConfirm.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="end-session-title"
|
||||
className="mb-6 text-3xl font-light tracking-tight text-white md:text-4xl"
|
||||
className="mb-6 text-3xl font-extralight tracking-tight text-white/90 md:text-4xl"
|
||||
>
|
||||
{endSessionCopy.unfinishedConfirm.title}
|
||||
</h3>
|
||||
<p className="mb-10 max-w-md text-[16px] font-light leading-relaxed text-white/60">
|
||||
<p className="mb-12 max-w-md text-[15px] font-light leading-relaxed text-white/50">
|
||||
{endSessionCopy.unfinishedConfirm.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
|
||||
<p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
<div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
|
||||
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
||||
{endSessionCopy.decision.goalLabel}
|
||||
</p>
|
||||
<p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
|
||||
<p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
|
||||
@@ -192,7 +203,7 @@ export const EndSessionConfirmModal = ({
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
|
||||
className="flex-1 rounded-full border border-white/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{endSessionCopy.unfinishedConfirm.keepFocusingButton}
|
||||
</button>
|
||||
@@ -200,59 +211,85 @@ export const EndSessionConfirmModal = ({
|
||||
type="button"
|
||||
onClick={handleSaveAndReturn}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.18)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
|
||||
className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting
|
||||
? endSessionCopy.unfinishedConfirm.saveAndReturnPending
|
||||
: endSessionCopy.unfinishedConfirm.saveAndReturnButton}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<span className="relative z-10">
|
||||
{isSubmitting
|
||||
? endSessionCopy.unfinishedConfirm.saveAndReturnPending
|
||||
: endSessionCopy.unfinishedConfirm.saveAndReturnButton}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{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}
|
||||
{(activeStage === 'result-success' || activeStage === 'result-saved') && completionResult ? (
|
||||
<div className="flex w-full flex-col items-center">
|
||||
{/* Stage dependent subtle glow */}
|
||||
<div className={cn(
|
||||
"mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/10 backdrop-blur-md animate-in fade-in zoom-in duration-1000",
|
||||
activeStage === 'result-success'
|
||||
? "bg-white/[0.04] shadow-[0_0_50px_rgba(255,255,255,0.1),inset_0_0_20px_rgba(255,255,255,0.05)]"
|
||||
: "bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)]"
|
||||
)} />
|
||||
|
||||
<p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-150 fill-mode-both">
|
||||
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.eyebrow : endSessionCopy.resultSaved.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="end-session-title"
|
||||
className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
|
||||
className="mb-8 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300 fill-mode-both drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
|
||||
>
|
||||
{endSessionCopy.resultSuccess.title}
|
||||
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.title : endSessionCopy.resultSaved.title}
|
||||
</h3>
|
||||
<p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
|
||||
{endSessionCopy.resultSuccess.description}
|
||||
<p className="mb-14 max-w-md text-[15px] font-light leading-relaxed text-white/50 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500 fill-mode-both">
|
||||
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.description : endSessionCopy.resultSaved.description}
|
||||
</p>
|
||||
|
||||
<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">
|
||||
<div className="mb-16 flex w-full max-w-lg flex-col gap-4 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-700 fill-mode-both">
|
||||
{/* The Hero Number */}
|
||||
<div className="rounded-3xl border border-white/[0.04] bg-white/[0.01] px-6 py-10 text-center shadow-[inset_0_0_30px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.3)] backdrop-blur-xl relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.05),transparent_50%)] pointer-events-none" />
|
||||
<p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.4em] text-white/30">
|
||||
{endSessionCopy.resultSuccess.focusedLabel}
|
||||
</p>
|
||||
<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 className="relative inline-block">
|
||||
<div className="absolute inset-0 bg-white/20 blur-[40px] rounded-full" />
|
||||
<p className="relative text-7xl font-thin tracking-tighter text-white drop-shadow-md md:text-8xl">
|
||||
{focusedMinutes}
|
||||
<span className="ml-2 text-4xl font-light text-white/30">m</span>
|
||||
</p>
|
||||
</div>
|
||||
</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">
|
||||
{activeStage === 'result-saved' && (
|
||||
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-6 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
||||
<p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
||||
{endSessionCopy.resultSaved.goalStatusLabel}
|
||||
</p>
|
||||
<p className="text-[13px] font-light uppercase tracking-[0.2em] text-white/50">
|
||||
{endSessionCopy.resultSaved.goalStatusValue}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
||||
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
||||
{endSessionCopy.resultSuccess.goalLabel}
|
||||
</p>
|
||||
<p className="text-lg font-medium text-white/90">
|
||||
<p className="text-[17px] font-light leading-relaxed tracking-wide text-white/80">
|
||||
{completionResult.goalText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{hasThoughts ? (
|
||||
<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">
|
||||
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<p className="text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
||||
{endSessionCopy.resultSuccess.thoughtsLabel}
|
||||
</p>
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
|
||||
<span className="inline-flex h-5 items-center justify-center rounded-full border border-white/10 bg-white/5 px-2.5 text-[9px] font-medium text-white/50">
|
||||
{completionResult.thoughts.length}
|
||||
</span>
|
||||
</div>
|
||||
@@ -260,9 +297,9 @@ export const EndSessionConfirmModal = ({
|
||||
{completionResult.thoughts.map((thought) => (
|
||||
<div
|
||||
key={thought.id}
|
||||
className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
|
||||
className="rounded-2xl border border-white/[0.02] bg-black/40 px-5 py-4"
|
||||
>
|
||||
<p className="text-[14px] leading-relaxed text-white/80">
|
||||
<p className="text-[14px] font-light leading-relaxed text-white/70">
|
||||
{thought.text}
|
||||
</p>
|
||||
</div>
|
||||
@@ -272,94 +309,19 @@ export const EndSessionConfirmModal = ({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBackToLobby}
|
||||
className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.5)] active:scale-95"
|
||||
>
|
||||
{endSessionCopy.resultSuccess.backToLobby}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{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)]" />
|
||||
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
{endSessionCopy.resultSaved.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="end-session-title"
|
||||
className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
|
||||
>
|
||||
{endSessionCopy.resultSaved.title}
|
||||
</h3>
|
||||
<p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
|
||||
{endSessionCopy.resultSaved.description}
|
||||
</p>
|
||||
|
||||
<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-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 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 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 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}
|
||||
</p>
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
|
||||
{completionResult.thoughts.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{completionResult.thoughts.map((thought) => (
|
||||
<div
|
||||
key={thought.id}
|
||||
className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
|
||||
>
|
||||
<p className="text-[14px] leading-relaxed text-white/80">
|
||||
{thought.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-1000 fill-mode-both">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBackToLobby}
|
||||
className="group relative overflow-hidden rounded-full bg-white px-14 py-5 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.03] hover:shadow-[0_0_50px_rgba(255,255,255,0.25)] active:scale-[0.98]"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<span className="relative z-10">
|
||||
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.backToLobby : endSessionCopy.resultSaved.backToLobby}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBackToLobby}
|
||||
className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.45)] active:scale-95"
|
||||
>
|
||||
{endSessionCopy.resultSaved.backToLobby}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user