add style and interactions on ProjectRequestDialog

src/assets/css/src/2.blocks.dialog.css

@@ -225,4 +225,47 @@
   .dialog#physical-sample .masonry {
     column-count: 3;
   }
+}
+
+/* Project Request Dialog */
+#project-request-dialog {
+  --dialog-max-w: 704px;
+  --dialog-max-h: 712px;
+  --dialog-header-h: 6rem;
+  --dialog-background: var(--color-white);
+  color: var(--color-black);
+  align-items: stretch;
+}
+#project-request-dialog [data-pc-section="header"] h2 {
+  left: 0 !important;
+  right: 0 !important;
+  color: var(--color-black);
+  margin-block: var(--space-16) !important;
+}
+#project-request-dialog [data-pc-name="pcclosebutton"] {
+  display: none;
+}
+#project-request-dialog form {
+  max-width: unset;
+}
+#project-request-dialog #project-dtl {
+  position: relative;
+  padding-left: var(--space-64);
+}
+#project-request-dialog #project-dtl input[type="checkbox"] {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--color-grey-200);
+  position: absolute;
+  left: var(--space-12);
+  -webkit-appareance: auto;
+  appearance: auto;
+  accent-color: var(--color-primary);
+}
+#project-request-dialog [data-icon="leaf"] {
+  padding: var(--space-4) var(--space-8);
+  background: var(--color-dtl-15);
+  color: var(--color-dtl);
+  border-radius: var(--rounded-md);
 }

src/components/ProjectRequestDialog.vue

@@ -1,20 +1,64 @@
 <template>
-  <form @submit.prevent="handleSubmit">
-    <input type="text" v-model="title" placeholder="Nom du projet" required />
-    <textarea
-      name="details"
-      v-model="details"
-      cols="30"
-      rows="10"
-      placeholder="Détails du projet"
-      required
-    ></textarea>
-    <input type="checkbox" v-model="isDTLEnabled" />
-    <button type="submit">Soumettre</button>
-  </form>
+  <Dialog
+    id="project-request-dialog"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    dismissableMask="true"
+    header="Demander la création d’un projet"
+    class="dialog"
+    :closeOnEscape="true"
+  >
+    <template #header>
+      <h2 class="font-serif text-lg">Demander la création d’un projet</h2>
+    </template>
+
+    <form @submit.prevent="handleSubmit" class="w-full h-full p-16 flex flex-col" style="--row-gap: 1rem">
+
+      <label for="project-title" class="sr-only">Nom du projet</label>
+      <input 
+        type="text" 
+        v-model="title" 
+        id="project-title" 
+        placeholder="Nom du projet" 
+        class="w-full rounded-md border border-grey-200 px-16 py-12" 
+        required
+      >
+
+      <label for="project-details" class="sr-only">Détails du projet</label>
+      <textarea
+        id="project-details"
+        name="details"
+        v-model="details"
+        cols="30"
+        rows="10"
+        placeholder="Détails du projet"
+        class="w-full h-full rounded-md border border-grey-200 px-16 py-12"
+        required
+      ></textarea>
+
+      <div id="project-dtl" class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12" style="align-self: flex-start">
+        <input id="dtl" type="checkbox" v-model="isDTLEnabled">
+        <label for="dtl" class="flex font-medium mt-4" style="--column-gap: var(--space-4)">
+          Créer avec <span class="flex justify-center text-sm" data-icon="leaf">Design to Light</span>
+        </label>
+        <p class="text-sm mt-8 mb-4">
+          Découvrez la note environnementale de votre projet et allégez l’impact de votre projet grâce à nos expertises d’optimisation du poids de flacon.
+        </p>
+        <router-link to="/design-to-light" class="text-sm font-medium">En savoir plus</router-link>
+      </div>
+
+      <footer class="flex-columns w-full mt-auto" style="column-gap: .5rem">
+        <button class="btn btn--black-10" @click="emits('close')">Annuler</button>
+        <button class="btn" type="submit">Soumettre</button>
+      </footer>
+
+    </form>
+  </Dialog>
 </template>
 
 <script setup>
+import Dialog from "primevue/dialog";
 import { ref } from "vue";
 import { useApiStore } from "../stores/api";
 
@@ -22,6 +66,8 @@ const title = ref("");
 const details = ref("");
 const isDTLEnabled = ref(false);
 const api = useApiStore();
+const isOpen = ref(true);
+const emits = defineEmits("close");
 
 async function handleSubmit() {
   const formData = {
@@ -34,29 +80,3 @@ async function handleSubmit() {
   console.log(response);
 }
 </script>
-
-<style scoped>
-form {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 999;
-  background-color: #000;
-  color: #fff;
-}
-
-button {
-  color: #fff;
-}
-
-input,
-textarea {
-  background-color: #fff;
-  color: #000;
-}
-
-input[type="checkbox"] {
-  width: 1rem;
-  height: 1rem;
-}
-</style>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="flex flex-col" style="--row-gap: var(--space-32)">
     <Projects />
-    <ProjectRequestDialog v-if="isProjectRequestDialogOpen" />
+    <ProjectRequestDialog v-if="isProjectRequestDialogOpen" @close="isProjectRequestDialogOpen = false" />
     <ProjectRequestButton @click="isProjectRequestDialogOpen = true" />
   </main>
 </template>