cade/planmymeal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move UI to BoardUI with slate + salmon theme; add PDF plan export

Browse source 
- Adopt BoardUI (Pro init): theme tokens, Inter, .dark mode, Button,
  SegmentedControl, Meter, Skeleton and ThemeToggle; remap the app's
  color aliases onto BoardUI tokens and swap lucide for Remix icons
- Retint BoardUI's neutral ramp to cool slate with a salmon accent;
  drop the dotted background; raise muted text contrast
- Simplify the landing page and remove the overlap explorer
- Planner: explicit "I have this" toggle on grocery lines, pantry panel
  above the menu with the staples list spelled out, sticky aisle
  header fix, and a "Download PDF" plan export (jsPDF, lazy-loaded)
- Recipes: replace the family cabbage soup with Cade's Cabbage Soup
  (adds Bone-In Ham Steak to the catalog); remove Ham, Bean & Cabbage Soup
- Remove unused BoardUI components, dependencies and exports

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cayden Schwechten 2026-11-06 16:36:33 -06:00
parent b02c7a024b
commit df5dd3a70e
56 changed files with 4749 additions and 788 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/recipes/[id]/page.tsx
View file

@ -1,4 +1,4 @@
import { ArrowLeft, BookHeart } from "lucide-react";
import { RiArrowLeftLine as ArrowLeft, RiHeart3Line as BookHeart } from "@remixicon/react";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
@ -101,7 +101,7 @@ async function RecipeContent({ params }: { params: Promise<{ id: string }> }) {
</div>
{/* Cost ledger + Add to Plan action bar */}
<div className="mt-6 flex flex-wrap items-center justify-between gap-4 rounded-xl border border-line bg-surface p-4 sm:px-5">
<div className="mt-6 flex flex-wrap items-center justify-between gap-4 rounded-3xl border border-border-button-default bg-surface p-4 sm:px-5">
<dl className="flex flex-wrap items-center gap-6 sm:gap-10">
<div>
<dt className="text-xs text-ink-faint">Cost eaten / serving</dt>
@ -120,7 +120,7 @@ async function RecipeContent({ params }: { params: Promise<{ id: string }> }) {
<AddToPlanControl recipeId={recipe.id} recipeTitle={recipe.title} />
</div>
<div className="mt-8 rounded-xl border border-line bg-surface p-5 sm:p-8">
<div className="mt-8 rounded-3xl border border-border-button-default bg-surface p-5 sm:p-8">
<RecipeServings recipe={recipe} />
</div>
@ -134,7 +134,7 @@ async function RecipeContent({ params }: { params: Promise<{ id: string }> }) {
<li key={r.id}>
<Link
href={`/recipes/${r.id}`}
className="group block rounded-xl border border-line bg-surface p-4 transition-colors hover:border-line-strong hover:bg-raised/60"
className="group block rounded-3xl border border-border-button-default bg-surface p-4 transition-colors hover:border-line-strong hover:bg-raised/60"
>
<span className="font-serif text-lg font-semibold text-ink group-hover:text-brand-300">{r.title}</span>
<span className="mt-1 block text-sm text-ink-muted">{r.description}</span>