From faccc2ceb3050980e24076a919295765e158733d Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 25 Jun 2024 19:16:37 -0400
Subject: [PATCH] Modification de la searchbar

---
 src/App.vue                    |  6 ++--
 src/views/main/CreatorFeed.vue | 50 ++++++++++++++++++++++++++++++++++
 src/views/main/Header.vue      |  7 +++--
 src/views/manualusers/ARPS.vue | 10 +++++++
 4 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 src/views/main/CreatorFeed.vue

diff --git a/src/App.vue b/src/App.vue
index 3f26cbc..89ce355 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,10 +42,12 @@
 
         <div @click="togglePopup"
              ref="popupButton"
-             class="bg-purple rounded-full w-10 h-10 flex justify-center items-center self-end mt-4 cursor-pointer">
-          <v-icon>mdi-plus</v-icon>
+             class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+             style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white; ">
+          <v-icon class="text-2xl">mdi-gift-outline</v-icon>
         </div>
 
+
       </div>
 
     </div>
diff --git a/src/views/main/CreatorFeed.vue b/src/views/main/CreatorFeed.vue
new file mode 100644
index 0000000..62cc596
--- /dev/null
+++ b/src/views/main/CreatorFeed.vue
@@ -0,0 +1,50 @@
+<template>
+
+  <div class="mt-28">
+    
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  
+
+  
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index a60ef7c..c0755ff 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -4,7 +4,7 @@
 
     <div v-if="showPopup"
          ref="popupRef"
-         class="bg-white shadow-md shadow-gray-700 top-16 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
+         class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
          @mouseleave="handleMouseLeave"
          @mouseenter="handleMouseEnter">
       <SiteMenu></SiteMenu>
@@ -27,11 +27,14 @@
 
     <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"
+          class="rounded-full mx-2 w-80 "
           append-inner-icon="mdi-magnify"
           @click:append-inner="onSearch">
       </v-text-field>
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index f405021..d78ba99 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -85,9 +85,19 @@
       </div>
     </div>
   </div>
+
+  <CreatorFeed></CreatorFeed>
+
+
+
+
+
+  
 </template>
 
 <script setup>
+
+import CreatorFeed from "@/views/main/CreatorFeed.vue";
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
 </script>