From 1587f84a5cca7eb0c00b00adc7226c2cf12791c2 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Fri, 21 Feb 2025 14:52:01 +0100
Subject: [PATCH] [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.
---
 .../src/app/tools/send/send.component.html    | 11 ++-
 .../components/vault-filter.component.html    | 13 ++--
 apps/web/src/scss/vault-filters.scss          | 77 +++++++------------
 3 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/apps/web/src/app/tools/send/send.component.html b/apps/web/src/app/tools/send/send.component.html
index 5a88f45cdc6..7aab50b33e5 100644
--- a/apps/web/src/app/tools/send/send.component.html
+++ b/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="card vault-filters">
-      <div class="card-header d-flex">
+  <div class="tw-col-span-3">
+    <div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
+      <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"
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
index 8380f96840e..3ac5e708e8c 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
+++ b/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="container loading-spinner" *ngIf="!isLoaded">
+<div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
+  <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"
diff --git a/apps/web/src/scss/vault-filters.scss b/apps/web/src/scss/vault-filters.scss
index 27b4b8164f9..7133c469284 100644
--- a/apps/web/src/scss/vault-filters.scss
+++ b/apps/web/src/scss/vault-filters.scss
@@ -147,62 +147,37 @@
   }
 }
 
-.groupings {
-  .card {
-    #search {
-      margin-bottom: 1rem;
+.filter {
+  ul:last-child {
+    margin-bottom: 0;
+  }
+
+  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");
-        border-color: themed("inputBorderColor");
-        color: themed("inputTextColor");
-      }
-
-      &::placeholder {
-        @include themify($themes) {
-          color: themed("inputPlaceholderColor");
-        }
+        color: themed("linkColor");
       }
     }
 
-    h3 {
-      font-weight: normal;
+    > .bwi,
+    > div > .bwi {
       @include themify($themes) {
-        color: themed("textMuted");
-      }
-    }
-
-    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");
-        }
+        color: themed("linkColor");
       }
     }
   }