Merged in feature/PMCORE-2566 (pull request #7631)

PMCORE-2566

Approved-by: Rodrigo Quelca

resources/assets/js/components/home/HeaderCounter.vue

@@ -8,17 +8,19 @@
         @click="header.onClick(header)"
         :class="classBtn(header.class)"
       >
-        <div class="v-btn-textm-header">
-          <i :class="header.icon"></i>
-        </div>
-        <div>
-          <span class="v-btn-textb-header">
-            {{ header.counter }}
+        <div class="v-center-header">
+          <div class="v-btn-textm-header">
+            <span class="v-text2">
+              <i :class="header.icon"></i>
+            </span>
+            <span class="v-btn-textb-header float-right">
+              {{ header.counter }}
+            </span>
+          </div>
+          <span class="v-btn-texts-header">
+            {{ header.title }}
           </span>
         </div>
-        <span class="v-btn-texts-header">
-          {{ header.title }}
-        </span>
       </button>
     </div>
   </div>
@@ -43,7 +45,8 @@ export default {
 
 <style>
 .v-btn-textb-header {
-  font-size: 1.5vw;
+  font-size: 1.1vw;
+  padding-top: 5px;
 }
 
 .v-btn-textm-header {
@@ -51,13 +54,27 @@ export default {
 }
 
 .v-btn-texts-header {
-  font-size: 0.8vw;
+  font-size: 1vw;
 }
 .v-btn-header {
-  min-width: 150px;
+  min-width: 200px;
   margin-left: 5px !important;
   margin-right: 5px !important;
-  padding-bottom: 5px !important;
-  padding-top: 5px !important;
+  padding-bottom: 10px !important;
+  padding-top: 10px !important;
+  text-align: center;
+}
+
+.v-center-header {
+  width: fit-content;
+  display: inline-block;
+}
+.v-center {
+  text-align: center;
+}
+
+.v-text2 {
+  font-size: 2vw;
+  float: left;
 }
 </style>