Adjust record list footer style

client/web/compose/src/components/Common/RecordToolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container
     fluid
-    :class="{'shadow border-top': !showRecordModal}"
+    :class="{ 'shadow border-top': !showRecordModal }"
     class="bg-white p-3"
   >
     <b-row
@@ -62,7 +62,6 @@
       >
         <template
           v-if="module"
-          class="d-flex wrap-with-vertical-gutters align-items-center"
         >
           <c-input-confirm
             v-if="(isCreated && !settings.hideDelete && !isDeleted)"

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -515,13 +515,14 @@
       #footer
     >
       <b-container
-        ref="footer"
         fluid
         class="m-0 p-2"
-        :class="showingDeletedRecords ? 'bg-warning' : ''"
       >
-        <b-row no-gutters>
-          <b-col class="d-flex justify-content-between align-items-center">
+        <b-row
+          align-v="stretch"
+          no-gutters
+        >
+          <b-col class="d-flex align-items-center justify-content-start">
             <div class="text-truncate">
               <div
                 v-if="options.showTotalCount"
@@ -541,7 +542,12 @@
                 </span>
               </div>
             </div>
+          </b-col>
 
+          <b-col
+            class="d-flex align-items-center justify-content-end"
+            :class="{ 'justify-content-center': options.showDeletedRecordsOption }"
+          >
             <div
               v-if="showPageNavigation"
             >
@@ -612,16 +618,19 @@
                 </b-button>
               </b-button-group>
             </div>
+          </b-col>
 
-            <div v-if="options.showDeletedRecordsOption">
-              <b-button
-                variant="light"
-                class="mx-2 text-nowrap"
-                @click="handleShowDeleted()"
-              >
-                {{ showingDeletedRecords ? $t('recordList.showRecords.existing') : $t('recordList.showRecords.deleted') }}
-              </b-button>
-            </div>
+          <b-col
+            v-if="options.showDeletedRecordsOption"
+            class="d-flex align-items-center justify-content-end"
+          >
+            <b-button
+              variant="outline-light"
+              class="text-primary border-0 text-nowrap"
+              @click="handleShowDeleted()"
+            >
+              {{ showingDeletedRecords ? $t('recordList.showRecords.existing') : $t('recordList.showRecords.deleted') }}
+            </b-button>
           </b-col>
         </b-row>
       </b-container>