From 668fd58af37318c2cdbbe0f324821280ea3efcc6 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 1 Oct 2021 22:43:09 +0800
Subject: [PATCH] Fix: Slightly improve validity styling

---
 src/components/CertificateInfo.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/CertificateInfo.vue b/src/components/CertificateInfo.vue
index 0b23c952..bb10f158 100644
--- a/src/components/CertificateInfo.vue
+++ b/src/components/CertificateInfo.vue
@@ -2,8 +2,18 @@
     <div>
         <h4>{{ $t("Certificate Info") }}</h4>
         {{ $t("Certificate Chain") }}:
-        <div v-if="valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-success text-white">{{ $t("Valid") }}</div>
-        <div v-if="!valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-danger text-white">{{ $t("Invalid") }}</div>
+        <div
+            v-if="valid"
+            class="rounded d-inline-flex ms-2 text-white tag-valid"
+        >
+            {{ $t("Valid") }}
+        </div>
+        <div
+            v-if="!valid"
+            class="rounded d-inline-flex ms-2 text-white tag-invalid"
+        >
+            {{ $t("Invalid") }}
+        </div>
         <certificate-info-row :cert="certInfo" />
     </div>
 </template>
@@ -27,4 +37,16 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.tag-valid {
+    padding: 2px 25px;
+    background-color: $primary;
+}
+
+.tag-invalid {
+    padding: 2px 25px;
+    background-color: $danger;
+}
+</style>