From da589ecc95867f2a3264e2a9d82f53378f1c8846 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 26 Jun 2024 22:54:03 -0400
Subject: [PATCH] Modified visual elements

---
 src/App.vue                    |   4 +-
 src/views/main/Creator.vue     |  13 +--
 src/views/main/Header.vue      | 192 ++++++++++++++++++++++++++++-----
 src/views/main/PostCard.vue    |   4 +-
 src/views/main/SideBar.vue     |  19 ++--
 src/views/main/SiteMenu.vue    |   2 +-
 src/views/main/posts.json      |   8 ++
 src/views/manualusers/ARPS.vue |   5 +-
 8 files changed, 194 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9ceb4b3..7adf732 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,12 @@
           <div v-show="!hideSideBar"
                @mouseleave="startCloseSidebarTimer"
                @mouseenter="clearCloseSidebarTimer"
-               class="w-48 fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
+               class=" fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
             <SideBar></SideBar>
           </div>
         </transition>
         
-        <div class="flex flex-col mt-16 bg-amber-50 w-full md:ml-1">
+        <div class="flex flex-col mt-16  w-full md:ml-1" style="background-color: #f4f4f4">
           <RouterView></RouterView>
           <Footer></Footer>
         </div>
diff --git a/src/views/main/Creator.vue b/src/views/main/Creator.vue
index 25b6ad2..cf491bf 100644
--- a/src/views/main/Creator.vue
+++ b/src/views/main/Creator.vue
@@ -8,16 +8,11 @@
 
     <PostContentMenu></PostContentMenu>
 
-    <div class="flex">
-      <RouterLink v-for="(post, index) in posts"
-                  :key="index"
-                  :to="post.routerLink"
-          class="bg-amber flex grow">
-        <PostCard :post="post"
+    <div class="flex">      
+        <PostCard v-for="(post, index) in posts"
+                  :post="post"
                   class="m-2 bg-red w-full">
-        </PostCard>
-      </RouterLink>
-
+        </PostCard>     
     </div>
   </div>
 </template>
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index 2952349..799c17a 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -7,7 +7,7 @@
       <v-app-bar-nav-icon @click.stop="toggleSidebar">
       </v-app-bar-nav-icon>
 
-      <RouterLink to="/">
+      <RouterLink to="/" class="hidden md:block">
         <v-img
             src="/medias/hutopy.png"
             ref="popupButtonRef"
@@ -15,45 +15,136 @@
             class="mr-2 h-10 w-20"
         ></v-img>
       </RouterLink>
+
+      <RouterLink to="/" class="block md:hidden">
+        <v-img
+            src="/images/hutopymedia/icons/logohutopy.png"
+            ref="popupButtonRef"
+            alt="Hutopy Logo"
+            class="mr-2 h-10 w-10"
+        ></v-img>
+      </RouterLink>
     </div>
 
-    <div class="flex items-center">
-      <v-text-field
-          density="compact"
-          rounded
-          variant="outlined"
-          v-model="searchQuery"
-          placeholder="Search"
-          hide-details
-          clearable
-          class="rounded-full mx-2 w-80"
-          append-inner-icon="mdi-magnify"
-          @click:append-inner="onSearch"
-      ></v-text-field>
+    <div class="flex items-center ml-auto space-x-4 search-container">
+      <template v-if="showSearch">
+        <v-text-field
+            density="compact"
+            rounded
+            variant="outlined"
+            v-model="searchQuery"
+            placeholder="Recherche"
+            hide-details
+            clearable
+            class="rounded-full w-32 md:w-64 lg:w-96 mx-2"
+            append-inner-icon="mdi-magnify"
+            @click.stop
+            @click:append-inner="onSearch"
+        ></v-text-field>
+      </template>
+      <template v-else>
+        <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
+      </template>
 
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
-      <span class="flex items-center mx-2">
-        <span class="text-black text-base font-sans font-medium mr-3">
-          {{ currentUserName }}
-        </span>
+      <div class="text-center">
+        <v-menu open-on-hover>
+          <template v-slot:activator="{ props }">
+            <v-btn variant="plain" v-bind="props" class="d-flex align-center">
+              <!-- Nom d'utilisateur caché en mode mobile, visible sur les appareils ≥ md -->
+              <span class="max-w-xs text-lg hidden md:block">
+      {{ currentUserName }}
+    </span>
+              <!-- Image de profil toujours visible -->
+              <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image"
+                   class="ml-2 rounded-full" style="width: 32px; height: 32px;">
+            </v-btn>
+          </template>
 
-        <img
-            src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-            class="rounded-circle h-10 w-10"
-            alt="Logo"
-        />
-      </span>
+          <v-list class="mt-2">
+            <v-list-item @click="navigateToProfile">
+              <v-list-item-title>Mon profil</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="openWalletDialog">
+              <v-list-item-title>Mon wallet</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="navigateToMessages">
+              <v-list-item-title>Messages</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="logout">
+              <v-list-item-title>Déconnexion</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
     </div>
+
+    <!-- Wallet Modal -->
+    <v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto" class="-z-50">
+      <v-card style="border-radius: 30px;">
+        <div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
+          <v-icon left size="48">mdi-wallet</v-icon>
+          <v-toolbar title="Portefeuille"
+                     style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+        </div>
+
+        <v-card-text class="text-h1 pa-12">
+          <v-row>
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 style="margin-bottom: -4px; font-size: 1.3rem;">Balance actuelle</h1>
+                  <h1 style=" margin-bottom: -45px; font-size: 3.5rem;">{{ currentUser.totalBalance }}$</h1>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
+                              item-value="name">
+        </v-data-table-virtual>
+
+        <v-dialog activator="#activator-target" max-width="650">
+          <template v-slot:default="{ isActive }">
+            <v-card prepend-icon="mdi-file-document-edit" text="Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
+Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transactionchaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomerats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
+Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'ambition ultime d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts sont précieusement gardés.
+Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
+" title="Comission">
+              <template v-slot:actions>
+                <v-btn class="ml-auto" text="Close" @click="isActive.value = false"></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+
+        <v-card-actions class="justify-center">
+          <v-row justify="center">
+            <v-btn id="activator-target">
+              Comisssion
+            </v-btn>
+            <v-btn @click="walletDialog = false" text="Fermer"></v-btn>
+          </v-row>
+
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </header>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { eventBus } from '@/eventBus.js';
+import {ref, onMounted, onBeforeUnmount} from "vue";
+import {eventBus} from '@/eventBus.js';
+import {useRouter} from 'vue-router';
 
-const currentUserName = "Jo Bumble";
+
+const router = useRouter();
+const currentUserName = "Pascal Marchesseault";
 const searchQuery = ref("");
+const showSearch = ref(false);
+const walletDialog = ref(false);
 
 const toggleSidebar = () => {
   eventBus.value.toggleSidebar();
@@ -68,8 +159,53 @@ const onSearch = () => {
     if (words.length === 1) {
       router.push(`/@${words[0]}`);
     } else {
-      router.push({ name: "browse", query: { q: query } });
+      router.push({name: "browse", query: {q: query}});
     }
   }
 };
+
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value;
+};
+
+const handleClickOutside = (event) => {
+  if (!event.target.closest('.search-container')) {
+    showSearch.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+const navigateToProfile = () => {
+  router.push('/yourprofile');
+};
+
+const navigateToWallet = () => {
+  router.push('/wallet');
+};
+
+const navigateToMessages = () => {
+  router.push('/messages');
+};
+
+function logout() {
+  localStorage.removeItem('jwt');
+  window.location.reload();
+};
+
+function openWalletDialog() {
+  walletDialog.value = true;
+}
 </script>
+
+<style scoped>
+.search-container {
+  position: relative;
+}
+</style>
diff --git a/src/views/main/PostCard.vue b/src/views/main/PostCard.vue
index 46f112a..7fca6ff 100644
--- a/src/views/main/PostCard.vue
+++ b/src/views/main/PostCard.vue
@@ -36,9 +36,7 @@ const props = defineProps({
   post: {
     type: Object,
     required: true,
-    validator: (post) => {
-      return 'banner' in post && 'image' in post && 'name' in post && 'title' in post && 'description' in post;
-    }
+    
   }
 });
 
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index c365f8a..d1d35b1 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -6,57 +6,57 @@
       <div>
         <h2 class="text-center">Subscriptions</h2>
 
-        <ul class="space-y-32">
+        <ul class="space-y">
           <li>
             <RouterLink to="/@hutopy">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 Hutopy
               </div>
             </RouterLink>
 
             <RouterLink to="/@leffet">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 L'Effet
               </div>
             </RouterLink>
 
             <RouterLink to="/@chloebeaugrand">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 Chloe Beaugrand
               </div>
             </RouterLink>
 
             <RouterLink to="/@guillaumeaime">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 Guillaume Aime
               </div>
             </RouterLink>
 
             <RouterLink to="/@mathieucaron">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 Mathieu Caron
               </div>
             </RouterLink>
 
             <RouterLink to="/@arps">
               <div class="nav-button">
-                <v-icon class="mx-2">mdi-home</v-icon>
+                <v-icon class="mx-2">mdi-account</v-icon>
                 ARPS
               </div>
             </RouterLink>
 
+            <div class="h-10"></div>
           </li>
         </ul>
         <SiteMenu></SiteMenu>
       </div>
 
 
-
     </nav>
 
   </aside>
@@ -64,7 +64,8 @@
 
 <style scoped>
 .nav-button {
-  @apply bg-purple-800 rounded p-1 m-2;
+  @apply rounded p-1 m-1;
+
 }
 
 .nav-button:hover {
diff --git a/src/views/main/SiteMenu.vue b/src/views/main/SiteMenu.vue
index 924bf1f..9332be6 100644
--- a/src/views/main/SiteMenu.vue
+++ b/src/views/main/SiteMenu.vue
@@ -15,7 +15,7 @@
         <img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
       </a>
     </div>
-    <div class="absolute  mt-44 text-center extra-small-text p-2">
+    <div class="absolute  mt-40 text-center extra-small-text p-8">
       <RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
       <RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
       <RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
diff --git a/src/views/main/posts.json b/src/views/main/posts.json
index 18a0a6d..38bfdd4 100644
--- a/src/views/main/posts.json
+++ b/src/views/main/posts.json
@@ -15,6 +15,14 @@
     "banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
     "content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
   },
+  {
+    "id": 1,
+    "creatorId": 1,
+    "title": "Déploiement de la version 0.10 d'Hutopy",
+    "date": "24-04-2024",
+    "banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
+    "content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
+  },
   {
     "id": 1,
     "creatorId": 1,
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index c9034cf..c8a4ae1 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -88,7 +88,7 @@
     </div>
   </div>
 
-  <CreatorFeed></CreatorFeed>
+  <CreatorFeed ></CreatorFeed>
 
   <!--Post-modale-->
   <v-dialog v-model="isDialogActive" max-width="500">
@@ -123,8 +123,11 @@
       </v-card>
     </template>
   </v-dialog>
+  
 </template>
 
+
+
 <script setup>
 import CreatorFeed from "@/views/main/CreatorFeed.vue";
 import {ref} from 'vue';