From b7b145233c1e92337fa12c697ea2a7db9e5afe13 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 3 Apr 2024 00:54:40 -0400
Subject: [PATCH] =?UTF-8?q?Update=20Ui=20-=20Modification=20du=20css=20pou?=
 =?UTF-8?q?r=20la=20fiche=20vid=C3=A9o=20et=20J'ai=20commenc=C3=A9=20a=20m?=
 =?UTF-8?q?odifi=C3=A9=20la=20partie=20du=20profile=20afin=20qu'il=20soit?=
 =?UTF-8?q?=20bien=20r=C3=A9actif=20-=20Ajustement=20des=20fonts=20et=20gr?=
 =?UTF-8?q?osseurs=20des=20=C3=A9l=C3=A9ments=20lors=20de=20plus=20petites?=
 =?UTF-8?q?=20r=C3=A9solutions.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/CreatorFolio.vue | 82 ++++++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index a7bfabf..3be6325 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -118,7 +118,7 @@
 
           </v-row>
 
-          <v-row style="height: 1000px;"></v-row>
+          <v-row style="height: 1400px;"></v-row>
 
           <!-- Wallet -->
           <v-row>
@@ -212,7 +212,7 @@
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
         <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
           <v-container>
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
@@ -282,7 +282,7 @@
 
                 <v-col class="text-right">
                   <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -335,7 +335,7 @@
 
                 <v-col class="text-right">
                   <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -370,7 +370,7 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%;"
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
                   placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
               </v-container>
             </div>
@@ -397,7 +397,7 @@
                 </v-container>
               </v-card>
             </v-container>
-            <v-container style="height: 1000px;">
+            <v-container style="height: 1600px;">
 
             </v-container>
 
@@ -438,14 +438,7 @@
             <h1 class="text-soutiens">JE SOUTIENS</h1>
             <v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
               auto-grow></v-textarea>
-            <v-text-field style="color: white;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="2"
-              auto-grow></v-text-field>
-            <v-btn class="mx-auto">
-              <v-icon left class="mr-4">
-                mdi-gift
-              </v-icon>
-              Donnez
-            </v-btn>
+            <StripePayment></StripePayment>
           </v-container>
         </v-bottom-sheet>
 
@@ -511,6 +504,7 @@ export default {
   left: 0;
   width: 100%;
   z-index: 1000;
+  margin-top: -40px;
 }
 
 .sticky-bottom-label {
@@ -520,6 +514,7 @@ export default {
   left: 0;
   width: 100%;
   z-index: 1000;
+  margin-top: 20px;
 }
 
 .sticky-top-label {
@@ -542,7 +537,7 @@ export default {
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
-  font-size: larger
+
 }
 
 .occupation-info {
@@ -908,14 +903,19 @@ export default {
 
 @media (min-width: 959px) and (max-width: 1280px) {
 
+  .middle-col {
+    margin-left: -30px;
+  }
+
   .text-soutiens {
     font-size: 1.2rem;
     letter-spacing: 5px;
+
   }
 
 
   .profile-container {
-    margin-top: -16%;
+    margin-top: -185px;
 
   }
 
@@ -924,11 +924,14 @@ export default {
   }
 
   .Je-soutien-container {
-    min-width: 300px;
+    min-width: 325px;
     margin-left: -45px;
   }
 
 
+  .mobile-profile-picture-creator {
+    transform: scale(.9) translateY(63px) translateX(-40px);
+  }
 
 
 }
@@ -941,11 +944,11 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(25px) translateX(-8px);
+    transform: scale(1.0) translateY(55px) translateX(-30px);
   }
 
   .profile-container {
-    margin-top: -25%;
+    margin-top: -180px;
 
   }
 
@@ -971,11 +974,11 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25px) translateX(-5px);
+    transform: scale(1.1) translateY(40px) translateX(-25px);
   }
 
   .profile-container {
-    margin-top: -20%;
+    margin-top: -171px;
 
   }
 
@@ -999,7 +1002,7 @@ export default {
   }
 
   .profile-container {
-    margin-top: -12%;
+    margin-top: -160px;
 
   }
 
@@ -1010,9 +1013,29 @@ export default {
   .Je-soutien-container {
     min-width: 400px;
   }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(40px) translateX(-10px);
+  }
+
+  .name-info {
+    font-size: 1.4rem;
+    margin-left: 40px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    margin-left: 150px;
+
+  }
+
+  .social-container2 {
+    margin-left: 80px;
+    min-width: 350px;
+  }
 }
 
-@media (min-width: 2559px) {
+@media (min-width: 2560px) {
   .card-youtube {
     min-height: 380px;
   }
@@ -1020,5 +1043,18 @@ export default {
   .text-soutiens {
     font-size: 1.5rem;
   }
+
+  .name-info {
+    font-size: 2rem;
+
+  }
+
+  .social-container {
+    margin-left: 150px;
+  }
+
+  .social-container2 {
+    margin-left: 150px;
+  }
 }
 </style>