feat(ui): support box

Enubia · Mar 13, 2024 · 78208e1 · 78208e1
1 parent c595f2b
commit 78208e1
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -40,6 +40,7 @@
     "search.exclude": {
         "**/node_modules": true,
         "**/dist-electron": true,
-        "**/release": true
+        "**/release": true,
+        "**/.pnpm-store": true
     }
 }
diff --git a/changelog-template.hbs b/changelog-template.hbs
@@ -2,11 +2,11 @@
     Like the app? Consider supporting me via PayPal or buying me a coffee!
 </p>
 <p align="center">
-    <a href="https://www.buymeacoffee.com/enubia" target="_blank">
+    <a href="https://www.buymeacoffee.com/enubia">
         <img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee"
             width="200">
     </a>
-    <a href="https://www.paypal.com/donate/?hosted_button_id=RQFDVMBP397KG">
+    <a href="https://www.paypal.com/donate/?hosted_button_id=JMYLMVGSKXXEW">
         <img src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
             alt="Donate with PayPal" width="145" />
     </a>

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -44,6 +44,26 @@
     }
 }
 
+.ghost {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    color: var(--pico-primary);
+    cursor: pointer;
+    font-size: 12pt;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    text-decoration: underline;
+
+    &:hover {
+        color: var(--pico-primary-hover);
+    }
+}
+
+.d-none {
+    display: none;
+}
+
 .text-center {
     text-align: center;
 }
@@ -208,6 +228,29 @@ body {
                         text-decoration: underline;
                     }
                 }
+
+                #donate {
+                    article {
+                        position: absolute;
+                        top: 0;
+                        left: 50%;
+                        transform: translate(-50%, 15%);
+
+                        #close {
+                            display: flex;
+                            justify-content: end;
+
+                            button {
+                                width: inherit;
+                            }
+                        }
+
+                        img {
+                            margin: 2px 0;
+                            height: 35px;
+                        }
+                    }
+                }
             }
 
             #changelog {

diff --git a/src/components/fontAwesome.ts b/src/components/fontAwesome.ts
@@ -17,14 +17,16 @@ import {
 } from '@fortawesome/free-regular-svg-icons';
 
 library.add(
+    faBars,
     faChevronLeft,
     faDownLeftAndUpRightToCenter,
-    faXmark,
     faGhost,
-    faBars,
     faTimes,
     faTrashAlt,
+    faXmark,
+    // -------------- Brand Icons --------------
     faPaypal,
+    // -------------- Regular Icons --------------
     faCheckCircle,
     faFloppyDisk,
 );
diff --git a/src/pages/start.vue b/src/pages/start.vue
@@ -10,6 +10,10 @@ defineEmits<{ (event: 'channel', channel: string): void; (event: 'source', sourc
 const { t } = useI18n();
 
 const showTwitchInput = ref(true);
+
+function closeSupport() {
+    document.querySelector('#donate')?.classList.add('d-none');
+}
 </script>
 
 <template>
@@ -45,6 +49,33 @@ const showTwitchInput = ref(true);
                     {{ t('start.external.sourceSwitcher') }}
                 </small>
             </div>
+            <div id="donate" class="center-elements">
+                <article>
+                    <div id="close">
+                        <button class="ghost" @click="closeSupport">
+                            <font-awesome-icon icon="fas fa-xmark" />
+                        </button>
+                    </div>
+                    <small class="center-elements text-center">
+                        Like the app?
+                        <br>
+                        Consider supporting the development!
+                    </small>
+                    <div id="paypal" class="center-elements">
+                        <a href="https://www.paypal.com/donate/?hosted_button_id=JMYLMVGSKXXEW">
+                            <img
+                                src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
+                                alt="Donate with PayPal"
+                            >
+                        </a>
+                    </div>
+                    <div id="buymeacoffee" class="center-elements">
+                        <a href="https://www.buymeacoffee.com/enubia">
+                            <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=enubia&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff">
+                        </a>
+                    </div>
+                </article>
+            </div>
         </div>
     </div>
 </template>