From f2209cda646fe4ef5da6d0f0adef7aed51848c76 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad0@hotmail.com>
Date: Mon, 5 Aug 2024 17:06:50 -0400
Subject: [PATCH] Ensure the SizeIndicator helper is visible on all pages

---
 src/App.vue                          |  4 +++
 src/views/creators/CreatorBanner.vue |  4 +--
 src/views/main/Profile.vue           |  4 +--
 src/views/tools/SizeIndicator.vue    | 37 +++++++++++++++++-----------
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6e8a498..9c65c9b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,6 +25,9 @@
       </div>
     </div>
   </v-app>
+  
+  <size-indicator></size-indicator>
+  
 </template>
 
 <script async setup>
@@ -33,6 +36,7 @@ import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
 import {ref, onMounted, onUnmounted} from 'vue';
 import {useSideBarStore} from "@/stores/sideBarStore.js";
+import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 
 const showPopup = ref(false);
 const popup = ref(null);
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 9984e79..d5355ab 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,6 +1,5 @@
 <template>
-  <size-indicator></size-indicator>
-
+  
   <!--  Bannière-->
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
@@ -79,7 +78,6 @@
 </template>
 
 <script setup>
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index e176a68..906543a 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -63,14 +63,12 @@
       </template>
     </div>
   </div>
-
-  <SizeIndicator></SizeIndicator>
+  
 </template>
 
 <script setup>
 import {ref, onMounted} from "vue";
 import {useUserStore} from "@/stores/userStore.js";
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import ManageAccount from "@/views/Profile/ManageAccount.vue";
 import PageInformations from "@/views/Profile/PageInformations.vue";
 import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
diff --git a/src/views/tools/SizeIndicator.vue b/src/views/tools/SizeIndicator.vue
index ce266d9..364f514 100644
--- a/src/views/tools/SizeIndicator.vue
+++ b/src/views/tools/SizeIndicator.vue
@@ -1,16 +1,25 @@
 <template>
-  <div class="fixed bottom-0 left-0 m-4 z-50">
-    <div class="hidden sm:block md:hidden bg-blue-500 text-white p-2 rounded">
-      sm
-    </div>
-    <div class="hidden md:block lg:hidden bg-green-500 text-white p-2 rounded">
-      md
-    </div>
-    <div class="hidden lg:block xl:hidden bg-yellow-500 text-black p-2 rounded">
-      lg
-    </div>
-    <div class="hidden xl:block bg-red-500 text-white p-2 rounded">
-      xl
-    </div>
+  
+  <div class="size-code sm:block md:hidden bg-blue-500 text-white">
+    sm
   </div>
-</template>
\ No newline at end of file
+
+  <div class="size-code md:block lg:hidden bg-green-500 text-white">
+    md
+  </div>
+
+  <div class="size-code lg:block xl:hidden bg-yellow-500 text-black">
+    lg
+  </div>
+
+  <div class="size-code xl:block bg-red-500 text-white">
+    xl
+  </div>
+  
+</template>
+
+<style scoped>
+.size-code {
+  @apply fixed bottom-0 left-0 z-50 rounded p-2 m-2 w-9 h-9 text-center content-center capitalize font-mono font-semibold
+}
+</style>