DTL dialogs : style optimization-request-dialog + fix project-request-dialog

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

@@ -228,25 +228,43 @@
 }
 
 /* Project Request Dialog */
-#project-request-dialog {
+#project-request-dialog,
+#optimization-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;
+  overflow: hidden;
 }
-#project-request-dialog [data-pc-section="header"] h2 {
+#optimization-request-dialog {
-  left: 0 !important;
+  --dialog-max-h: 676px;
-  right: 0 !important;
+  --dialog-header-h: 8rem;
+}
+#optimization-request-dialog [data-pc-section="header"] {
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+#optimization-request-dialog [data-pc-section="header"] [data-icon="leaf"] {
+
+}
+#project-request-dialog h2,
+#optimization-request-dialog h2 {
+  position: static !important;
   color: var(--color-black);
   margin-block: var(--space-16) !important;
 }
-#project-request-dialog [data-pc-name="pcclosebutton"] {
+#project-request-dialog [data-pc-name="pcclosebutton"],
+#optimization-request-dialog [data-pc-name="pcclosebutton"] {
   display: none;
 }
-#project-request-dialog form {
+#project-request-dialog form,
-  max-width: unset;
+#optimization-request-dialog form {
+  max-width: var(--dialog-max-w);
+  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
+  background: none;
 }
 #project-request-dialog #project-dtl {
   position: relative;
@@ -263,9 +281,22 @@
   appearance: auto;
   accent-color: var(--color-primary);
 }
-#project-request-dialog [data-icon="leaf"] {
+#optimization-request-dialog select {
-  padding: var(--space-4) var(--space-8);
+  background-image: var(--icon-chevron-single-down-grey);
+  background-position: center right 1rem;
+  background-repeat: no-repeat;
+}
+#project-request-dialog [data-icon="leaf"],
+#optimization-request-dialog [data-icon="leaf"] {
+  --column-gap: var(--space-4);
+  padding: 0.25rem var(--space-8) 0.375rem;
   background: var(--color-dtl-15);
   color: var(--color-dtl);
   border-radius: var(--rounded-md);
+  line-height: 1;
+  font-weight: 500;
+}
+#project-request-dialog [data-icon="leaf"]::before,
+#optimization-request-dialog [data-icon="leaf"]::before {
+  transform: translateY(.125rem);
 }

src/components/ProjectRequestDialog.vue

@@ -35,8 +35,8 @@
         v-model="details"
         cols="30"
         rows="10"
-        placeholder="Détails du projet"
+        placeholder="Détails du projet…"
-        class="w-full h-full rounded-md border border-grey-200 px-16 py-12"
+        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
         required
       ></textarea>
 
@@ -66,7 +66,7 @@
         >
       </div>
 
-      <footer class="flex-columns w-full mt-auto" style="column-gap: 0.5rem">
+      <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
         <button class="btn btn--black-10" @click="emits('close')">
           Annuler
         </button>

src/components/design-to-light/OptimizationRequestDialog.vue

@@ -1,6 +1,34 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <Dialog
-    <select name="projects" id="projects" v-model="projectUri">
+    id="optimization-request-dialog"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    dismissableMask="true"
+    header="Demander un rendez-vous"
+    class="dialog"
+    :closeOnEscape="true"
+  >
+    <template #header>
+      <h2 class="font-serif text-lg">Demander un rendez-vous</h2>
+      <p class="flex justify-center text-sm" data-icon="leaf">Design to Light</p>
+    </template>
+
+    <form
+      @submit.prevent="handleSubmit"
+      class="w-full p-16 flex flex-col"
+      style="--row-gap: 1rem"
+    >
+
+      <label for="projects" class="sr-only">Projet</label>
+      <select 
+        name="projects" 
+        id="projects" 
+        v-model="projectUri"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        required 
+      >
+        <option value="">Sélectionnez le projet</option>
         <option
           v-for="project in currentProjects"
           :key="project.uri"
@@ -9,30 +37,59 @@
           {{ project.title }}
         </option>
       </select>
-    <input type="text" v-model="subject" />
+
+      <label for="appointment-subject" class="sr-only">Objet du rendez-vous</label>
+      <input
+        type="text"
+        v-model="subject"
+        id="appointment-subject"
+        placeholder="Objet du rendez-vous"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        required
+      />
+
+      <label for="appointment-details" class="sr-only">Détails du projet</label>
       <textarea
+        id="appointment-details"
         name="details"
         v-model="details"
         cols="30"
         rows="10"
         placeholder="Décrivez votre demande…"
+        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
         required
       ></textarea>
-    <button type="submit">Soumettre</button>
+
+      <footer class="flex-columns w-full mt-16" style="column-gap: 0.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 { useApiStore } from "../../stores/api";
 import { storeToRefs } from "pinia";
 import { useProjectsStore } from "../../stores/projects";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const { currentProjects } = storeToRefs(useProjectsStore());
 const projectUri = ref("");
-const subject = ref("Design to Light");
+const subject = ref("");
 const details = ref("");
 const api = useApiStore();
+const isOpen = ref(true);
+const emits = defineEmits("close");
+
+watch(isOpen, (newValue) => {
+  if (!newValue) {
+    emits("close");
+  }
+});
 
 async function handleSubmit() {
   const formData = {