feat: Update banner system components

frontend/src/views/creators/ActualBanner.vue

@@ -2,13 +2,13 @@
   <div class="relative">
     <!-- Banner Container with mouse events -->
     <div
-        class="relative"
+        class="relative rounded-b-2xl overflow-y-auto"
         @mouseenter="showTint = isCurrentCreator"
         @mouseleave="showTint = false"
         @click="isCurrentCreator && openBannerEditor()"
     >
       <img
-          class="w-full aspect-[3/1] banner object-cover"
+          class="w-full aspect-[4/1] banner object-cover"
           :src="brandingStore.value?.images?.banner ?? '/images/placeholders/banner.png'"
           :alt="t('alt')"
       >
@@ -19,7 +19,7 @@
       >
         <!-- Top-right Icon -->
         <div
-            class="absolute top-4 right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg"
+            class="absolute top-4 right-4 w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
         >
           <v-icon large>mdi-pencil</v-icon>
         </div>
@@ -28,11 +28,10 @@
   </div>
 
   <v-dialog v-model="isDialogOpen" max-width="800px">
-    <template #default="{ close }">
-      <banner-editor :creator="brandingStore.value"
-                     @closeRequested="() => isDialogOpen = false"
-      ></banner-editor>
-    </template>
+      <BannerEditor
+          :creator="brandingStore.value"
+          @closeRequested="() => isDialogOpen = false"
+      />
   </v-dialog>
 </template>
 
@@ -41,11 +40,11 @@ import BannerEditor from "@/views/creators/BannerEditor.vue";
 import {computed, ref} from "vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';
 
 const authStore = useAuthStore();
 const brandingStore = useBrandingStore();
-const { t } = useI18n();
+const {t} = useI18n();
 
 // State
 const showTint = ref(false);
@@ -62,9 +61,6 @@ const isCurrentCreator = computed(() => {
 </script>
 
 <style scoped>
-.banner {
-  @apply border-b border-solid border-hTertiary;
-}
 </style>
 
 <i18n>