From 7d1690d5a45435ea9f66f0e80340dd06e7418e4d Mon Sep 17 00:00:00 2001
From: Toni <2703233+toniengelhardt@users.noreply.github.com>
Date: Tue, 14 Feb 2023 15:49:12 +0000
Subject: [PATCH] fix: add missing share logic

---
 components/app/Footer.vue | 21 ++++++++++++++++++++-
 pages/apis/[id].vue       |  6 +++---
 pages/info.vue            |  2 +-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index f85be1e..f57f23f 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -1,7 +1,22 @@
 <script setup lang="ts">
+const config = useRuntimeConfig()
+
 const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses')
 
 const shareAvailable = computed(() => !!webApiStatuses.value?.['web-share-api'])
+
+async function share() {
+  try {
+    await navigator.share({
+      title: 'WebAPI check',
+      text: 'Simply open this page to test which WebAPIs that are supported on your device.',
+      url: config.public.siteUrl,
+    })
+    useTrackEvent('Share successful')
+  } catch (err: any) {
+    useTrackEvent('Share error', { props: { error: err?.message || 'N/A' } })
+  }
+}
 </script>
 
 <template>
@@ -25,7 +40,11 @@ const shareAvailable = computed(() => !!webApiStatuses.value?.['web-share-api'])
       <Icon name="email" />
       <span>Feedback</span>
     </NuxtLink>
-    <div v-if="shareAvailable" class="footer-item footer-action">
+    <div
+      v-if="shareAvailable"
+      class="footer-item footer-action"
+      @click="share()"
+    >
       <Icon name="share" />
       <span>Share</span>
     </div>
diff --git a/pages/apis/[id].vue b/pages/apis/[id].vue
index 30b5a73..280483f 100644
--- a/pages/apis/[id].vue
+++ b/pages/apis/[id].vue
@@ -138,17 +138,17 @@ h1 {
   @apply flex items-center;
   &.available {
     .status-icon {
-      @apply text-lime-600 border-lime-600 dark:(text-lime-300 border-lime-300);
+      @apply text-lime-600 bg-lime-100 border-lime-600 dark:(text-lime-300 bg-lime-500/20 border-lime-300);
     }
   }
   &.experimental {
     .status-icon {
-      @apply text-purple-700 border-purple-700 dark:(text-purple-300 border-purple-300);
+      @apply text-purple-700 bg-purple-100 border-purple-700 dark:(text-purple-300 bg-purple-500/20 border-purple-300);
     }
   }
   &.unavailable {
     .status-icon {
-      @apply text-rose-500 border-rose-500;
+      @apply text-rose-600 bg-rose-100 border-rose-600 dark:(text-rose-500 bg-rose-500/20 border-rose-500);
     }
   }
   .status-icon {
diff --git a/pages/info.vue b/pages/info.vue
index e6b16cf..e3f6900 100644
--- a/pages/info.vue
+++ b/pages/info.vue
@@ -266,7 +266,7 @@ useSeoMeta({
             <p class="mb-6 text-xl text-dim font-bold">
               Resources
             </p>
-            <ul class="p-0 md:list-disc-inside">
+            <ul class="pl-4 md:pl-0.5 md:list-disc-inside">
               <li>
                 <NuxtLink
                   to="https://developer.mozilla.org"