Donation component

Author: Stigmatoz

src/assets/css/dashboard.css

@@ -275,7 +275,7 @@ label {
   padding: 5px 0 5px 20px;
   font-size: 16px;
   vertical-align: middle;
-  width: 270px;
+  width: 266px;
   height: 40px;
   display: table-cell;
   cursor: pointer;

src/assets/css/general.css

@@ -159,4 +159,10 @@ input[type='button'][disabled] {
 }
 .date-block .date-picker {
   width: 250px;
+}
+.font-bold{
+  font-weight: 600;
+}
+.font-16{
+  font-size: 16px;
 }

src/assets/icons/donation-qr.png

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p class="title">
+      {{ t('enjoy.message') }}
+    </p>
+
+    <p>
+      {{ t('canDonate.message') }}
+    </p>
+
+    <div class="mt-30">
+      <p>{{ t('coin.message') }} <span class="font-bold"> USDT </span></p>
+      <p>{{ t('chain.message') }}<span class="font-bold"> Ethereum (ERC20) </span></p>
+      <p>
+        {{ t('address.message') }}
+        <span class="font-bold"> 0x427a22e1f4ba81351c22465faf6cfcf6095583d1 </span>
+      </p>
+    </div>
+
+    <img class="mt-15" src="../assets/icons/donation-qr.png" />
+
+    <p class="font-bold mt-30">
+      {{ t('thanks.message') }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Donation',
+};
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+</script>
+
+<style scoped>
+p {
+  font-size: 15px;
+}
+.title {
+  font-size: 18px !important;
+}
+</style>

src/components/Donation.vue

@@ -153,6 +153,25 @@
       </div>
     </div>
 
+    <div class="settings-tab">
+      <input
+        type="radio"
+        id="donate-tab"
+        name="settings-group"
+        :checked="selectedTab == SettingsTab.Donate"
+        v-on:change="selectTab(SettingsTab.Donate)"
+      />
+      <label name="tabName" for="donate-tab" class="donate"
+        ><img src="../assets/icons/donate.png" height="30" />{{ t('donate.message') }}</label
+      >
+
+      <div class="settings-content">
+        <div class="main">
+          <Donation v-if="selectedTab == SettingsTab.Donate" />
+        </div>
+      </div>
+    </div>
+
     <PromoCleanYoutubeModal />
   </div>
 </template>
@@ -174,6 +193,7 @@ import { getEnumValueTab } from '../utils/extension-tabs';
 import { applyDarkMode } from '../utils/dark-mode';
 import { injectStorage } from '../storage/inject-storage';
 import { StorageParams, DARK_MODE_DEFAULT } from '../storage/storage-params';
+import Donation from '../components/Donation.vue';
 
 const { t } = useI18n();
 const extensionPage = useExtensionPage();
@@ -233,7 +253,6 @@ function selectTab(value: SettingsTab) {
   font-weight: 600;
   font-size: 15px;
 }
-
 .header-block .logo {
   margin: 10px 10px 10px 15px;
 }
@@ -246,4 +265,8 @@ function selectTab(value: SettingsTab) {
   position: fixed;
   bottom: 20px;
 }
+.donate {
+  position: fixed;
+  bottom: 75px;
+}
 </style>

src/pages/Dashboard.vue

@@ -41,5 +41,7 @@ export function getEnumValueTab(tab: string) {
       return SettingsTab.Notifications;
     case 'pomodoro':
       return SettingsTab.Pomodoro;
+    case 'donation':
+      return SettingsTab.Donate;
   }
 }