diff --git a/docs/tasks/20.md b/docs/tasks/20.md new file mode 100644 index 0000000..e051404 --- /dev/null +++ b/docs/tasks/20.md @@ -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 + + + + @include('partials.head') + + +
+
+ {{ $slot }} +
+
+ @fluxScripts + + +``` + +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 + + + + @include('partials.head') + + +
+
+ {{ $slot }} +
+
+ @fluxScripts + + +``` + +(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 +
+ ... +
+``` + +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 + + ... + +``` + +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 +

تسجيل في ورشة عمل ريادايات نابلس

+

تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀

+ +

+``` + +(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 `

` tag's class attribute + contains `auth-pattern` +- [x] The same file's `` tag's class attribute contains `bg-background` and does not + contain `bg-[#F4F1EA]` +- [x] `resources/views/livewire/pages/forms/nablus-workshop.blade.php` contains `` 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 `

` and both `

` 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. diff --git a/docs/tasks/statuses.md b/docs/tasks/statuses.md index e828250..272999c 100644 --- a/docs/tasks/statuses.md +++ b/docs/tasks/statuses.md @@ -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 | diff --git a/resources/views/components/layouts/standalone.blade.php b/resources/views/components/layouts/standalone.blade.php index 9541746..72b14f8 100644 --- a/resources/views/components/layouts/standalone.blade.php +++ b/resources/views/components/layouts/standalone.blade.php @@ -3,9 +3,9 @@ @include('partials.head') - -

-
+ +
+
{{ $slot }}
diff --git a/resources/views/livewire/pages/forms/nablus-workshop.blade.php b/resources/views/livewire/pages/forms/nablus-workshop.blade.php index 418aade..6931a7a 100644 --- a/resources/views/livewire/pages/forms/nablus-workshop.blade.php +++ b/resources/views/livewire/pages/forms/nablus-workshop.blade.php @@ -42,11 +42,11 @@ new #[Layout('components.layouts.standalone')] class extends Component class="max-h-40 w-auto mx-auto rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]" /> -
-

تسجيل في ورشة عمل ريادايات نابلس

-

تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀

+ +

تسجيل في ورشة عمل ريادايات نابلس

+

تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀

-

+

ندعوكم للانضمام إلينا في ورشة عمل متخصصة وشاملة تجمع بين القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية لبناء مشروعك على أسس متينة وناجحة! 🎯📊💡

@@ -97,5 +97,5 @@ new #[Layout('components.layouts.standalone')] class extends Component إرسال -

+