From 351748d068f58bc28c02caf7c381051ceccc51ba Mon Sep 17 00:00:00 2001
From: Paul Kehnel <ga65coy@mytum.de>
Date: Fri, 5 Mar 2021 14:08:03 +0100
Subject: [PATCH] Button Styling

---
 .../ChatVisualization/ChatVisualization.vue   |  23 ++-
 components/DownloadPopup.vue                  | 181 ++++++++++--------
 2 files changed, 123 insertions(+), 81 deletions(-)

diff --git a/components/ChatVisualization/ChatVisualization.vue b/components/ChatVisualization/ChatVisualization.vue
index 31a370bc..93fdde8e 100644
--- a/components/ChatVisualization/ChatVisualization.vue
+++ b/components/ChatVisualization/ChatVisualization.vue
@@ -3,7 +3,7 @@
     <v-row>
       <ChatVisualizationChat :chat="chat" :attachments="attachments" />
     </v-row>
-    <v-row justify="center">
+    <v-row justify="center" id="payButton">
       <div class="cta my-md-4">
         <div class="text-h3 font-weight-bold pb-4">
           We generate your chat PDF
@@ -33,11 +33,27 @@
               <v-icon>mdi-download</v-icon>
               Download full chat PDF
             </v-btn>
+            <div
+              class="link"
+              v-bind="attrs"
+              v-on.prevent="on"
+              @click="
+                $gtag.event('download-preview-popup-clicked', {
+                  event_category: 'download',
+                  event_label: 'popup-clicked',
+                  value: '0.5',
+                })
+              "
+            >
+              Retrieve a free preview of your chat
+            </div>
           </template>
           <v-card>
             <v-card-title class="headline cyan" style="word-break: normal">
-              <div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
-              <span>Buy us a ☕️ and get your results for free!!!</span>
+              <div class="text-h4 font-weight-bold">
+                This feature is coming on the 03/10/21 !!
+              </div>
+              <span>You can still buy us a ☕️ if you like!!!</span>
             </v-card-title>
 
             <v-card-text class="pt-3">
@@ -65,7 +81,6 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
-        <div class="link">Retrieve a free preview of your chat</div>
       </div>
     </v-row>
   </v-col>
diff --git a/components/DownloadPopup.vue b/components/DownloadPopup.vue
index 605fc8b6..46d0711c 100644
--- a/components/DownloadPopup.vue
+++ b/components/DownloadPopup.vue
@@ -1,75 +1,82 @@
 <template>
-  <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          color="red lighten-2"
-          dark
-          v-bind="attrs"
-          v-on="on"
-          @click="
-            $gtag.event('donation-popup-clicked', {
-              event_category: 'donation',
-              event_label: 'popup-clicked',
-              value: '1',
-            })
-          "
-        >
-          <v-icon>mdi-download</v-icon>Download your Results now!
-        </v-btn>
-      </template>
+  <v-col class="my-4 mb-16">
+    <v-row justify="center">
+      <div class="cta my-md-4">
+        <div class="text-h3 font-weight-bold pb-4">
+          Download all Graphs at once!
+        </div>
+        <div class="text-body-1">Currently for free! <br /></div>
+        <v-dialog v-model="dialog" width="500">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              color="#07bc4c"
+              dark
+              v-bind="attrs"
+              v-on="on"
+              @click="download"
+            >
+              <v-icon>mdi-download</v-icon>Download your Results now!
+            </v-btn>
+          </template>
 
-      <v-card>
-        <v-card-title class="headline cyan" style="word-break: normal">
-          <div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
-          <span>Buy us a ☕️ and get your results for free!!!</span>
-        </v-card-title>
+          <v-card>
+            <v-card-title class="headline cyan" style="word-break: normal">
+              <div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
+              <span>Buy us a ☕️ and get your results for free!!!</span>
+            </v-card-title>
 
-        <v-card-text class="pt-3">
-          You will get all results as an image exactly as presented on your
-          device. Generating may take a while.
-        </v-card-text>
+            <v-card-text class="pt-3">
+              You will get all results as an image exactly as presented on your
+              device. Generating may take a while.
+            </v-card-text>
 
-        <v-row align="center" justify="center" class="mb-3" @click="download">
-          <form
-            action="https://www.paypal.com/donate"
-            method="post"
-            target="_blank"
-          >
-            <input
-              type="hidden"
-              name="hosted_button_id"
-              value="EPCYG8WEF289G"
-            />
-            <input
-              type="image"
-              src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
-              border="0"
-              name="submit"
-              title="PayPal - The safer, easier way to pay online!"
-              alt="Donate with PayPal button"
-            />
-            <img
-              alt=""
-              border="0"
-              src="https://www.paypal.com/en_US/i/scr/pixel.gif"
-              width="1"
-              height="1"
-            />
-          </form>
-        </v-row>
-        <v-divider></v-divider>
+            <v-row
+              align="center"
+              justify="center"
+              class="mb-3"
+              @click="paypalButtonPressed"
+            >
+              <form
+                action="https://www.paypal.com/donate"
+                method="post"
+                target="_blank"
+              >
+                <input
+                  type="hidden"
+                  name="hosted_button_id"
+                  value="EPCYG8WEF289G"
+                />
+                <input
+                  type="image"
+                  src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
+                  border="0"
+                  name="submit"
+                  title="PayPal - The safer, easier way to pay online!"
+                  alt="Donate with PayPal button"
+                />
+                <img
+                  alt=""
+                  border="0"
+                  src="https://www.paypal.com/en_US/i/scr/pixel.gif"
+                  width="1"
+                  height="1"
+                />
+              </form>
+            </v-row>
+            <v-divider></v-divider>
 
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="red darken-1" text @click="dialog = false">
-            Close
-          </v-btn>
-          <v-btn color="primary" text :loading="true"> Download </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="red darken-1" text @click="dialog = false">
+                Close
+              </v-btn>
+              <v-btn color="primary" text :loading="true"> Download </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </div>
+    </v-row>
+  </v-col>
 </template>
 
 <script>
@@ -88,9 +95,10 @@ export default {
     async download() {
       this.$gtag.event("donation-popup-clicked", {
         event_category: "donation",
-        event_label: "paypal-clicked",
+        event_label: "popup-clicked",
         value: "1",
       });
+
       let canvas = html2canvas(this.results.$el, {
         scrollX: 0,
         scrollY: -window.scrollY,
@@ -99,18 +107,37 @@ export default {
         .slice(0, 2)
         .map((person) => person.name)
         .join("-");
-      let timeout = new Promise((res) => setTimeout(() => res(), 20000));
-      timeout.then(() => {
-        canvas.then((canvas) => {
-          downloadBase64File(
-            canvas.toDataURL(),
-            "whatsanlazye-results-" + names + ".png"
-          );
-        });
+      canvas.then((canvas) => {
+        downloadBase64File(
+          canvas.toDataURL(),
+          "whatsanlazye-results-" + names + ".png"
+        );
+      });
+    },
+    paypalButtonPressed() {
+      this.$gtag.event("donation-popup-clicked", {
+        event_category: "donation",
+        event_label: "paypal-clicked",
+        value: "1",
       });
     },
   },
 };
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.cta {
+  text-align: center;
+  background: $c-white;
+  padding: 2em;
+}
+.link {
+  border: none;
+  /*optional*/
+  font-family: arial, sans-serif;
+  /*input has OS specific font-family*/
+  color: #069;
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>