computed + disabled btn style, dnwld as image btn

.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
     ],
     // TODO Unimportant: find a way to set variables to false, but allow variable funcitons in vue script
     "no-use-before-define": ["error", { "functions": false, "classes": true, "variables": false }],
+    "no-else-return": ["error", {"allowElseIf": true}],
   },
   overrides: [
     //

src/components/WiFiCard.vue

@@ -44,13 +44,25 @@
       <p class="mt-1">
         <span class="mr-1">📱 📷 </span>
         {{ $t("wifiCard.description") }}
-        </p>
+      </p>
 
     </div>
 
-    <v-button @click="printWiFiCard">
-      {{ $t("pages.home.printButton") }}
-    </v-button>
+    <div class="flex flex-row">
+
+      <div class="flex flex-col">
+        <v-button disabled textStyle class="mr-3">
+          {{ $t("wifiCard.downloadImageButton") }}
+        </v-button>
+        <div class="text-sm text-gray-500 italic">
+          {{ $t("wifiCard.comingSoon") }}!
+        </div>
+      </div>
+
+      <v-button @click="printWiFiCard">
+        {{ $t("wifiCard.printButton") }}
+      </v-button>
+    </div>
 
   </div>
 </template>

src/components/base/v-Button.vue

@@ -9,11 +9,7 @@
       :target="component === 'a' ? '_blank' : null"
       @click.stop="onClick"
       class="py-2 inline-block"
-      :class="[
-        textStyle
-          ? 'hover:text-green-700 hover:bg-gray-50 rounded-md border border-current px-3'
-          : 'rounded-md bg-green-500 text-white hover:bg-green-700 hover:text-gray-50 px-3'
-      ]"
+      :class="styleClasses"
     >
       <slot />
     </component>
@@ -57,12 +53,33 @@ export default defineComponent({
     });
 
     const href = computed(() => props.to || props.hrefLink);
+    
+
+    const styleClasses = computed(() => {
+      const defaultStyles = 'px-3 border border-current rounded-md';
+      const defaultStyleDisabled = 'cursor-not-allowed';
+      const primaryStyle = 'bg-green-500 text-white hover:bg-green-700 hover:text-gray-50';
+      const primarySytleDisabled = 'bg-gray-500 text-white hover:bg-gray-400 hover:text-gray-50';
+      const textStyle = 'hover:text-green-700 hover:bg-gray-50';
+      const textStyleDisabled = 'bg-gray-100 text-gray-500 hover:text-gray-300 hover:bg-gray-50';
+
+      if (props.textStyle && props.disabled) {
+        return `${defaultStyles} ${textStyleDisabled} ${defaultStyleDisabled}`;
+      } else if (props.textStyle && !props.disabled) {
+        return `${defaultStyles} ${textStyle}`;
+      } else if (props.disabled) {
+        return `${defaultStyles} ${primarySytleDisabled} ${defaultStyleDisabled}`;
+      }
+      return `${defaultStyles} ${primaryStyle}`;
+    });
 
     const onClick = (event: MouseEvent) => {
       emit('click', event);
     };
 
-    return { component, onClick, href };
+    return {
+      component, onClick, href, styleClasses,
+    };
   },
 
 });

src/plugins/i18n/messages.ts

@@ -19,6 +19,9 @@ const messages = {
       errors: {
         passwordTooShort: 'Password to short. A {type} password needs to have at least {number} characters',
       },
+      printButton: 'Print WiFI Card',
+      downloadImageButton: 'Download WiFi Card as Image',
+      comingSoon: 'Coming soon',
     },
     theFooter: {
       text: 'Developed and designed with 💚 by',
@@ -34,7 +37,6 @@ const messages = {
       home: {
         title: '📡 📶 Share Wifi - The cool way 🚀',
         description: 'Share your WiFi at home with your friends the cool way. No more searching for the passwords. Now you can easily create a qr code that allows everyone to connect to your network. Just scan the qr code with your smartphone and it connects automatically to the network without typing a password(required Android 10 and iOS 11).',
-        printButton: 'Print WiFI Card',
         faq: [
           {
             key: 'Does it works with any phone?',