Merge pull request #1556 from bcgov/feature/clos

Small changes for filters
bcgov · May 21, 2024 · ac47c40 · ac47c40
2 parents 7a4b35d + 55cbada
commit ac47c40
Showing 1 changed file with 29 additions and 23 deletions.
diff --git a/frontend/src/components/common/Filters.vue b/frontend/src/components/common/Filters.vue
@@ -1,32 +1,25 @@
 <template>
   <v-card class="filter-card">
     <v-card-title class="sheetHeader pt-1 pb-1">
-      Filters
-    </v-card-title>
-    <v-divider />
-    <v-card-text>
-      <v-row justify="space-between">
-        <v-col cols="4">
-          <a
-            id="close"
-            @click="close()"
-          >Close</a>
+      <v-row no-gutters>
+        <v-col class="d-flex justify-start">
+          Filters
         </v-col>
-        <v-col
-          cols="4"
-          style="text-align: end;"
-        >
-          <PrimaryButton
-            id="clear-filter"
-            secondary
-            large-icon
-            icon="mdi-filter-off-outline"
-            text="Clear"
-            :click-action="clear"
-            class="mt-n1"
+        <v-col class="d-flex justify-end">
+          <v-btn
+            id="cancel"
+            color="white"
+            text="Close"
+            size="30"
+            icon="mdi-close"
+            variant="tonal"
+            @click="close()"
           />
         </v-col>
       </v-row>
+    </v-card-title>
+    <v-divider />
+    <v-card-text>
       <v-row>
         <v-col cols="6">
           <slot
@@ -43,6 +36,19 @@
             />
           </slot>
         </v-col>
+        <v-col
+          class="d-flex justify-end"
+        >
+          <PrimaryButton
+            id="clear-filter"
+            secondary
+            large-icon
+            icon="mdi-filter-off-outline"
+            text="Clear All"
+            :click-action="clear"
+            class="mt-n1"
+          />
+        </v-col>
       </v-row>
       <div
         v-for="(filter, key) in filters"
@@ -252,7 +258,7 @@ export default {
 </script>
 
   <style scoped>
-    .sheetHeader {
+  .sheetHeader {
     background-color: #003366;
     color: white;
     font-size: medium !important;