Add donate page

packages/app/src/pages/Donate.vue

@@ -0,0 +1,67 @@
+<template>
+  <q-page padding>
+    <div class="column items-center">
+      <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VEAGAZP7DHJNE&source=url">
+        <button class="donation-button" >
+          <img class="donation-icon" src="../statics/icons/paypal-28x28.png" />
+          Donate via Paypal
+        </button>
+      </a>
+      <a target="_blank" href="https://opencollective.com/grey-software">
+        <button class="donation-button" >
+          <img class="donation-icon" src="../statics/icons/opencollective-28x28.png" />
+          Support via OpenCollective
+        </button>
+      </a>
+      <a target="_blank" href="https://github.com/sponsors/grey-software">
+        <button class="donation-button" >
+          <img class="donation-icon" src="../statics/icons/github-28x28.png" />
+          Sponsor on GitHub
+        </button>
+      </a>
+      <router-link to='/'>
+        <button class="donation-button" >
+          Exit
+        </button>
+      </router-link>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  // name: 'PageName',
+}
+</script>
+
+<style>
+.donation-icon {
+  margin-right: 8px;
+}
+
+.donation-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;
+}
+
+.donation-button:hover {
+  cursor: pointer;
+  border: 1px solid #1ba0de;
+}
+
+.donation-button:active {
+  cursor: pointer;
+  border: 1px solid #1ba0de;
+  color: white;
+  background-color: #003084;
+}
+</style>

packages/app/src/pages/HomePage.vue

@@ -2,12 +2,14 @@
   <q-page class="mobile-container">
     <div class="config-header" />
     <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="column items-center config-header-label">
+        <span>Hello there!</span>
+        <router-link
+          style="q-mt-lg"
+          to="/donate"
+        >
+          <action-button label="Donate" icon="favorite"/>
+        </router-link>
       </div>
       <div class="config-customize-practice row justify-center">
         <customize-practice-card />
@@ -55,10 +57,9 @@ export default {
 .config-header-label {
   color: white;
   font-size: 32px;
-  left: 36px;
   font-family: "Montserrat", sans-serif;
-  top: 24px;
   z-index: 1;
+  top: 24px;
   position: relative;
 }
 
@@ -83,34 +84,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>

packages/app/src/router/routes.ts

@@ -8,7 +8,7 @@ const routes: RouteConfig[] = [
       { path: '', component: () => import('pages/HomePage.vue') },
       { path: 'practice', component: () => import('pages/PracticePage.vue') },
       { path: 'customize', component: () => import('pages/CustomizePracticePage.vue') },
-
+      { path: 'donate', component: () => import('pages/Donate.vue') },
     ]
   }
 ];