Adds SVG for all social network icons

frontend/src/views/creators/ActualBanner.vue

@@ -9,7 +9,7 @@
         @click="isCurrentCreator && openBannerEditor()"
     >
       <img
-          class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)] h-60"
+          class="drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)] w-[1024px] h-[256px]"
           :src="brandingStore.value.images?.banner ?? '/images/placeholders/banner.png'"
           alt="Profile Banner"
       >
@@ -30,11 +30,9 @@
 
   <v-dialog v-model="isDialogOpen" max-width="800px">
     <template #default="{ close }">
-      <div class="bg-white rounded-2xl p-4">
-        <banner-editor :creator="brandingStore.value"
-                       @closeRequested="() => isDialogOpen = false"
-        ></banner-editor>
-      </div>
+      <banner-editor :creator="brandingStore.value"
+                     @closeRequested="() => isDialogOpen = false"
+      ></banner-editor>
     </template>
   </v-dialog>
 

frontend/src/views/creators/BannerActions.vue

@@ -5,6 +5,14 @@ import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
 import {onBeforeUnmount, onMounted, ref} from 'vue';
 import CreatorLogo from "@/views/creators/CreatorLogo.vue";
 import NameTitle from "@/views/creators/NameTitle.vue";
+import Linkedin from "@/views/svg/Linkedin.vue";
+import X from "@/views/svg/X.vue";
+import Facebook from "@/views/svg/Facebook.vue";
+import Instagram from "@/views/svg/Instagram.vue";
+import Tiktok from "@/views/svg/Tiktok.vue";
+import Reddit from "@/views/svg/Reddit.vue";
+import Youtube from "@/views/svg/Youtube.vue";
+import Web from "@/views/svg/Web.vue";
 
 const brandingStore = useBrandingStore();
 const isMobile = ref(false);
@@ -16,70 +24,6 @@ function updateIsMobile() {
   isMobile.value = window.innerWidth <= 640;
 }
 
-// Récupération des URLs des réseaux sociaux
-function GetSocialsUrls() {
-  const socials = [];
-  const brandingSocials = brandingStore.value.socials;
-
-  if (brandingSocials?.facebookUrl) {
-    socials.push({
-      icon: 'mdi-facebook',
-      url: brandingSocials.facebookUrl,
-    });
-  }
-
-  if (brandingSocials?.instagramUrl) {
-    socials.push({
-      icon: 'mdi-instagram',
-      url: brandingSocials.instagramUrl,
-    });
-  }
-
-  if (brandingSocials?.xUrl) {
-    socials.push({
-      icon: 'mdi-twitter',
-      url: brandingSocials.xUrl,
-    });
-  }
-
-  if (brandingSocials?.linkedInUrl) {
-    socials.push({
-      icon: 'mdi-linkedin',
-      url: brandingSocials.linkedInUrl,
-    });
-  }
-
-  if (brandingSocials?.tikTokUrl) {
-    socials.push({
-      icon: '/images/socials/tiktok-white.png',
-      url: brandingSocials.tikTokUrl,
-    });
-  }
-
-  if (brandingSocials?.youtubeUrl) {
-    socials.push({
-      icon: 'mdi-youtube',
-      url: brandingSocials.youtubeUrl,
-    });
-  }
-
-  if (brandingSocials?.redditUrl) {
-    socials.push({
-      icon: 'mdi-reddit',
-      url: brandingSocials.redditUrl,
-    });
-  }
-
-  if (brandingSocials?.websiteUrl) {
-    socials.push({
-      icon: 'mdi-web',
-      url: brandingSocials.websiteUrl,
-    });
-  }
-
-  return socials;
-}
-
 const isSticky = ref(false);
 const mainContainer = ref(null);
 
@@ -130,7 +74,7 @@ onBeforeUnmount(() => {
             <creator-logo/>
           </div>
 
-          <div class="flex items-center ml-52 grow">
+          <div class="flex items-center ml-56 grow">
             <name-title></name-title>
           </div>
 
@@ -149,33 +93,69 @@ onBeforeUnmount(() => {
 
     <!-- Section pour les icônes de réseaux sociaux -->
     <div
-        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary text-hOnSecondary"
-        :style="{
-        boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
-      }"
+        class="rounded-b-2xl h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary"
     >
-      <div class="flex justify-evenly mt-3 w-full">
-        <div class="flex flex-row space-x-6 justify-center">
-          <a
-              v-for="socialNetwork in GetSocialsUrls()"
-              :key="socialNetwork.url"
-              :href="socialNetwork.url"
-              target="_blank"
-              class="text-md transform transition-transform duration-200 hover:scale-125 hover:text-fuchsia-900"
-          >
-            <v-icon v-if="socialNetwork.icon.includes('mdi')">
-              {{ socialNetwork.icon }}
-            </v-icon>
-            <img
-                v-else
-                :src="socialNetwork.icon"
-                class="w-6 h-6 mt-0.5"
-                :alt="socialNetwork.url"
-            />
-          </a>
-        </div>
+      <div class="flex flex-row gap-10">
+
+        <a v-if="brandingStore.value.socials?.facebookUrl"
+           :href="brandingStore.value.socials?.facebookUrl"
+           target="_blank">
+          <facebook class="social-icon"></facebook>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.instagramUrl"
+           :href="brandingStore.value.socials?.instagramUrl"
+           target="_blank">
+          <instagram class="social-icon"></instagram>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.linkedInUrl"
+           :href="brandingStore.value.socials?.linkedInUrl"
+           target="_blank">
+          <linkedin class="social-icon"></linkedin>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.redditUrl"
+           :href="brandingStore.value.socials?.redditUrl"
+           target="_blank">
+          <reddit class="social-icon"></reddit>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.tikTokUrl"
+           :href="brandingStore.value.socials?.tikTokUrl"
+           target="_blank">
+          <tiktok class="social-icon"></tiktok>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.xUrl"
+           :href="brandingStore.value.socials?.xUrl"
+           target="_blank">
+          <x class="social-icon"></x>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.youtubeUrl"
+           :href="brandingStore.value.socials?.youtubeUrl"
+           target="_blank">
+          <youtube class="social-icon"></youtube>
+        </a>
+
+        <a v-if="brandingStore.value.socials?.websiteUrl"
+           :href="brandingStore.value.socials?.websiteUrl"
+           target="_blank">
+          <web class="social-icon"></web>
+        </a>
+
       </div>
+
     </div>
   </div>
 </template>
 
+<style scoped>
+.social-icon {
+  @apply w-5 h-5;
+  @apply text-base;
+  @apply transform transition-transform duration-200;
+  @apply hover:scale-125 hover:text-fuchsia-900;
+}
+</style>

frontend/src/views/creators/BannerEditor.vue

@@ -1,25 +1,36 @@
 <template>
-  <h2 class="text-2xl font-semibold mb-4">
-    Bannière
-  </h2>
+  <div class="card">
+    <div class="card-title">
+      Bannière
+    </div>
 
-  <img
-      :src="fileUrl || fallbackUrl"
-      class="mb-5 w-full transition duration-200 ease-in-out transform"
-      alt="Aperçu de la bannière"
-  >
+    <div class="card-entry">
+      <img
+          :src="fileUrl || fallbackUrl"
+          alt="Aperçu de la bannière"
+          class="mb-5 transition duration-200 ease-in-out transform  w-[1024px] h-[256px]"
+      />
 
-  <v-file-input
-      v-model="selectedFile"
-      variant="outlined"
-      accept="image/*"
-      label="Votre bannière"
-      @change="onFileSelected"
-  ></v-file-input>
+      <v-file-input
+          v-model="selectedFile"
+          accept="image/*"
+          label="Votre bannière"
+          variant="outlined"
+          @change="onFileSelected"
+      ></v-file-input>
+    </div>
+
+    <div class="card-actions">
+      <button class="secondary"
+              @click="cancel">
+        Annuler
+      </button>
+      <button class="primary"
+              @click="publish">
+        Enregistrer
+      </button>
+    </div>
 
-  <div class="flex justify-end space-x-4">
-    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-    <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
   </div>
 </template>
 

frontend/src/views/creators/CreatorLogo.vue

@@ -6,12 +6,9 @@
   >
 
     <img
-        class="shadow-2xl rounded-full border-solid border-hSecondary border-102 max-w-[190px]"
+        class="shadow-2xl rounded-full border-solid border-hSecondary border-102 w-[200px] h-[200px]"
         :src="brandingStore.value.images?.logo ?? '/images/placeholders/logo.png'"
         alt="Profile Picture"
-        :style="{
-            height: '190px'
-        }"
     />
 
     <!-- Tint Effect -->
@@ -31,12 +28,10 @@
 
   <v-dialog v-model="isDialogOpen" max-width="800px">
     <template #default="{ close }">
-      <div class="bg-white rounded-2xl p-4">
         <creator-logo-editor
             :creator="brandingStore?.value"
             @closeRequested="() => isDialogOpen = false"
         ></creator-logo-editor>
-      </div>
     </template>
   </v-dialog>
 

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -1,27 +1,36 @@
 <template>
-  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
-    Logo
-  </h2>
+  <div class="card">
+    <div class="card-title">
+      Logo
+    </div>
 
-  <div class="flex justify-center mb-5">
-    <img
-        :src="fileUrl || fallbackUrl"
-        class="w-full transition duration-200 ease-in-out transform max-w-[400px]"
-        alt="Aperçu du logo"
-    />
-  </div>
+    <div class="card-entry flex flex-col items-center">
+      <img
+          :src="fileUrl || fallbackUrl"
+          alt="Aperçu du logo"
+          class="mb-5 transition duration-200 ease-in-out transform w-[200px] h-[200px]"
+      />
 
-  <v-file-input
-      v-model="selectedFile"
-      variant="outlined"
-      accept="image/*"
-      label="Votre logo"
-      @change="onFileSelected"
-  ></v-file-input>
+      <v-file-input
+          v-model="selectedFile"
+          accept="image/*"
+          class="w-full"
+          label="Votre logo"
+          variant="outlined"
+          @change="onFileSelected"
+      ></v-file-input>
+    </div>
 
-  <div class="flex justify-end space-x-4">
-    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-    <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
+    <div class="card-actions">
+      <button class="secondary"
+              @click="cancel">
+        Annuler
+      </button>
+      <button class="primary"
+              @click="publish">
+        Enregistrer
+      </button>
+    </div>
   </div>
 
 </template>

frontend/src/views/creators/DonationButton.vue

@@ -1,164 +0,0 @@
-<template> 
-  <v-btn class="hover:scale-125" variant="text" @click="openDonationDialog()">
-    <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
-  </v-btn>
-
-
-  <v-dialog v-model="donationModal" max-width="500">
-    <v-form>
-      <v-card class="text-center rounded-xl border-2 border-solid border-hPrimary">
-        <div class="py-4 text-2xl font-bold border-b mb-2">
-          Je Soutiens!
-        </div>
-
-        <div class="flex flex-row align-center px-3">
-          <img
-              :src="brandingStore.value.images.logo"
-              alt="Profile Image"
-              class="rounded-full border-2 border-solid border-hSecondary"
-              width="40"
-              height="40">
-          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
-          <v-btn @click="closeDonationDialog()" class="ml-auto" variant="text">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </div>
-
-        <v-card-text>
-          <v-text-field
-              v-model="tipAmountInDollars"
-              type="number"
-              :min="0"
-              class="p-2"
-              label="Montant"
-              density="comfortable"
-              variant="outlined"
-              hide-details
-              clearable
-              inputmode="numeric"
-              @keydown="preventNonNumeric"
-              prepend-inner-icon="mdi-currency-usd"
-          ></v-text-field>
-
-          <v-textarea v-model="tipMessage"
-                      label="Message (facultatif)"
-                      class="p-2"
-                      density="comfortable"
-                      variant="outlined"
-                      hide-details
-                      clearable
-          ></v-textarea>
-
-          <v-btn variant="outlined"
-                 @click="goPay()"
-                 class="w-full mt-5 border-hPrimary">
-            Envoyez
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-form>
-  </v-dialog>
-
-  <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
-    <template v-slot:default>
-      <v-card>
-
-        <div id="checkout">
-        </div>
-
-        <v-spacer></v-spacer>
-
-        <v-card-actions>
-          <v-btn block class="ma-auto"
-                 style="width: 200px;"
-                 @click="closeDialog()">Annuler
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </template>
-  </v-dialog>
-
-</template>
-
-<script setup>
-import {useClient} from '@/plugins/api.js';
-import {loadStripe} from '@stripe/stripe-js';
-import {onMounted, ref} from 'vue';
-import {useBrandingStore} from "@/stores/brandingStore.js";
-
-const brandingStore = useBrandingStore()
-
-const props = defineProps({
-  creatorId: {default: 'missing-creator-id', required: true},
-  creatorName: {default: 'missing-creator-name', required: true},
-  onSuccessUrl: {default: 'missing-on-success-u', required: true},
-  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
-  iconColorClass: {default: 'text-black'}
-});
-
-const donationModal = ref(false);
-
-function openDonationDialog() {
-  donationModal.value = true
-}
-
-function closeDonationDialog() {
-  donationModal.value = false
-}
-
-
-const isPaymentDialogActive = ref(false);
-
-const tipAmountInDollars = ref(0);
-const tipMessage = ref("");
-
-let stripe = null;
-let checkout;
-
-
-onMounted(async () => {
-  stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
-});
-
-async function createCheckoutSession() {
-  const client = useClient()
-
-  let clientSecret = await client.post(
-      `/api/tips`,
-      {
-        amount: tipAmountInDollars.value * 100,
-        currency: 'CAD',
-        message: tipMessage.value,
-        creatorId: props.creatorId,
-        checkoutSuccessUrl: props.onSuccessUrl,
-        checkoutCancelledUrl: props.onCancelledUrl
-      });
-
-  return clientSecret.data;
-}
-
-function closeDialog() {
-  isPaymentDialogActive.value = false;
-  if (checkout) {
-    checkout.destroy();
-  }
-}
-
-async function goPay() {
-  isPaymentDialogActive.value = true;
-
-  const response = await createCheckoutSession()
-
-  // Redirect to the Stripe Checkout page
-  window.location.href = response.stripeCheckoutUrl
-}
-
-function preventNonNumeric(event) {
-  const key = event.key;
-  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
-
-  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
-    event.preventDefault();
-  }
-}
-</script>

frontend/src/views/creators/DonationButtonBanner.vue

@@ -1,40 +1,19 @@
 <template>
   <button
       class="secondary"
-    @click="openDonationDialog()"
+      @click="openDonationDialog()"
   >
     {{ $t('isupportbtn.isupport') }}
   </button>
 
-  <v-dialog v-model="donationModal" max-width="500">
-    <v-form>
-      <v-card
-        class="text-center rounded-xl border-2 border-solid border-hPrimary"
-      >
-        <div class="py-4 text-2xl font-bold border-b mb-2"> {{ $t('isupportbtn.isupport') }}</div>
+  <v-dialog v-model="donationModal">
+    <div class="card">
+      <div class="card-title">
+        {{ $t('isupportbtn.isupport') }}
+      </div>
 
-        <div class="flex flex-row align-center px-3">
-          <img
-            :src="brandingStore.value.images.logo"
-            alt="Profile Image"
-            class="rounded-full border-2 border-solid border-hSecondary"
-            width="40"
-            height="40"
-          />
-          <div class="capitalize px-2 text-2xl">
-            {{ brandingStore.value.name }}
-          </div>
-          <v-btn
-            @click="closeDonationDialog()"
-            class="ml-auto"
-            variant="text"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </div>
-
-        <v-card-text>
-          <v-text-field
+      <div class="card-entry">
+        <v-text-field
             v-model="tipAmountInDollars"
             type="number"
             autofocus
@@ -49,9 +28,9 @@
             inputmode="numeric"
             @keydown="preventNonNumeric"
             prepend-inner-icon="mdi-currency-usd"
-          ></v-text-field>
+        ></v-text-field>
 
-          <v-textarea
+        <v-textarea
             v-model="tipMessage"
             :label="`${$t('isupportbtn.message')}`"
             class="p-2"
@@ -59,18 +38,23 @@
             variant="outlined"
             hide-details
             clearable
-          ></v-textarea>
+        ></v-textarea>
+      </div>
 
-          <v-btn
-            variant="outlined"
-            @click="goPay()"
-            class="w-full mt-5 border-hPrimary bg-hSecondary text-hOnPrimary"
-          >
-            {{ $t('isupportbtn.send') }}
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-form>
+      <div class="card-actions">
+
+        <button class="secondary"
+                @click="closeDonationDialog()">
+          Cancel
+        </button>
+
+        <button class="primary"
+                @click="goPay()">
+          {{ $t('isupportbtn.send') }}
+        </button>
+
+      </div>
+    </div>
   </v-dialog>
 
   <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
@@ -83,11 +67,11 @@
 
         <v-card-actions>
           <v-btn
-            block
-            class="ma-auto"
-            style="width: 200px"
-            @click="closeDialog()"
-            >Annuler
+              block
+              class="ma-auto"
+              style="width: 200px"
+              @click="closeDialog()"
+          >Annuler
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -104,11 +88,11 @@ import {onMounted, ref} from 'vue';
 const brandingStore = useBrandingStore();
 
 const props = defineProps({
-  creatorId: { default: 'missing-creator-id', required: true },
-  creatorName: { default: 'missing-creator-name', required: true },
-  onSuccessUrl: { default: 'missing-on-success-u', required: true },
-  onCancelledUrl: { default: 'missing-on-cancelled-url', required: true },
-  iconColorClass: { default: 'text-black' },
+  creatorId: {default: 'missing-creator-id', required: true},
+  creatorName: {default: 'missing-creator-name', required: true},
+  onSuccessUrl: {default: 'missing-on-success-u', required: true},
+  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
+  iconColorClass: {default: 'text-black'},
 });
 
 const errorMessage = ref('');