corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(space): restore end session modal styling

Browse Source
This commit is contained in:
corpi
2026-03-17 19:29:42 +09:00
parent 3204609f3d
commit 99146fb08b
1 changed files with 28 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx
View File

@@ -113,18 +113,6 @@ export const EndSessionConfirmModal = ({
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95', 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' ? ( {activeStage === 'decision' ? (
<div className="flex w-full animate-fade-in-up flex-col items-center"> <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"> <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 ? ( {activeStage === 'result-success' && completionResult ? (
<div className="flex w-full animate-fade-in-up flex-col items-center"> <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"> <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
{endSessionCopy.resultSuccess.eyebrow} {endSessionCopy.resultSuccess.eyebrow}
</p> </p>
@@ -237,18 +226,18 @@ export const EndSessionConfirmModal = ({
{endSessionCopy.resultSuccess.description} {endSessionCopy.resultSuccess.description}
</p> </p>
<div className="mb-12 grid w-full max-w-lg gap-4 text-left"> <div className="mb-12 flex w-full max-w-lg flex-col gap-4">
<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"> <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-[11px] font-bold uppercase tracking-[0.2em] text-white/40"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSuccess.focusedLabel} {endSessionCopy.resultSuccess.focusedLabel}
</p> </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} {focusedMinutes}
<span className="ml-2 text-3xl font-medium text-white/50">m</span> <span className="ml-2 text-3xl font-medium text-white/50">m</span>
</p> </p>
</div> </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"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSuccess.goalLabel} {endSessionCopy.resultSuccess.goalLabel}
</p> </p>
@@ -258,7 +247,7 @@ export const EndSessionConfirmModal = ({
</div> </div>
{hasThoughts ? ( {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"> <div className="mb-4 flex items-center justify-between">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40"> <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSuccess.thoughtsLabel} {endSessionCopy.resultSuccess.thoughtsLabel}
@@ -295,7 +284,7 @@ export const EndSessionConfirmModal = ({
{activeStage === 'result-saved' && completionResult ? ( {activeStage === 'result-saved' && completionResult ? (
<div className="flex w-full animate-fade-in-up flex-col items-center"> <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"> <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
{endSessionCopy.resultSaved.eyebrow} {endSessionCopy.resultSaved.eyebrow}
</p> </p>
@@ -309,19 +298,18 @@ export const EndSessionConfirmModal = ({
{endSessionCopy.resultSaved.description} {endSessionCopy.resultSaved.description}
</p> </p>
<div className="mb-12 grid w-full max-w-lg gap-4 text-left"> <div className="mb-12 flex w-full max-w-lg flex-col gap-4">
<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"> <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-[11px] font-bold uppercase tracking-[0.2em] text-white/40"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.focusedLabel} {endSessionCopy.resultSaved.focusedLabel}
</p> </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} {focusedMinutes}
<span className="ml-2 text-3xl font-medium text-white/50">m</span> <span className="ml-2 text-3xl font-medium text-white/50">m</span>
</p> </p>
</div> </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 text-left backdrop-blur-md shadow-2xl">
<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"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.goalStatusLabel} {endSessionCopy.resultSaved.goalStatusLabel}
</p> </p>
@@ -330,7 +318,7 @@ export const EndSessionConfirmModal = ({
</p> </p>
</div> </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"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.goalLabel} {endSessionCopy.resultSaved.goalLabel}
</p> </p>
@@ -338,10 +326,9 @@ export const EndSessionConfirmModal = ({
{completionResult.goalText} {completionResult.goalText}
</p> </p>
</div> </div>
</div>
{hasThoughts ? ( {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"> <div className="mb-4 flex items-center justify-between">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40"> <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.thoughtsLabel} {endSessionCopy.resultSaved.thoughtsLabel}