From 8f9dee1b5f87054b00b712ef83998e52cd07f564 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 27 Jul 2024 01:33:36 -0400
Subject: [PATCH] Fixes tailwind and add models modifications

---
 .../Dialogs/PageInformations/BannerPicker.vue | 71 ++++++++++++++++---
 .../Dialogs/PageInformations/ColorBorder.vue  | 24 +++++--
 .../PageInformations/ColorBottomBanner.vue    | 27 +++++--
 .../Dialogs/PageInformations/ColorMenu.vue    | 24 +++++--
 .../PageInformations/ColorTopBanner.vue       | 29 ++++++--
 .../PageInformations/ProfilePicturePicker.vue | 64 ++++++++++++++---
 6 files changed, 198 insertions(+), 41 deletions(-)

diff --git a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
index ae269fe..46728ef 100644
--- a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
+++ b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
@@ -1,11 +1,66 @@
-<script setup>
-
-</script>
-
-<template>
-Banner Picker
+<template>
+  <div class="p-4">
+    
+    <h2 class="text-lg font-semibold mb-4">Sélectionne ta bannière</h2>
+    <img
+        @click="openModal('BannerPicker')"
+        src="/images/hutopymedia/banners/tutorialbanner.png"
+        class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+        alt="Tutorial Banner"
+    >
+   
+    <v-file-input
+        accept="image/*"
+        label="File input"
+    ></v-file-input>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
 
-</style>
\ No newline at end of file
+const bannerUrl = ref(null);
+
+const onFileChange = (event) => {
+  const file = event.target.files[0];
+  if (file && file.type.startsWith('image/')) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      bannerUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  } else {
+    alert('Veuillez sélectionner une image.');
+  }
+};
+</script>
+
+<style scoped>
+.p-4 {
+  padding: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.w-full {
+  width: 100%;
+}
+.h-auto {
+  height: auto;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.shadow {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
index d23ba03..d7f0929 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
@@ -1,11 +1,23 @@
-<script setup>
+<template>
+  <div>
+    <h2 class="title text-2xl">Couleur contour</h2>
 
-</script>
+    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
-<template>
-Border Color
+  </div>
+
+  <div class="flex justify-end space-x-4 mt-5">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+</script>
 
-</style>
\ No newline at end of file
+<style scoped>
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
index f21ded9..bc15b9e 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
@@ -1,11 +1,26 @@
-<script setup>
+<template>
+  <div>
+    <h2 class="title text-2xl">Couleur de la bannière inférieur</h2>
 
-</script>
+    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
-<template>
-ColorBottomBanner
+  </div>
+
+  <div class="flex justify-end space-x-4 mt-5">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
 
-</style>
\ No newline at end of file
+const color = ref('#FF0000');
+</script>
+
+<style scoped>
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
index ce37082..0399cf3 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
@@ -1,11 +1,23 @@
-<script setup>
+<template>
+  <div>
+    <h2 class="title text-2xl">Couleur des Menus</h2>
 
-</script>
+    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 
-<template>
-Menu Color
+  </div>
+
+  <div class="flex justify-end space-x-4 mt-5">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+</script>
 
-</style>
\ No newline at end of file
+<style scoped>
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
index de596bd..20b73c3 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
@@ -1,11 +1,26 @@
-<script setup>
+<template>
+  <div>
+    <h2 class="title text-2xl">Couleur de la bannière supérieure</h2>
+    
+    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
+    
+  </div>
 
-</script>
-
-<template>
-Color Top Banner
+  <div class="flex justify-end space-x-4 mt-5">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
 
-</style>
\ No newline at end of file
+const color = ref('#FF0000');
+</script>
+
+<style scoped>
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
index 34b10f4..431d7a9 100644
--- a/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
@@ -1,11 +1,59 @@
-<script setup>
-
-</script>
-
-<template>
-Profile picture Picker
+<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" />
+    <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>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
 
-</style>
\ No newline at end of file
+const bannerUrl = ref(null);
+
+const onFileChange = (event) => {
+  const file = event.target.files[0];
+  if (file && file.type.startsWith('image/')) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      bannerUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  } else {
+    alert('Veuillez sélectionner une image.');
+  }
+};
+</script>
+
+<style scoped>
+.p-4 {
+  padding: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.w-full {
+  width: 100%;
+}
+.h-auto {
+  height: auto;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.shadow {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>