From 63d8689757f7ff84263e5523a59af3af44a69f89 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 27 Jul 2024 10:10:50 -0400
Subject: [PATCH] All the modals are created, only the connection remains to be
 done.

---
 .../Dialogs/PageInformations/BannerPicker.vue | 13 ++++++++---
 .../Dialogs/PageInformations/ColorBorder.vue  |  2 +-
 .../PageInformations/ColorBottomBanner.vue    |  2 +-
 .../Dialogs/PageInformations/ColorMenu.vue    |  2 +-
 .../PageInformations/ColorTopBanner.vue       |  2 +-
 .../PageInformations/ProfilePicturePicker.vue | 22 +++++++++++++++++--
 6 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
index 46728ef..a1628c5 100644
--- a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
+++ b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
@@ -1,18 +1,25 @@
 <template>
   <div class="p-4">
     
-    <h2 class="text-lg font-semibold mb-4">Sélectionne ta bannière</h2>
+    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Sélectionne ta bannière</h2>
+    <div class="mb-5">
     <img
         @click="openModal('BannerPicker')"
         src="/images/hutopymedia/banners/tutorialbanner.png"
-        class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+        class="w-full transition duration-200 ease-in-out transform"
         alt="Tutorial Banner"
     >
-   
+    </div>
     <v-file-input
+        variant="outlined"
         accept="image/*"
         label="File input"
     ></v-file-input>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn variant="plain" color="black">Annuler</v-btn>
+      <v-btn color="#A6147D">Enregistrer</v-btn>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
index d7f0929..ca34005 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur contour</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur contour</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
index bc15b9e..fbdaf3d 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur de la bannière inférieur</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur de la bannière inférieur</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
index 0399cf3..26041c3 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur des Menus</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur des Menus</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
index 20b73c3..d7288c8 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur de la bannière supérieure</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur de la bannière supérieure</h2>
     
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
     
diff --git a/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
index 431d7a9..88fcedc 100644
--- a/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
@@ -1,11 +1,29 @@
 <template>
   <div class="p-4">
-    <h2 class="text-lg font-semibold mb-4">Choisir Image de profil</h2>
-    <input type="file" @change="onFileChange" accept="image/*" class="mb-4" />
+    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Choisir Image de profil</h2>
+    <div class="flex justify-center mb-5">
+    <img
+        @click="openModal('ProfilePicturePicker')"
+        class=" custom-border  active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
+        src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
+        alt="Profile Image"
+    >
+
+    </div>
+    <v-file-input
+        variant="outlined"
+        accept="image/*"
+        label="File input"
+    ></v-file-input>
     <div v-if="bannerUrl" class="mt-4">
       <h3 class="text-md font-semibold mb-2">Aperçu de la bannière:</h3>
       <img :src="bannerUrl" alt="Banner Preview" class="w-full h-auto rounded shadow" />
     </div>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn variant="plain" color="black">Annuler</v-btn>
+      <v-btn color="#A6147D">Enregistrer</v-btn>
+    </div>
   </div>
 </template>