Add donate dialog

src/components/DonationDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <q-dialog v-model="donateDialogOpen">
+      <q-card id="donation-card">
+        <q-card-section>
+          <h6 class="q-my-md">Thank you for donating! 💕</h6>
+          <p>This app was developed by Grey Software, a not-for-profit organization that empowers students to build open-source software for their communities and societies.</p>
+          <p class="q-my-sm">You can support us as we envision and build the software ecosystem of the future by sponsoring us below.</p>
+        </q-card-section>
+        <q-separator/>
+        <q-card-section>
+          <q-card-actions vertical>
+            <q-btn
+              rounded
+              class="q-pa-xs q-ma-sm"
+              icon="img:/icons/paypal-28x28.png"
+              label="Donate via Paypal"
+              type="a"
+              href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VEAGAZP7DHJNE&source=url"
+              target="_blank"
+              align="left"
+            />
+            <q-btn
+              rounded
+              class="q-pa-xs q-ma-sm"
+              icon="img:/icons/opencollective-28x28.png"
+              label="Back on OpenCollective"
+              type="a"
+              href="https://opencollective.com/grey-software"
+              target="_blank"
+              align="left"
+            />
+            <q-btn
+              rounded
+              class="q-pa-xs q-ma-sm"
+              icon="img:/icons/github-28x28.png"
+              label="Sponsor on GitHub"
+              type="a"
+              href="https://github.com/sponsors/grey-software"
+              target="_blank"
+              align="left"
+            />
+          </q-card-actions>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+    <q-btn
+      rounded
+      icon="mdi-charity"
+      label="Donate"
+      @click="open"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+interface Dialog {
+  donateDialogOpen: boolean
+  open(): void
+}
+
+export default {
+  name: 'donation-dialog',
+  data () {
+    return {
+      donateDialogOpen: false,
+    } as Dialog
+  },
+  methods: {
+    open (this: Dialog) {
+      this.donateDialogOpen = true
+    },
+  },
+}
+</script>
+
+<style>
+#donation-card {
+  width: 100%;
+  max-width: 350px;
+}
+
+.donation-icon {
+  margin-right: 8px;
+}
+</style>

src/pages/HomePage.vue

@@ -1,24 +1,18 @@
 <template>
   <q-page class="mobile-container">
-    <div class="config-header" />
+    <div class="home-bubble" />
     <div class="column full-viewport-height q-pb-lg">
-      <div class="row config-header-label">
-        <span class="q-mr-lg">Hello there!</span>
-        <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VEAGAZP7DHJNE&source=url"><button class="paypal-button" ><img
-            class="paypal-icon"
-            src="https://assets.codepen.io/853141/paypal.png"
-          />Donate</button></a>
+      <div class="home-header row items-center justify-between">
+        <span class="config-header-label">Hello there!</span>
+        <donation-dialog />
       </div>
       <div class="config-customize-practice row justify-center">
         <customize-practice-card />
       </div>
       <concept-picker />
       <q-space />
       <div class="row justify-center">
-        <router-link
-          style="q-mt-lg"
-          to="/practice"
-        >
+        <router-link style="q-mt-lg" to="/practice">
           <action-button label="Play" icon="mdi-play-circle-outline" />
         </router-link>
       </div>
@@ -30,19 +24,21 @@
 import ConceptPicker from "../components/ConceptPicker.vue";
 import CustomizePracticeCard from "../components/CustomizePracticeCard.vue";
 import ActionButton from "../components/ActionButton.vue";
+import DonationDialog from "../components/DonationDialog.vue";
 import { Operator } from "../engine/math_questions/expression/models";
 
 export default {
   components: {
     ConceptPicker,
     ActionButton,
     CustomizePracticeCard,
+    DonationDialog,
   },
 };
 </script>
 
 <style>
-.config-header {
+.home-bubble {
   width: 140%;
   height: 384px;
   background: linear-gradient(0deg, #2f80ed, #2f80ed), #2f80ed;
@@ -52,18 +48,19 @@ export default {
   margin-left: -20%;
 }
 
-.config-header-label {
+.home-header {
+  padding: 6% 8% 0 8%;
   color: white;
+}
+
+.config-header-label {
   font-size: 32px;
-  left: 36px;
   font-family: "Montserrat", sans-serif;
-  top: 24px;
   z-index: 1;
-  position: relative;
 }
 
 .config-customize-practice {
-  margin-top: 42px;
+  margin-top: 32px;
   z-index: 1;
 }
 
@@ -83,34 +80,4 @@ export default {
     justify-content: space-between;
   }
 }
-.paypal-icon {
-  height: 28px;
-  margin-right: 8px;
-}
-
-.paypal-button {
-  border-radius: 24px;
-  height: 48px;
-  border: 1px solid #003084;
-  outline: none;
-  display: flex;
-  align-items: center;
-  padding: 2px 20px;
-  color: #003084;
-  font-size: 20px;
-  background-color: white;
-  transition: all 0.3s ease-out;
-}
-
-.paypal-button:hover {
-  cursor: pointer;
-  border: 1px solid #1ba0de;
-}
-
-.paypal-button:active {
-  cursor: pointer;
-  border: 1px solid #1ba0de;
-  color: white;
-  background-color: #003084;
-}
 </style>