Adds SVG for all social network icons

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('');