feat(overview): add link to the Konnect screenshot (#72)

Kong · Sep 8, 2023 · 7fe9172 · 7fe9172
1 parent 62dd4a3
commit 7fe9172
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/components/KonnectCTA.vue b/src/components/KonnectCTA.vue
@@ -47,7 +47,19 @@
             </span>
           </div>
         </div>
-        <div class="konnect-image" />
+        <a
+          :href="link"
+          rel="noopener"
+          target="_blank"
+          class="konnect-preview"
+        >
+          <img
+            class="konnect-preview-screenshot"
+            src="@/assets/konnect-preview.png?external"
+            alt="konnect-preview"
+          >
+          <span class="konnect-preview-start">{{ t('konnect-cta.get.started') }}</span>
+        </a>
       </div>
     </template>
   </KCard>
@@ -162,11 +174,17 @@ const link = 'https://konghq.com/products/kong-konnect/register?utm_medium=produ
     opacity: 0.5;
   }
 
-  .konnect-image {
-    background-size: cover;
-    background-image: url("@/assets/konnect-preview.png?external");
-    width: 570px;
-    border-radius: 10px;
+  .konnect-preview {
+    overflow: hidden;
+
+    .konnect-preview-screenshot {
+      width: 570px;
+    }
+
+    .konnect-preview-start {
+      // this element is only for screen readers
+      display: none;
+    }
   }
 }
 </style>
diff --git a/src/pages/overview/Overview.vue b/src/pages/overview/Overview.vue
@@ -13,7 +13,12 @@
             class="info-item"
           >
             <label>{{ item.label }}</label>
-            <span>{{ item.value }}</span>
+            <KBadge
+              max-width="300px"
+              :truncation-tooltip="(item.value as string)"
+            >
+              {{ item.value }}
+            </KBadge>
           </li>
         </ul>
       </template>
@@ -215,15 +220,6 @@ $card-spacing: 32px;
     font-weight: bold;
     margin: 0;
   }
-
-  span {
-    color: $kui-color-text-primary-stronger;
-    font-size: 14px;
-    margin: 0;
-    background-color: $kui-color-background-primary-weakest;
-    padding: 4px 12px;
-    border-radius: 20px;
-  }
 }
 
 .resource-card {