From 4cb684b6784c8d08683fb682992a1205c918bb6d Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Fri, 29 Aug 2025 10:36:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20:=20update=20quiz=20edit=20form?=
 =?UTF-8?q?=20with=20streamlined=20styles=20and=20utility=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- replace inline styles with `btn-primary`, `btn-secondary`, and `text-input` classes
- adopt consistent color palettes with `dark-*` and `white` text schemes
- simplify markup by removing redundant class definitions
- ensure visual cohesion and maintain usability within the form layout
- align with the updated design system for better maintainability
---
 src/main/resources/templates/quiz/edit.html | 40 ++++++++++-----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/main/resources/templates/quiz/edit.html b/src/main/resources/templates/quiz/edit.html
index 547bcaf..6b54c82 100644
--- a/src/main/resources/templates/quiz/edit.html
+++ b/src/main/resources/templates/quiz/edit.html
@@ -7,61 +7,61 @@
 <!--
     Created from template https://tailwindui.com/components/application-ui/forms/form-layouts#component-d45bd4ec6e473269c55d3ba084e1988d
 -->
-    <div class="rounded-md bg-green-50 p-4 mb-4" th:if="${successMessage}">
+    <div class="rounded-md bg-dark-3 p-4 mb-4" th:if="${successMessage}">
         <div class="flex">
             <div class="flex-shrink-0">
-                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <svg class="h-5 w-5 fill-white" viewBox="0 0 20 20" aria-hidden="true">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                 </svg>
             </div>
             <div class="ml-3">
-                <h3 class="text-sm font-medium text-green-900" th:text="${successMessage}">Success Message</h3>
+                <h3 class="text-sm font-medium text-white" th:text="${successMessage}">Success Message</h3>
             </div>
         </div>
     </div>
 
     <form method="post">
         <div class="space-y-12">
-            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3">
+            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-b-dark-4 pb-12 md:grid-cols-3">
                 <div>
-                    <h2 class="text-base font-semibold leading-7 text-gray-900">Edit Quiz</h2>
-                    <p class="mt-1 text-sm leading-6 text-gray-600">Please enter the details about the quiz to create</p>
+                    <h2 class="text-base font-semibold leading-7 text-white">Edit Quiz</h2>
+                    <p class="mt-1 text-sm leading-6 text-dark-7">Please enter the details about the quiz to create</p>
 
-                    <div class="mt-3 text-sm leading-6 text-gray-600">
+                    <div class="mt-3 text-sm leading-6 text-dark-7">
                         <p>Questions are separated by a blank line.</p>
-                        <p>Question titles should start by a # and a space : <code class="bg-gray-300 text-black p-1 whitespace-nowrap"># question title</code>.</p>
-                        <p>Single choice questions use <code class="bg-gray-300 text-black p-1 whitespace-nowrap">( ) incorrect</code> and <code class="bg-gray-300 text-black p-1 whitespace-nowrap">(x) correct</code> syntax.</p>
-                        <p>Multiple choice questions use <code class="bg-gray-300 text-black p-1 whitespace-nowrap">[ ] incorrect</code> and <code class="bg-gray-300 text-black p-1 whitespace-nowrap">[x] correct</code> syntax.</p>
-                        <p>Full Text questions use <code class="bg-gray-300 text-black p-1 whitespace-nowrap">= expected</code> syntax.</p>
-                        <p>You can add an explanation to a question with the  <code class="bg-gray-300 text-black p-1 whitespace-nowrap">> explanation text</code> syntax. This text can contain HTML (and links).</p>
+                        <p>Question titles should start by a # and a space : <code class="bg-dark-4 text-white p-1 whitespace-nowrap"># question title</code>.</p>
+                        <p>Single choice questions use <code class="bg-dark-4 text-white p-1 whitespace-nowrap">( ) incorrect</code> and <code class="bg-dark-4 text-white p-1 whitespace-nowrap">(x) correct</code> syntax.</p>
+                        <p>Multiple choice questions use <code class="bg-dark-4 text-white p-1 whitespace-nowrap">[ ] incorrect</code> and <code class="bg-dark-4 text-white p-1 whitespace-nowrap">[x] correct</code> syntax.</p>
+                        <p>Full Text questions use <code class="bg-dark-4 text-white p-1 whitespace-nowrap">= expected</code> syntax.</p>
+                        <p>You can add an explanation to a question with the  <code class="bg-dark-4 text-white p-1 whitespace-nowrap">&gt; explanation text</code> syntax. This text can contain HTML (and links).</p>
                     </div>
 
                 </div>
 
                 <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2">
                     <div class="sm:col-span-4">
-                        <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Quiz name</label>
+                        <label for="name" class="block text-sm font-medium leading-6 text-white">Quiz name</label>
                         <div class="mt-2">
                             <input
                                     type="text"
                                     name="name"
                                     id="name"
                                     th:field="${quiz.name}"
-                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="">
+                                    class="block w-full text-input placeholder:text-dark-6" placeholder="">
                         </div>
-                        <p class="mt-3 text-sm leading-6 text-gray-600">The Quiz name will be used in the quiz URL.</p>
+                        <p class="mt-3 text-sm leading-6 text-dark-7">The Quiz name will be used in the quiz URL.</p>
                     </div>
 
                     <div class="col-span-full">
-                        <label for="markdownContent" class="block text-sm font-medium leading-6 text-gray-900">Quiz Content</label>
-                        <p class="mt-3 text-sm leading-6 text-gray-600">Write the quiz content in Markdown format.</p>
+                        <label for="markdownContent" class="block text-sm font-medium leading-6 text-white">Quiz Content</label>
+                        <p class="mt-3 text-sm leading-6 text-dark-7">Write the quiz content in Markdown format.</p>
                         <div class="mt-2">
                             <textarea
                                     id="markdownContent"
                                     name="markdownContent"
                                     rows="20"
                                     th:field="${quiz.markdownContent}"
-                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
+                                    class="block w-full text-input placeholder:text-dark-6"></textarea>
                         </div>
                     </div>
                 </div>
@@ -70,9 +70,9 @@
 
         <div class="mt-6 flex items-center justify-end gap-x-6">
             <a th:href="@{/quiz}">
-                <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
+                <button type="button" class="btn-secondary">Cancel</button>
             </a>
-            <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+            <button type="submit" class="btn-primary">Save</button>
         </div>
 
         <input
-- 
2.51.2