Applying new redesign.

src/views/creators/FollowButton.vue

@@ -0,0 +1,98 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {computed, ref} from "vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+  colorBorder: {required: true},
+});
+
+const colorBorder = computed(() => props.colorBorder);
+
+const subscriptionStore = useSubscriptionStore();
+
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+
+function subscribeToCreator() {
+  subscriptionStore.subscribeTo(props.creator.id);
+}
+
+// Référence pour contrôler l'affichage du modal
+const showUnsubscribeModal = ref(false);
+
+function unsubscribeFromCreator() {
+  subscriptionStore.unsubscribeFrom(props.creator.id);
+  // Fermer le modal après désabonnement
+  showUnsubscribeModal.value = false;
+}
+</script>
+
+<template>
+  <template v-if="isSubscribe">
+    <v-btn
+        :style="{ 
+       width: '150px',
+       height: '32px',
+        backgroundColor: colorBorder, 
+        color: 'white', 
+      borderRadius: '8px 0 0 8px',
+        padding: '10px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
+        @click="subscribeToCreator"
+    >
+      <div class="font-bold">Follow</div>
+    </v-btn>
+  </template>
+
+  <template v-else>
+    <v-btn
+        :style="{ 
+       width: '150px',
+              height: '32px',
+        backgroundColor: colorBorder, 
+        color: 'white', 
+      borderRadius: '8px 0 0 8px',
+        padding: '10px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
+        @click="showUnsubscribeModal = true"
+    >
+      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
+    </v-btn>
+  </template>
+
+  <v-dialog v-model="showUnsubscribeModal" max-width="500">
+    <v-card class="text-center rounded-xl"
+            :style="{ border: `3px solid ${creator.colors.menu}` }">
+
+      <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+        <div class="flex-1 text-center">
+          Déabonnement
+        </div>
+      </div>
+
+      <v-card-title>Confirmation</v-card-title>
+      <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
+      <v-card-actions class="justify-center px-4 pb-4">
+        <v-btn text class="flex-grow-1" variant="outlined"
+               :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
+               @click="unsubscribeFromCreator">Oui
+        </v-btn>
+
+        <v-btn class="flex-grow-1"
+               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               @click="showUnsubscribeModal = false">
+          <div :style="{ color: creator.colors.menu }">Non</div>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+