Made SVG icons for recent social network

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>

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>

src/views/Profile/Dialogs/PageInformations/Socials.vue

@@ -58,63 +58,86 @@ const cancel = () => {
 
 <template>
   <div class="pb-5 text-2xl">Reseaux Sociaux</div>
-
+  <div class="flex flex-row align-center">
-  <v-text-field
+    <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
-      variant="outlined"
+    <v-text-field
-      v-model="facebookUrl"
+        variant="outlined"
-      label="Lien Facebook"
+        v-model="facebookUrl"
-      outlined
+        label="Lien Facebook"
-  ></v-text-field>
+        outlined
-
+    ></v-text-field>
-  <v-text-field
+  </div>
-      variant="outlined"
-      v-model="instagramUrl"
-      label="Lien Instagram"
-      outlined
-  ></v-text-field>
 
 
-  <v-text-field
+  <div class="flex flex-row align-center">
-      variant="outlined"
+    <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
-      v-model="linkedInUrl"
+    <v-text-field
-      label="Lien LinkedIn"
+        variant="outlined"
-      outlined
+        v-model="instagramUrl"
-  ></v-text-field>
+        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>
 
+  <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>

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">