From c13ea466d9b54ce52c2158f95e41c0dfd69c5b43 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 2 Apr 2024 20:04:01 -0400
Subject: [PATCH 1/3] Modification de CreatorFolio - Tweaking de la mise en
 page, changement du favicon et modification du component StripePayment pour
 le ui

---
 public/favicon.ico              | Bin 4286 -> 15086 bytes
 src/views/StripePayment.vue     | 125 +++++++-------
 src/views/main/CreatorFolio.vue | 297 ++++++++++++++++++++++++--------
 3 files changed, 289 insertions(+), 133 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..964730e860fc2c904f27a6850dc90cd704b18dc4 100644
GIT binary patch
literal 15086
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

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 0a2eb34..d5a3954 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -1,42 +1,49 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col>
-        <v-text-field
-          label="Montant ($)"
-          v-model="price"
-          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
-        </v-text-field>
-      </v-col>
 
-      <v-col>
-        <v-btn
-          @click="goPay()"
-          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
-          >Envoyez
-        </v-btn>
-      </v-col>
+    <v-row>
+      <v-text-field label="Message"
+        style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
     </v-row>
 
+
+    <v-row>
+      <v-text-field label="Montant ($)" v-model="price"
+        style="margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
+    </v-row>
+
+    <v-row justify="center">
+      <v-btn @click="goPay()"
+        style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
+        <v-icon left style="margin-right: 10px;">
+          mdi-gift
+        </v-icon>
+        Envoyez
+      </v-btn>
+    </v-row>
+
+
     <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
       <template v-slot:default>
         <v-card>
-            <div id="checkout">
-                <!-- Checkout will insert the payment form here -->
-            </div>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn
-                    text="Annuler"
-                    @click="closeDialog()"
-                ></v-btn>
-            </v-card-actions>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
+          </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
   </v-container>
 
 
+
+
+
 </template>
 
 <script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
-  let stripe = null;
-  const client = useClient();
-  const price = ref(0);
-  const isPaymentDialogActive = ref(false);
-  var checkout;
+let stripe = null;
+const client = useClient();
+const price = ref(0);
+const isPaymentDialogActive = ref(false);
+var checkout;
 
-  onMounted(async () => {
-    // I removed api key to push. Need to get it from backend.
-    stripe = await loadStripe('');
-  })
+onMounted(async () => {
+  // I removed api key to push. Need to get it from backend.
+  stripe = await loadStripe('');
+})
 
-  const fetchClientSecret = async () => {
-    const clientSecret = await createCheckoutSession();
-    return clientSecret;
-  };
+const fetchClientSecret = async () => {
+  const clientSecret = await createCheckoutSession();
+  return clientSecret;
+};
 
-  async function createCheckoutSession() {
-    let clientSecret = await client.post('/api/Stripe', {
-      price: price.value * 100
-    });
-
-    let secret = clientSecret["data"];
-    return secret;
-  }
-
-  function closeDialog(){
-    isPaymentDialogActive.value = false;
-    checkout.destroy();
-  }
-
-  async function goPay() {
-    isPaymentDialogActive.value = true;
-
-    checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
+async function createCheckoutSession() {
+  let clientSecret = await client.post('/api/Stripe', {
+    price: price.value * 100
   });
 
-    await checkout.mount('#checkout');
-  }
+  let secret = clientSecret["data"];
+  return secret;
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  checkout.destroy();
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  checkout = await stripe.initEmbeddedCheckout({
+    fetchClientSecret,
+  });
+
+  await checkout.mount('#checkout');
+}
 
 </script>
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index c1dac89..a7bfabf 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -3,12 +3,15 @@
     <DefaultLayout></DefaultLayout>
 
     <!-- Bannière -->
-    <v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;">
+    <v-row class="fluid" style="margin-top: -50px; position: relative; z-index: 0;">
       <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
         <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
           style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
       </v-col>
     </v-row>
+    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+
+    </v-row>
 
 
 
@@ -65,50 +68,57 @@
     <!-- "Creator Core (Menu / Feed / Donation)" -->
     <v-row>
       <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" hidden-sm-and-down>
-
-        <v-img src="../../../images/hutopy.png" alt="Description de l'image" style="height: 150px; width: 300px;"
-          class="mx-auto" :elevation="10"></v-img>
+      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
         <v-col style="margin: 0;">
+          <v-row class="Hutopy-menu-sticky">
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-container style=" overflow-y: hidden;">
+                <!-- Nav-Btn -->
+                <v-col cols="12" class="px-0">
+                  <v-img src="../../../images/hutopy.png" alt="Description de l'image"
+                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
+                  <v-list dense class="main-background">
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
+                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
+                          outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Tools -->
+                <v-col cols="12" class="px-0">
+                  <v-list dense class="d-flex align-start align-center main-background">
 
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
+                        <v-btn text class="btn-custom" elevation="0" outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Log-out -->
+                <v-col cols="12" class="px-0 logout-button">
+                  <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
+                    <v-icon left class="mr-4">mdi-logout</v-icon>
+                    Déconnexion
+                  </v-btn>
+                </v-col>
+              </v-container>
 
-          <v-container style=" overflow-y: hidden;">
-            <!-- Nav-Btn -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="main-background">
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
-                    <v-btn text class="d-flex align-start align-center main-background" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
             </v-col>
-            <!-- Tools -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="d-flex align-start align-center main-background">
 
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
-                    <v-btn text class="btn-custom" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
-            </v-col>
-            <!-- Log-out -->
-            <v-col cols="12" class="px-0 logout-button">
-              <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
-                <v-icon left class="mr-4">mdi-logout</v-icon>
-                Déconnexion
-              </v-btn>
-            </v-col>
-          </v-container>
 
+          </v-row>
+
+          <v-row style="height: 1000px;"></v-row>
 
           <!-- Wallet -->
           <v-row>
@@ -198,10 +208,11 @@
             </v-dialog>
           </v-row>
         </v-col>
+
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="9" lg="7" xl="6" xxl="6">
+      <v-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>
@@ -284,12 +295,65 @@
             <div
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
               <v-container>
-                <iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0"
-                  title="Guillaumem" frameborder="0"
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowfullscreen></iframe>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
+                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
+                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
+                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
+                  comprises. Et toi, quel est ton objectif pour cette année?</p>
+
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <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>
+          </v-card>
+        </v-container>
+
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <v-col>
+              <v-row>
+                <v-col>
+                  <h1 class="card-title">
+                    PODCAST #01</h1>
+                </v-col>
+
+                <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-btn>
+                </v-col>
+              </v-row>
+              <v-row>
+                <h1 class="card-date">
+                  10-03-2024</h1>
+              </v-row>
+            </v-col>
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+              <v-container>
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen></iframe>
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
                   mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
                   histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
                   créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
@@ -315,31 +379,33 @@
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="3" xxl="3" class="hidden-md-and-down" hidden-md-and-up>
-        <v-container class="sticky-bottom-label" style="max-width: 400px ;  bottom: 0; z-index: 1000;">
-          <!-- Donnation -->
-          <v-card style="border-radius: 20px;">
-            <v-container>
-              <v-row class="mb-0"
-                style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                  JE SOUTIENS!
-                </v-card-title>
-              </v-row>
-              <v-spacer style="height: 20px;"></v-spacer>
-              <v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-textarea>
-              <v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-text-field>
-              <v-btn block class="ma-auto" style="width: 200px;">
-                <v-icon left>
-                  mdi-gift
-                </v-icon>
-                Donnez
-              </v-btn>
+      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+        <v-row>
+          <v-col>
+            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
+              <!-- Donnation -->
+              <v-card style="border-radius: 20px;">
+                <v-container>
+                  <v-row class="mb-0"
+                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                      JE SOUTIENS!
+                    </v-card-title>
+                  </v-row>
+
+                  <StripePayment></StripePayment>
+                </v-container>
+              </v-card>
             </v-container>
-          </v-card>
-        </v-container>
+            <v-container style="height: 1000px;">
+
+            </v-container>
+
+          </v-col>
+          <v-spacer>
+          </v-spacer>
+        </v-row>
+
       </v-col>
 
 
@@ -351,7 +417,7 @@
 
 
     <!-- "Mobile" Donation -->
-    <v-col class="hidden-lg-and-up sticky-bottom-label" hidden-md-and-down
+    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
       style="background-color: #6b0065; margin-top: 30px; text-align: center;">
 
       <!-- Barre cliquable pour ouvrir le drawer -->
@@ -398,6 +464,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import StripePayment from '../StripePayment.vue';
 </script>
 
 <script>
@@ -414,6 +481,7 @@ export default {
       tiktokLink: 'tiktok.com',
       drawer: false,
       drawerbottom: false,
+
       items: [
         { title: 'Item 1' },
         { title: 'Item 2' },
@@ -436,6 +504,15 @@ export default {
 
 
 <style scoped>
+.Hutopy-menu-sticky {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
 .sticky-bottom-label {
   position: sticky;
   top: 0;
@@ -457,8 +534,8 @@ export default {
 .text-soutiens {
   margin-bottom: 15px;
   color: white;
-  font-size: 2rem;
-  letter-spacing: 10px;
+  font-size: 1.5rem;
+  letter-spacing: 7px;
   text-align: center;
 }
 
@@ -599,6 +676,8 @@ export default {
 .youtube-card {
   margin-left: 2%;
   margin-right: 2%;
+  border-radius: 15px;
+
 
 
   background-color: #f4f4f4;
@@ -753,6 +832,10 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 250px;
+  }
+
 }
 
 
@@ -784,6 +867,10 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 330px;
+  }
+
 }
 
 
@@ -813,17 +900,37 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 425px;
+  }
+
 }
 
 @media (min-width: 959px) and (max-width: 1280px) {
 
-
+  .text-soutiens {
+    font-size: 1.2rem;
+    letter-spacing: 5px;
+  }
 
 
   .profile-container {
     margin-top: -16%;
 
   }
+
+  .card-youtube {
+    min-height: 270px;
+  }
+
+  .Je-soutien-container {
+    min-width: 300px;
+    margin-left: -45px;
+  }
+
+
+
+
 }
 
 
@@ -842,12 +949,25 @@ export default {
 
   }
 
+  .card-youtube {
+    min-height: 290px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 350px;
+  }
+
 }
 
 
 @media (min-width: 1600px) and (max-width: 1919px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .mobile-profile-picture-creator {
@@ -858,18 +978,47 @@ export default {
     margin-top: -20%;
 
   }
+
+  .card-youtube {
+    min-height: 355px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .profile-container {
     margin-top: -12%;
 
   }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
 }
 
-@media (min-width: 2559px) {}
+@media (min-width: 2559px) {
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .text-soutiens {
+    font-size: 1.5rem;
+  }
+}
 </style>

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 2/3] =?UTF-8?q?Update=20Ui=20-=20Modification=20du=20css?=
 =?UTF-8?q?=20pour=20la=20fiche=20vid=C3=A9o=20et=20J'ai=20commenc=C3=A9?=
 =?UTF-8?q?=20a=20modifi=C3=A9=20la=20partie=20du=20profile=20afin=20qu'il?=
 =?UTF-8?q?=20soit=20bien=20r=C3=A9actif=20-=20Ajustement=20des=20fonts=20?=
 =?UTF-8?q?et=20grosseurs=20des=20=C3=A9l=C3=A9ments=20lors=20de=20plus=20?=
 =?UTF-8?q?petites=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>

From 417d7c8a57dd01d988b83a00586a6970360e751c Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 3 Apr 2024 21:07:30 -0400
Subject: [PATCH 3/3] Branch Fixe - CreatorFolio

---
 src/views/main/CreatorFolio.vue | 68 ++++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 3be6325..faaa48d 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -232,22 +232,24 @@
 
               <v-row>
                 <v-spacer></v-spacer>
-                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/facebookicon.png"
-                        alt="Description image 2">
-                    </a>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
-                    </a>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
-                    </a>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
-                    </a>
-                  </v-row>
+                <v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
+                  <v-col cols="11" style="margin-top: 1%; margin-bottom: -2%;">
+    <v-row justify-center align="center">
+        <a href="https://www.facebook.com/profile.php?id=61556819217561">
+            <img class="socialicons invert-color" src="../../../images/facebookicon.png" alt="Description image 2">
+        </a>
+        <a href="https://www.facebook.com/profile.php?id=61556819217561">
+            <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
+        </a>
+        <a href="https://www.facebook.com/profile.php?id=61556819217561">
+            <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
+        </a>
+        <a href="https://www.facebook.com/profile.php?id=61556819217561">
+            <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
+        </a>
+    </v-row>
+</v-col>
+
                 </v-col>
                 <v-col background-color="primary"></v-col>
               </v-row>
@@ -703,9 +705,11 @@ export default {
 .social-container2 {
   background-color: #0baab2;
   border-bottom-right-radius: 30px;
+  border-bottom-left-radius:30px;
   font-size: 1.4rem;
   font-weight: 500;
   color: white;
+
 }
 
 .social-container-mobile {
@@ -924,8 +928,8 @@ export default {
   }
 
   .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -45px;
+    min-width: 300px;
+    margin-left: -40px;
   }
 
 
@@ -933,7 +937,16 @@ export default {
     transform: scale(.9) translateY(63px) translateX(-40px);
   }
 
+  .name-info {
+    font-size: 1.3rem;
+    margin-left: 40px;
+    margin-top: -4px;
+  }
 
+  .social-container {
+    min-width: 300px;
+
+  }
 }
 
 
@@ -964,6 +977,17 @@ export default {
     min-width: 350px;
   }
 
+  .name-info {
+    font-size: 1.3rem;
+    margin-left: 50px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    min-width: 300px;
+
+  }
+
 }
 
 
@@ -993,6 +1017,14 @@ export default {
   .Je-soutien-container {
     min-width: 400px;
   }
+
+  .name-info {
+    font-size: 1.4rem;
+    margin-left: 40px;
+    margin-top: -4px;
+  }
+
+
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {