dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Match the deck-creation CTA to the homework CTA layout

Browse source 
- "Freeze my deck" is now a full-width (w-full) button in its sticky bar,
  like "Make my homework", instead of a compact left-aligned button in a
  flex row.
- The status/validation line ("Add a photo or a document (or some text) to
  start.") moved from above the button to centred directly underneath it,
  with the same 12px muted styling the homework flow uses.
- Both flows now share the Button size="lg" shape (44px tall, 14px radius,
  same muted disabled chip, centred text); hover/disabled behaviour comes
  from the same .btn-primary/.btn-disabled classes.

Service worker: freezmo-v12.

Verified: CTA-parity suite 32/32 (full-width ratio ~1.0 at 390px and 1280px,
44px height, centred helper under the button on both pages, identical radius
and disabled chip, enabled ice gradient), mobile 51/51, i18n 27/27, desktop
regression 74/74. Lint + build clean.
This commit is contained in:
Martin Dvořák 2026-10-09 06:12:48 +00:00
commit 33c3f11bb7
2 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/UploadScreen.tsx
View file

@ -719,21 +719,24 @@ export function UploadScreen() {
</div>
</section>
<div className="sticky bottom-[calc(env(safe-area-inset-bottom,0px)+4.6rem)] z-20 -mx-4 border-t border-[var(--hairline)] bg-white/65 px-4 py-3 backdrop-blur-2xl dark:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] sm:bottom-0 sm:mx-0 sm:rounded-[1.35rem] sm:border sm:px-5">
<div className="flex flex-wrap items-center justify-between gap-3">
<p className="text-[12.5px] text-[var(--text-subtle)]">
{documentsBusy
? t("upload.readingDocs")
: hasContent
? t("upload.ready")
: t("upload.addToStart")}
</p>
<div className="flex flex-wrap gap-2">
<Button size="lg" onClick={() => void generate()} disabled={!canGenerate}>
<SnowflakeIcon className="size-5" /> {t("upload.freezeDeck")}
</Button>
</div>
</div>
<div className="sticky bottom-[calc(env(safe-area-inset-bottom,0px)+4.6rem)] z-20 -mx-4 space-y-2 border-t border-[var(--hairline)] bg-white/65 px-4 py-3 backdrop-blur-2xl dark:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] sm:bottom-0 sm:mx-0 sm:rounded-[1.35rem] sm:border sm:px-5">
{/* Same CTA shape as the homework flow: a full-width button with the
helper line centred underneath. */}
<Button
size="lg"
className="touch-target w-full"
onClick={() => void generate()}
disabled={!canGenerate}
>
<SnowflakeIcon className="size-5" /> {t("upload.freezeDeck")}
</Button>
<p className="text-center text-[12px] text-[var(--text-subtle)]">
{documentsBusy
? t("upload.readingDocs")
: hasContent
? t("upload.ready")
: t("upload.addToStart")}
</p>
</div>
</div>
</div>