0.0.83-alpha

koiyakiya · Jul 23, 2024 · e710c8d · e710c8d
1 parent be722dd
commit e710c8d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "test": "exit 0"
   },
   "name": "vite-coffee",
-  "version": "0.0.82-alpha",
+  "version": "0.0.83-alpha",
   "type": "module",
   "dependencies": {
     "vue": "^3.4.33"

diff --git a/src/components/Kofi.vue b/src/components/Kofi.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="kofi-button-wrapper">
-      <a :href="kofiURL" target="_blank" class="kofi-button">
-        <span class="kofi-icon">♥</span>
-        <span class="kofi-text">Support me on Ko-fi</span>
+      <a :href="kofiURL" target="_blank" class="kofi-button" :style="buttonStyle">
+        <img class="kofi-icon" src="../assets/kofilogo.png" :style="iconStyle" />
+        <span class="kofi-text" :style="textStyle">Support me on Ko-fi</span>
       </a>
     </div>
   </template>
@@ -18,36 +18,38 @@
       kofiURL() {
         return `https://ko-fi.com/${this.username}`;
       },
+      buttonStyle() {
+        return {
+          display: 'inline-flex',
+          alignItems: 'center',
+          backgroundColor: '#13233F',
+          color: 'white',
+          padding: '2px 12px',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          fontFamily: '"Helvetica", "Arial", sans-serif',
+          fontSize: '13px',
+          fontWeight: '400',
+          lineHeight: '24px',
+        };
+      },
+      iconStyle() {
+        return {
+          width: '35px',
+          height: '35px',
+          marginRight: '8px',
+        };
+      },
+      textStyle() {
+        return {
+          color: 'white',
+        };
+      },
     },
   });
   </script>
 
   <style scoped>
-
-  .kofi-button {
-        display: 'inline-flex';
-        align-items: 'center';
-        background-color: '#13233F';
-        color: 'white';
-        padding: '2px 12px';
-        border-radius: '4px';
-        text-decoration: 'none';
-        font-family: '"Helvetica", "Arial", sans-serif';
-        font-size: '13px';
-        font-weight: '400';
-        line-height: '24px';
-  }
-
-  .kofi-icon {
-    font-size: 16px;
-    margin-right: 8px;
-    color: '#FF5E5B';
-  }
-
-  .kofi-text {
-    color: white;
-  }
-
   .kofi-button-wrapper :deep(.kofi-button) {
     all: initial;
     * {