From 08a5fa81c34ebd44b3f1d5518a9ef8cd6d89c9bb Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sun, 13 Oct 2019 14:43:27 +0530
Subject: [PATCH] status: fix css and display status inline with badge

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/widgets/Status.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index 68369b38c57..3ac8a8678cf 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -3,10 +3,7 @@
     <template slot="title">
       {{ text }}
     </template>
-    <span>
-      <a-badge :title="text" :status="getBadgeStatus(text)" />
-      <span v-if="displayText">{{ text }}</span>
-    </span>
+    <a-badge style="display: inline-flex" :title="text" :status="getBadgeStatus(text)" :text="getText()" />
   </a-tooltip>
 </template>
 
@@ -31,6 +28,12 @@ export default {
     }
   },
   methods: {
+    getText () {
+      if (this.displayText && this.text) {
+        return this.text.charAt(0).toUpperCase() + this.text.slice(1)
+      }
+      return ''
+    },
     getBadgeStatus (state) {
       var status = 'default'
       switch (state) {
@@ -74,6 +77,6 @@ export default {
 /deep/ .ant-badge-status-dot {
   width: 12px;
   height: 12px;
-  margin-top: -3px;
+  margin-top: 5px;
 }
 </style>