From ab772ef35533b833900d97d86315c25e3eee8642 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 27 May 2024 16:28:32 -0400
Subject: [PATCH] FOUR-16235:Implement the new UI counters

---
 src/components/renderer/form-list-table.vue | 23 ++++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index a0311c395..987a78929 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -2,14 +2,10 @@
   <div class="card" :style="customStyle">
     <div class="card-header d-flex justify-content-between align-items-center">
       <template v-if="dataControl.showControl">
-        <div class="mb-1 mt-1">
-          <b-avatar
-            v-if="dataControl.showAvatar"
-            size="2em"
-            :variant="dataControl.variant"
-            :text="dataControl.count"
-            class="avatar-text"
-          ></b-avatar>
+        <div class="head-filter">
+          <b-badge class="badge-custom" pill :variant="dataControl.variant">
+            {{ dataControl.count }}
+          </b-badge>
           <p class="control-text mb-0" :style="dataControl.colorText">
             {{ $t(title) }}
           </p>
@@ -409,4 +405,15 @@ export default {
 .dropdown-item {
   padding: 10px 8px;
 }
+.head-filter {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.badge {
+  display: inline-flex;
+  padding: 8px;
+  height: 24px;
+  align-items: center;
+}
 </style>