[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.
bitwarden · Feb 21, 2025 · 1587f84 · 1587f84
1 parent 1d04227
commit 1587f84
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 58 deletions.
diff --git 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
@@ -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
@@ -147,62 +147,37 @@
   }
 }
 
-.groupings {
-  .card {
-    #search {
-      margin-bottom: 1rem;
-      @include themify($themes) {
-        background-color: themed("inputBackgroundColor");
-        border-color: themed("inputBorderColor");
-        color: themed("inputTextColor");
-      }
-
-      &::placeholder {
-        @include themify($themes) {
-          color: themed("inputPlaceholderColor");
-        }
-      }
-    }
+.filter {
+  ul:last-child {
+    margin-bottom: 0;
+  }
 
-    h3 {
-      font-weight: normal;
-      @include themify($themes) {
-        color: themed("textMuted");
-      }
+  a {
+    @include themify($themes) {
+      color: themed("textHeadingColor");
     }
-
-    ul:last-child {
-      margin-bottom: 0;
+  }
+  .show-active {
+    display: none;
+  }
+  li.active {
+    > .show-active,
+    > div .show-active {
+      display: inline;
     }
-
-    .card-body a {
+  }
+  li.active {
+    > button:first-of-type,
+    > div button:first-of-type {
       @include themify($themes) {
-        color: themed("textHeadingColor");
-        font-weight: themed("linkWeight");
-      }
-    }
-    .show-active {
-      display: none;
-    }
-    li.active {
-      > .show-active,
-      > div .show-active {
-        display: inline;
+        color: themed("linkColor");
       }
     }
-    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");
-        }
+    > .bwi,
+    > div > .bwi {
+      @include themify($themes) {
+        color: themed("linkColor");
       }
     }
   }