[PM-17494] Minimum effort removal of bootstrap from filters (#12995)

Minimum effort migration of the filters to not depend on bootstrap. This migrates the card to tailwind but keeps most of the custom css as it's not strictly required to be migrated.

apps/web/src/app/tools/send/send.component.html

@@ -22,12 +22,15 @@
   {{ "sendDisabledWarning" | i18n }}
 </bit-callout>
 <div class="tw-grid tw-grid-cols-12 tw-gap-4">
-  <div class="groupings tw-col-span-3">
+  <div class="tw-col-span-3">
-    <div class="card vault-filters">
+    <div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
-      <div class="card-header d-flex">
+      <div
+        class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-semibold tw-uppercase"
+        data-testid="filters-header"
+      >
         {{ "filters" | i18n }}
       </div>
-      <div class="card-body">
+      <div class="tw-p-5" data-testid="filters-body">
         <div class="tw-mb-4">
           <bit-search
             [(ngModel)]="searchText"

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html

@@ -1,12 +1,15 @@
-<div class="card vault-filters">
+<div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
-  <div class="container loading-spinner" *ngIf="!isLoaded">
+  <div class="tw-text-center tw-p-5" *ngIf="!isLoaded">
     <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
   </div>
   <div *ngIf="isLoaded">
-    <div class="card-header d-flex">
+    <div
+      class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-semibold tw-uppercase"
+      data-testid="filters-header"
+    >
       {{ "filters" | i18n }}
       <a
-        class="ml-auto"
+        class="tw-float-right"
         href="https://bitwarden.com/help/searching-vault/"
         target="_blank"
         rel="noreferrer"
@@ -15,7 +18,7 @@
         <i class="bwi bwi-question-circle" aria-hidden="true"></i>
       </a>
     </div>
-    <div class="card-body">
+    <div class="tw-p-5" data-testid="filters-body">
       <div class="tw-mb-4">
         <bit-search
           id="search"

apps/web/src/scss/vault-filters.scss

@@ -147,62 +147,37 @@
   }
 }
 
-.groupings {
+.filter {
-  .card {
+  ul:last-child {
-    #search {
+    margin-bottom: 0;
-      margin-bottom: 1rem;
+  }
+
+  a {
+    @include themify($themes) {
+      color: themed("textHeadingColor");
+    }
+  }
+  .show-active {
+    display: none;
+  }
+  li.active {
+    > .show-active,
+    > div .show-active {
+      display: inline;
+    }
+  }
+  li.active {
+    > button:first-of-type,
+    > div button:first-of-type {
       @include themify($themes) {
-        background-color: themed("inputBackgroundColor");
+        color: themed("linkColor");
-        border-color: themed("inputBorderColor");
-        color: themed("inputTextColor");
-      }
-
-      &::placeholder {
-        @include themify($themes) {
-          color: themed("inputPlaceholderColor");
-        }
       }
     }
 
-    h3 {
+    > .bwi,
-      font-weight: normal;
+    > div > .bwi {
       @include themify($themes) {
-        color: themed("textMuted");
+        color: themed("linkColor");
-      }
-    }
-
-    ul:last-child {
-      margin-bottom: 0;
-    }
-
-    .card-body a {
-      @include themify($themes) {
-        color: themed("textHeadingColor");
-        font-weight: themed("linkWeight");
-      }
-    }
-    .show-active {
-      display: none;
-    }
-    li.active {
-      > .show-active,
-      > div .show-active {
-        display: inline;
-      }
-    }
-    li.active {
-      > button:first-of-type,
-      > div button:first-of-type {
-        @include themify($themes) {
-          color: themed("linkColor");
-        }
-      }
-
-      > .bwi,
-      > div > .bwi {
-        @include themify($themes) {
-          color: themed("linkColor");
-        }
       }
     }
   }