-
+
+
{copy.space.focusHud.returnPromptRefocus}
-
+
{copy.space.focusHud.returnPromptRefocusHint}
-
→
+
→
>
)}
diff --git a/src/widgets/space-focus-hud/ui/overlayStyles.ts b/src/widgets/space-focus-hud/ui/overlayStyles.ts
index 964c3e0..7760adf 100644
--- a/src/widgets/space-focus-hud/ui/overlayStyles.ts
+++ b/src/widgets/space-focus-hud/ui/overlayStyles.ts
@@ -1,11 +1,19 @@
export const HUD_TRAY_SHELL =
'pointer-events-auto relative mt-3 w-full overflow-hidden rounded-[22px] border border-white/10 bg-[#101318]/30 text-white shadow-[0_12px_28px_rgba(2,6,23,0.14)] backdrop-blur-[8px] backdrop-saturate-125';
+export const HUD_TRAY_SHELL_BREAK =
+ 'pointer-events-auto relative mt-3 w-full overflow-hidden rounded-[22px] border border-emerald-200/14 bg-[rgba(10,20,18,0.34)] text-white shadow-[0_12px_28px_rgba(2,6,23,0.12)] backdrop-blur-[8px] backdrop-saturate-125';
+
export const HUD_TRAY_LAYER =
'pointer-events-none absolute inset-0 rounded-[22px] bg-[linear-gradient(180deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.025)_24%,rgba(255,255,255,0.01)_100%)]';
+export const HUD_TRAY_LAYER_BREAK =
+ 'pointer-events-none absolute inset-0 rounded-[22px] bg-[linear-gradient(180deg,rgba(110,231,183,0.10)_0%,rgba(255,255,255,0.025)_22%,rgba(255,255,255,0.01)_100%)]';
+
export const HUD_TRAY_HAIRLINE = 'pointer-events-none absolute inset-x-0 top-0 h-px bg-white/16';
+export const HUD_TRAY_HAIRLINE_BREAK = 'pointer-events-none absolute inset-x-0 top-0 h-px bg-emerald-200/18';
+
export const HUD_FIELD =
'h-11 w-full rounded-[18px] border border-white/10 bg-black/14 px-3.5 text-[0.98rem] tracking-tight text-white placeholder:text-white/30 focus:border-white/20 focus:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/8';
@@ -15,6 +23,9 @@ export const HUD_OPTION_ROW =
export const HUD_OPTION_ROW_PRIMARY =
'border-white/12 bg-black/14 hover:border-white/18 hover:bg-black/18';
+export const HUD_OPTION_ROW_BREAK =
+ 'border-emerald-200/12 bg-[rgba(16,38,31,0.28)] hover:border-emerald-200/18 hover:bg-[rgba(16,38,31,0.38)]';
+
export const HUD_OPTION_CHEVRON =
'mt-0.5 shrink-0 text-[13px] text-white/28 transition-colors duration-200 group-hover:text-white/52';
@@ -27,6 +38,12 @@ export const HUD_PAUSE_TITLE =
export const HUD_PAUSE_BODY =
'mt-2 max-w-[23rem] text-[13px] leading-[1.6] text-white/58 md:text-[13.5px]';
+export const HUD_RETURN_TITLE =
+ 'mt-2 max-w-[24rem] text-[1.08rem] font-medium leading-[1.36] tracking-[-0.02em] text-white/95 md:text-[1.14rem]';
+
+export const HUD_RETURN_BODY =
+ 'mt-2 max-w-[23rem] text-[13px] leading-[1.58] text-white/58';
+
export const HUD_TEXT_LINK =
'text-[12px] font-medium tracking-[0.08em] text-white/62 underline decoration-white/16 underline-offset-4 transition-all duration-200 hover:text-white/84 hover:decoration-white/28 disabled:cursor-default disabled:text-white/26 disabled:no-underline';
diff --git a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
index b347a49..d9874d7 100644
--- a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
+++ b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
@@ -42,6 +42,7 @@ export const SpaceTimerHudWidget = ({
onResetClick,
}: SpaceTimerHudWidgetProps) => {
const { isBreatheMode, triggerRestart } = useRestart30s();
+ const isBreakPhase = hasActiveSession && sessionPhase === 'break';
const modeLabel = isBreatheMode
? RECOVERY_30S_MODE_LABEL
: !hasActiveSession
@@ -63,15 +64,19 @@ export const SpaceTimerHudWidget = ({
className={cn(
'relative z-10 flex h-[3.5rem] items-center justify-between gap-6 overflow-hidden rounded-full px-5 transition-colors',
isImmersionMode
- ? 'border border-white/10 bg-black/20 backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)]'
- : 'border border-white/15 bg-black/30 backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.16)]',
+ ? isBreakPhase
+ ? 'border border-emerald-200/14 bg-[rgba(10,20,18,0.26)] backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.10)]'
+ : 'border border-white/10 bg-black/20 backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)]'
+ : isBreakPhase
+ ? 'border border-emerald-200/16 bg-[rgba(10,20,18,0.32)] backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.14)]'
+ : 'border border-white/15 bg-black/30 backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.16)]',
)}
>
{modeLabel}
@@ -114,13 +119,21 @@ export const SpaceTimerHudWidget = ({
className={cn(
'inline-flex h-8 w-8 items-center justify-center rounded-full text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 active:scale-95 disabled:cursor-not-allowed disabled:opacity-30',
isImmersionMode
- ? 'text-white/70 hover:bg-white/10 hover:text-white'
- : 'text-white/80 hover:bg-white/15 hover:text-white',
+ ? isBreakPhase
+ ? 'text-white/74 hover:bg-emerald-100/10 hover:text-white'
+ : 'text-white/70 hover:bg-white/10 hover:text-white'
+ : isBreakPhase
+ ? 'text-white/82 hover:bg-emerald-100/12 hover:text-white'
+ : 'text-white/80 hover:bg-white/15 hover:text-white',
isStartAction && isHighlighted
- ? 'bg-white/10 text-white shadow-sm'
+ ? isBreakPhase
+ ? 'bg-emerald-100/10 text-white shadow-sm'
+ : 'bg-white/10 text-white shadow-sm'
: '',
isPauseAction && isHighlighted
- ? 'bg-white/10 text-white shadow-sm'
+ ? isBreakPhase
+ ? 'bg-emerald-100/10 text-white shadow-sm'
+ : 'bg-white/10 text-white shadow-sm'
: '',
)}
>