From fefc28705a27747f00742ca264bdd28d66871ac3 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:33:45 -0400
Subject: [PATCH] Made SVG icons for recent social network

---
 public/images/hutopymedia/icons/tiktok.svg    | 13 ++++
 public/images/hutopymedia/icons/x.svg         | 13 ++++
 .../Dialogs/PageInformations/Socials.vue      | 71 ++++++++++++-------
 src/views/Profile/PageInformations.vue        |  4 +-
 4 files changed, 75 insertions(+), 26 deletions(-)
 create mode 100644 public/images/hutopymedia/icons/tiktok.svg
 create mode 100644 public/images/hutopymedia/icons/x.svg

diff --git a/public/images/hutopymedia/icons/tiktok.svg b/public/images/hutopymedia/icons/tiktok.svg
new file mode 100644
index 0000000..e83f460
--- /dev/null
+++ b/public/images/hutopymedia/icons/tiktok.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: #000;
+        stroke-width: 1px;
+        stroke-dasharray: 4 2;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Tiktok_1" data-name="Tiktok 1" class="cls-1" d="M820.292,990H171.646C14.581,990,11,989.648,11,821.766V174.626c0-159.964-1.459-161.5,154.584-161.5C198.026,13.122,258.91,12,291.878,12h458.7c43.88,0,15.011.37,47.358,0.37C986.933,12.37,987,17.717,987,199.3V793.727C987,989.389,946.485,990,820.292,990ZM532.342,195.936q-3.031,3.924-6.062,7.851c7.912,32.725,2.02,81.845,2.02,118.885V621.007c-5.878,25.116-21.509,52.119-39.4,63.929-65.7,43.363-157.373-18.919-133.366-104.305,7.6-27.019,36.416-53.485,62.642-59.443,14.361-3.262,33.807,2.726,44.455-2.243,5.2-22.038,1.692-65.469,2.021-94.211-96.37-32.3-186.121,59-204.091,132.344-5.533,22.583-15.541,61.3-6.062,91.968,25.379,82.1,60.537,106.81,129.325,143.56,19.407,10.368,70.144,7.051,90.932,2.243,90.864-21.02,136.493-72.949,153.573-176.085q-0.505-106.538-1.01-213.1l5.051-6.729c11.848,0.933,19.225,11.11,27.28,16.823,16.459,11.676,54.457,22.153,79.818,22.432,2.394-19.282,6.375-99.811-1.011-117.764-15.162-6.86-34.949-4.067-50.517-12.337-19.277-10.241-42.6-26.041-55.57-43.741C626.435,256.259,598.6,199.14,597,198.179,583.942,190.284,549.838,195.687,532.342,195.936Z"/>
+</svg>
diff --git a/public/images/hutopymedia/icons/x.svg b/public/images/hutopymedia/icons/x.svg
new file mode 100644
index 0000000..1a35538
--- /dev/null
+++ b/public/images/hutopymedia/icons/x.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: #000;
+        stroke-width: 1px;
+        stroke-dasharray: 4 2;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Social_x_-2_1" data-name="Social x -2 1" class="cls-1" d="M208.568,8c149.2,0.331,300.422,2.648,449.617,2.979,86.663,0,162.7-4.391,218.357,25.818,41.312,22.424,77.08,62.95,94.291,109.23,20.963,56.368,12.9,149.956,12.9,225.411V674.3c0,48.187,7.128,109.475-3.97,150.936-13.034,48.693-38.509,94.2-74.44,120.153-24.954,18.023-55.528,34.237-90.321,41.706-23.029,4.944-51.493,2.979-78.41,2.979H318.739c-46.8,0-103.154,5.907-144.909-2.979-60.19-12.809-108.811-49.038-136.97-94.335C2.042,836.752,11.055,767.026,11.055,675.3c0-117.493.992-362.125,0.992-479.618C12.047,63.677,151.59,8,208.568,8Zm10.918,201.579-2.977,1.986L436.851,500.528c-4.6,17.548-37.928,43.94-49.627,58.586L271.1,694.162c-11.979,15.019-36.369,30.637-42.679,49.65l89.328-.993,158.805-183.7c5.547,0.3,5.794,1.012,8.933,2.979,9.391,25.049,36.577,46.289,51.611,67.524,19.634,27.733,42.32,53.1,61.537,80.433,7.99,11.363,14.845,25.453,25.806,33.762H754.461c12.721,0,40.162,4,48.634-1.986L633.372,516.416c-12.208-17.35-56.689-63.437-60.544-81.426L767.364,211.565v-0.993l-3.97-.993-84.365.993L576.8,326.753c-13.733,17.111-28.64,40.051-46.649,52.629h-1.985L400.127,210.572Zm126.052,49.65,29.776,1.986L695.9,685.225l-0.993,5.958-46.649-.993q-30.765-40.212-61.537-80.433l-184.611-241.3L343.553,292c-5.976-8.018-22.454-20.757-20.843-31.776Z"/>
+</svg>
diff --git a/src/views/Profile/Dialogs/PageInformations/Socials.vue b/src/views/Profile/Dialogs/PageInformations/Socials.vue
index 37cc76d..3142614 100644
--- a/src/views/Profile/Dialogs/PageInformations/Socials.vue
+++ b/src/views/Profile/Dialogs/PageInformations/Socials.vue
@@ -43,7 +43,7 @@ const save = async () => {
     props.creator.socials.websiteUrl = websiteUrl
     props.creator.socials.xUrl = xUrl
     props.creator.socials.youtubeUrl = youtubeUrl
-    
+
     emits('closeRequested')
   } catch (error) {
     console.error(error)
@@ -58,63 +58,86 @@ const cancel = () => {
 
 <template>
   <div class="pb-5 text-2xl">Reseaux Sociaux</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="facebookUrl"
-      label="Lien Facebook"
-      outlined
-  ></v-text-field>
-
-  <v-text-field
-      variant="outlined"
-      v-model="instagramUrl"
-      label="Lien Instagram"
-      outlined
-  ></v-text-field>
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
+    <v-text-field
+        variant="outlined"
+        v-model="facebookUrl"
+        label="Lien Facebook"
+        outlined
+    ></v-text-field>
+  </div>
 
 
-  <v-text-field
-      variant="outlined"
-      v-model="linkedInUrl"
-      label="Lien LinkedIn"
-      outlined
-  ></v-text-field>
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
+    <v-text-field
+        variant="outlined"
+        v-model="instagramUrl"
+        label="Lien Instagram"
+        outlined
+    ></v-text-field>
+  </div>
 
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
+    <v-text-field
+        variant="outlined"
+        v-model="linkedInUrl"
+        label="Lien LinkedIn"
+        outlined
+    ></v-text-field>
+</div>
+
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
   <v-text-field
       variant="outlined"
       v-model="redditUrl"
       label="Lien Reddit"
       outlined
   ></v-text-field>
-
+</div>
+  
+  <div class="flex flex-row align-center">
+    <img src="/images/hutopymedia/icons/tiktok.svg" width="23px" height="23px" class="mb-5 mr-2">      
   <v-text-field
       variant="outlined"
       v-model="tikTokUrl"
       label="Lien TikTok"
       outlined
   ></v-text-field>
+  </div>
 
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-web</v-icon>
   <v-text-field
       variant="outlined"
       v-model="websiteUrl"
       label="Lien site web"
       outlined
   ></v-text-field>
+  </div>
 
-  <v-text-field
+  <div class="flex flex-row align-center">
+    <img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px" class="mb-5 mr-2">
+    <v-text-field
       variant="outlined"
       v-model="xUrl"
       label="Lien X"
       outlined
   ></v-text-field>
+  </div>
 
-  <v-text-field
+  <div class="flex flex-row align-center">
+    <v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
+  <v-text-field      
       variant="outlined"
       v-model="youtubeUrl"
       label="Lien Youtube"
       outlined
   ></v-text-field>
+  </div>
 
   <div class="flex justify-end space-x-4">
     <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
diff --git a/src/views/Profile/PageInformations.vue b/src/views/Profile/PageInformations.vue
index 3b209bc..083f2ba 100644
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -142,7 +142,7 @@ const closeDialog = () => {
         <button
             @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-          <span class="flex-none pa-2 min-w-32 text-left"><v-icon>mdi-twitter</v-icon></span>
+          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px"></span>
           <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
           <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
@@ -163,7 +163,7 @@ const closeDialog = () => {
             @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="flex-none pa-2 min-w-32 text-left"> 
-            <img src="/images/socials/tiktok-black.png" class="w-5 h-5">
+            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
           </span>
           <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
           <span class="flex-none">