19333 - UX tweaks (#2714)

* 19333 - UX tweaks * test fix
bcgov · Feb 8, 2024 · f327dfa · f327dfa
1 parent 75c2eb0
commit f327dfa
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.4.65",
+  "version": "2.4.66",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
@@ -69,6 +69,7 @@ export default defineComponent({
 .card-title {
   background-color: $app-lt-blue;
   justify-content: left;
+  height: 75px;
 }
 
 </style>
diff --git a/auth-web/src/components/pay/eft/ShortNameTransactions.vue b/auth-web/src/components/pay/eft/ShortNameTransactions.vue
@@ -29,6 +29,9 @@
           mdi-format-list-bulleted
         </v-icon>
         {{ paymentsReceived }}
+        <span class="font-weight-regular">
+          ({{ state.totalResults }})
+        </span>
       </h2>
     </template>
     <template #header-filter-slot />
@@ -88,7 +91,7 @@ export default defineComponent({
     })
 
     const paymentsReceived = computed<string>(() => {
-      return `Payments Received from ${props.shortNameDetails.shortName} (${state.totalResults})`
+      return `Payments Received from ${props.shortNameDetails.shortName}`
     })
 
     watch(() => props.shortNameDetails, () => {
@@ -145,11 +148,6 @@ export default defineComponent({
 @import '@/assets/scss/theme.scss';
 @import '@/assets/scss/ShortnameTables.scss';
 
-.card-title {
-  background-color: $app-lt-blue;
-  justify-content: left;
-}
-
 ::v-deep{
   #table-title-cell {
     background-color: $app-lt-blue;
@@ -160,7 +158,8 @@ export default defineComponent({
   }
 
   .base-table__header__title {
-    padding-bottom: 16px
+    padding-bottom: 16px;
+    top: 75px !important; // prevent fixed header sliding when there is a title
   }
 }
 

diff --git a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
@@ -13,7 +13,7 @@
     </div>
 
     <ShortNameTransactions
-      class="mb-4"
+      class="mb-12"
       :shortNameDetails="state.shortNameDetails"
     />
 

diff --git a/auth-web/tests/unit/components/ShortNameTransactions.spec.ts b/auth-web/tests/unit/components/ShortNameTransactions.spec.ts
@@ -100,7 +100,7 @@ describe('ShortNameTransactions.vue', () => {
     await wrapper.setProps({ shortNameDetails: { id: 1, shortName: 'SHORTNAME' } })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.find('#table-title-cell').text()).toContain('Payments Received from SHORTNAME (5)')
+    expect(wrapper.find('#table-title-cell').text()).toContain('Payments Received from SHORTNAME  (5)')
 
     // verify table
     expect(wrapper.findComponent(BaseVDataTable).exists()).toBe(true)