libra/docs/tasks/20.md

id, title, status, date, parent

id	title	status	date	parent
20	20 Nablus Workshop Form - Match Site Background and Card Styling	Done	2026-09-28	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:

<!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):

<!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):

    <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"):

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

        <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

• resources/views/components/layouts/standalone.blade.php's <main> tag's class attribute contains auth-pattern
• The same file's <body> tag's class attribute contains bg-background and does not contain bg-[#F4F1EA]
• 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
• 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)
• public/images/auth-pattern.svg exists (it must — this task reuses it, doesn't create it; verify: test -f public/images/auth-pattern.svg)
• Visiting /forms/nablus-workshop still returns HTTP 200
• The existing test suite for this page (tests/Feature/Public/NablusWorkshopRegistrationTest.php) still passes unchanged
• 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.