Match Nablus workshop form's background/card styling to the rest of the site

Reused existing, already-compiled design-system pieces instead of ad hoc inline colors: the login page's auth-pattern background (public/images/ auth-pattern.svg) on the standalone layout, and the reusable <x-ui.card highlight> component (Warm Gold accent border) for the form card. Replaced inline style="color: #2D322A" with the text-body token. Also fixes the actual root cause behind "the picture still looks the same" from the prior two tasks: public/build's compiled CSS was stale (last built Jan 17, before this session), so max-h-40/max-h-64 were never in the generated stylesheet. Rebuilt via npm run build and verified the new classes compile; production has its own deploy-time build so this shouldn't recur there. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-28 00:12:07 +03:00
parent 4258b5d2e7
commit 7b708d2fd7
4 changed files with 145 additions and 8 deletions
@@ -0,0 +1,135 @@
+---
+id: 20
+title: 20 Nablus Workshop Form - Match Site Background and Card Styling
+status: Done
+date: 2026-09-28
+parent: null
+---
+
+## Description
+
+Naser says the page currently has "no background design at all" and wants it to match the
+website's coloring/design system. Fix by reusing patterns that already exist elsewhere in this
+codebase (the auth pages' subtle background pattern, and the reusable card component) rather than
+inventing new ones — this also avoids a real bug just hit on tasks 18/19: brand-new Tailwind
+utility classes (e.g. `max-h-64`, arbitrary-value `shadow-[...]`) are not in the compiled
+`public/build` CSS until `npm run build`/`npm run dev` runs, so a change can look like it "did
+nothing." Every class used below is already present in the current compiled CSS (verified via
+`grep` against `public/build/assets/*.css` at spec-writing time) because it's already used by
+`resources/views/components/layouts/auth/split.blade.php` and
+`resources/views/components/ui/card.blade.php`.
+
+**File to modify:** `resources/views/components/layouts/standalone.blade.php`
+
+Current:
+
+```blade
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+    <head>
+        @include('partials.head')
+    </head>
+    <body class="min-h-screen bg-[#F4F1EA]" style="font-family: var(--font-arabic)">
+        <main class="min-h-screen flex flex-col items-center px-4 py-10 sm:py-16">
+            <div class="w-full max-w-[640px]">
+                {{ $slot }}
+            </div>
+        </main>
+        @fluxScripts
+    </body>
+</html>
+```
+
+Replace with (adds the `auth-pattern` class already defined in `resources/css/app.css` lines
+974-992 — a repeating low-opacity botanical/geometric SVG background using
+`public/images/auth-pattern.svg`, the same file the login page's split layout already references;
+swaps the arbitrary hex background for the `bg-background` token which maps to the same Warm
+Cream color via `resources/css/app.css`'s `@theme` block):
+
+```blade
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+    <head>
+        @include('partials.head')
+    </head>
+    <body class="min-h-screen bg-background antialiased" style="font-family: var(--font-arabic)">
+        <main class="auth-pattern relative min-h-screen flex flex-col items-center px-4 py-10 sm:py-16">
+            <div class="relative w-full max-w-[640px] z-10">
+                {{ $slot }}
+            </div>
+        </main>
+        @fluxScripts
+    </body>
+</html>
+```
+
+(The `.auth-pattern > *` rule in `resources/css/app.css` already lifts direct children to
+`z-index: 1` above the pattern — the explicit `relative z-10` on the inner div here is a belt-and-
+suspenders match to how `auth/split.blade.php` structures it, since that inner div is not a direct
+child of the `auth-pattern` element in this layout the way it is there.)
+
+**File to modify:** `resources/views/livewire/pages/forms/nablus-workshop.blade.php`
+
+Current card wrapper (lines 45, 100 in the file as of task 19):
+
+```blade
+    <div class="bg-white rounded-lg p-6" style="box-shadow: 0 2px 8px rgba(0,0,0,0.1)">
+        ...
+    </div>
+```
+
+Replace with the project's existing reusable card component
+(`resources/views/components/ui/card.blade.php`), using its `highlight` prop for the Warm-Gold
+accent border already documented in `docs/ux-design.md` ("Cards/containers... optional gold
+top/left accent border for featured or important cards"):
+
+```blade
+    <x-ui.card highlight>
+        ...
+    </x-ui.card>
+```
+
+Current inline-colored text elements (lines 46, 47, 49 in the file as of task 19) each use
+`style="color: #2D322A"` — replace each with the Tailwind class `text-body` (already compiled,
+maps to the same Forest Green `#2D322A` token via `resources/css/app.css`'s `--color-body: var(--color-text)`
+alias) and drop the inline `style` attribute entirely:
+
+```blade
+        <h1 class="text-2xl font-bold mb-2 text-body">تسجيل في ورشة عمل ريادايات نابلس</h1>
+        <p class="mb-4 text-body">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p>
+
+        <p class="text-sm leading-relaxed mb-6 text-body">
+```
+
+(The long agenda paragraph's inner content — the schedule lines — is unchanged, only its opening
+tag's class/style attributes change as shown above.)
+
+No other part of either file changes — routing, validation, mail-sending, the flyer image
+(already sized correctly by tasks 18/19), and the form fields are untouched.
+
+## Acceptance Criteria
+
+- [x] `resources/views/components/layouts/standalone.blade.php`'s `<main>` tag's class attribute
+      contains `auth-pattern`
+- [x] The same file's `<body>` tag's class attribute contains `bg-background` and does not
+      contain `bg-[#F4F1EA]`
+- [x] `resources/views/livewire/pages/forms/nablus-workshop.blade.php` contains `<x-ui.card
+      highlight>` and no longer contains `bg-white` or the inline `style="box-shadow:
+      0 2px 8px rgba(0,0,0,0.1)"` on the form's outer wrapper
+- [x] The same file's `<h1>` and both `<p>` tags that previously had `style="color: #2D322A"` now
+      use the `text-body` class instead, with no `style="color:` attribute remaining anywhere in
+      the file (verify: `rg "style=\"color:" resources/views/livewire/pages/forms/nablus-workshop.blade.php`
+      returns no match)
+- [x] `public/images/auth-pattern.svg` exists (it must — this task reuses it, doesn't create it;
+      verify: `test -f public/images/auth-pattern.svg`)
+- [x] Visiting `/forms/nablus-workshop` still returns HTTP 200
+- [x] The existing test suite for this page (`tests/Feature/Public/NablusWorkshopRegistrationTest.php`)
+      still passes unchanged
+- [x] After this change, run `npm run build` (or confirm it was already run) and verify
+      `auth-pattern`, `bg-background`, and `text-body` all appear in the newly generated
+      `public/build/assets/*.css` — state this explicitly in the completion report, since tasks
+      18/19 shipped a visual change that silently didn't take effect for exactly this reason
+
+## Sub-tasks
+
+None.
@@ -3,6 +3,7 @@
 **Last synced:** 2026-09-27 — added tasks 17, 17-1, 17-2 (Nablus workshop registration form, PRD v1.3)
 **Last synced:** 2026-09-27 — 17-2 QA passed (7/7 tests), parent 17 Done; full-suite regression gate: 1723 passed / 69 pre-existing unrelated failures
 **Last synced:** 2026-09-28 — 19 QA passed (logo removed, flyer max-h-40 confirmed, 7/7 tests), Done
+**Last synced:** 2026-09-28 — 20 QA passed (auth-pattern/bg-background/card/text-body confirmed in compiled CSS and Blade, 7/7 tests), Done

 | ID | Title | Status |
 |----|-------|--------|
@@ -129,3 +130,4 @@
 | 17-2 | 17-2 Standalone registration page, form, and submit wiring | Done |
 | 18 | 18 Nablus Workshop Form - Image Sizing Fix | Done |
 | 19 | 19 Nablus Workshop Form - Remove Logo, Shrink Flyer Further | Done |
+| 20 | 20 Nablus Workshop Form - Match Site Background and Card Styling | Done |