style(space): align goal complete sheet with end session tone
This commit is contained in:
@@ -32,11 +32,11 @@ export const GoalCompleteSheet = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-[24px] border border-white/8 bg-black/14 px-4 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
|
||||
<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">
|
||||
{copy.space.goalComplete.currentGoalLabel}
|
||||
</p>
|
||||
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
|
||||
<p className="text-xl font-light leading-relaxed tracking-wide text-white/80">
|
||||
{trimmedCurrentGoal}
|
||||
</p>
|
||||
</div>
|
||||
@@ -82,83 +82,85 @@ export const GoalCompleteSheet = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'pointer-events-none fixed inset-0 z-50 flex items-center justify-center px-4 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
open ? 'opacity-100' : 'opacity-0',
|
||||
'pointer-events-none fixed inset-0 z-50 flex items-center justify-center px-4',
|
||||
)}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(5,7,11,0.18)_0%,rgba(2,6,23,0.58)_45%,rgba(2,6,23,0.78)_100%)] backdrop-blur-[10px] transition-opacity duration-300',
|
||||
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',
|
||||
)}
|
||||
/>
|
||||
|
||||
<section
|
||||
className={cn(
|
||||
'relative w-full max-w-[42rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.94)_0%,rgba(9,12,18,0.92)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.48)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
|
||||
)}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="goal-complete-title"
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 bg-[radial-gradient(110%_90%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
|
||||
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
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-px bg-white/18"
|
||||
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="relative px-7 py-7 md:px-9 md:py-8">
|
||||
<header className="text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
|
||||
<span className="text-[20px] text-white/88">⌛</span>
|
||||
</div>
|
||||
<p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
|
||||
{copy.space.completionResult.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="goal-complete-title"
|
||||
className="mx-auto mt-2 max-w-[28rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
|
||||
<div
|
||||
className={cn(
|
||||
'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',
|
||||
)}
|
||||
>
|
||||
<section
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="goal-complete-title"
|
||||
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">
|
||||
{copy.space.completionResult.eyebrow}
|
||||
</p>
|
||||
<h3
|
||||
id="goal-complete-title"
|
||||
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)]"
|
||||
>
|
||||
{copy.space.goalComplete.timerTitle}
|
||||
</h3>
|
||||
<p className="mb-12 max-w-md text-[15px] font-light leading-relaxed text-white/50">
|
||||
{copy.space.goalComplete.timerDescription}
|
||||
</p>
|
||||
|
||||
{goalCard}
|
||||
|
||||
<footer className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExtend}
|
||||
disabled={isSubmitting || !canExtend}
|
||||
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"
|
||||
>
|
||||
{copy.space.goalComplete.timerTitle}
|
||||
</h3>
|
||||
<p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
|
||||
{copy.space.goalComplete.timerDescription}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
{goalCard}
|
||||
|
||||
<footer className="grid grid-cols-2 gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExtend}
|
||||
disabled={isSubmitting || !canExtend}
|
||||
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{submissionMode === 'extend'
|
||||
? copy.space.goalComplete.extendPending
|
||||
: copy.space.goalComplete.extendButton}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinish}
|
||||
disabled={isSubmitting}
|
||||
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{submissionMode === 'extend'
|
||||
? copy.space.goalComplete.extendPending
|
||||
: copy.space.goalComplete.extendButton}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinish}
|
||||
disabled={isSubmitting}
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
{submissionMode === 'finish'
|
||||
? copy.space.goalComplete.timerFinishPending
|
||||
: copy.space.goalComplete.timerFinishButton}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</span>
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user