---
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.