From 2381d6b3cdb729c01d61be3f4229f5b06cadc89b Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Mon, 31 Mar 2025 11:07:02 -0400
Subject: [PATCH] migrate provider clients component (#14030)

---
 .../providers/clients/clients.component.html  | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
index e6b5ae122f..668d59b883 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
@@ -21,7 +21,7 @@
 
 <ng-container *ngIf="loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
@@ -31,35 +31,31 @@
 <ng-container *ngIf="!loading">
   <p *ngIf="dataSource.data.length < 1">{{ "noClientsInList" | i18n }}</p>
   <ng-container *ngIf="dataSource.data.length >= 1">
-    <bit-table-scroll
-      [dataSource]="dataSource"
-      [rowSize]="53"
-      class="tw-table tw-w-full table-hover table-list"
-    >
+    <bit-table-scroll [dataSource]="dataSource" [rowSize]="53" class="tw-table tw-w-full">
       <ng-container header>
         <th bitCell colspan="2" bitSortable="organizationName">{{ "name" | i18n }}</th>
         <th bitCell bitSortable="seats">{{ "numberOfUsers" | i18n }}</th>
         <th bitCell bitSortable="plan">{{ "billingPlan" | i18n }}</th>
-        <th bitCell></th>
       </ng-container>
       <ng-template bitRowDef let-row>
         <td bitCell width="30">
           <bit-avatar [text]="row.organizationName" [id]="row.id" size="small"></bit-avatar>
         </td>
-        <td bitCell width="325">
+        <td bitCell width="320">
           <a [routerLink]="['/organizations', row.organizationId]">{{ row.organizationName }}</a>
         </td>
-        <td bitCell>
+        <td bitCell width="700">
           <span>{{ row.userCount }}</span>
           <span *ngIf="row.seats != null"> / {{ row.seats }}</span>
         </td>
-        <td bitCell width="150">
+        <td bitCell width="250" class="tw-flex tw-flex-row tw-items-center">
           <span>{{ row.plan }}</span>
-        </td>
-        <td class="table-list-options" *ngIf="manageOrganizations">
-          <div class="dropdown" appListDropdown>
+          <div appListDropdown>
             <button
-              class="btn btn-outline-secondary dropdown-toggle"
+              *ngIf="manageOrganizations"
+              [bitMenuTriggerFor]="removeMenu"
+              bitMenuItem
+              buttonType="secondary"
               type="button"
               data-toggle="dropdown"
               aria-haspopup="true"
@@ -68,12 +64,14 @@
             >
               <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(row)">
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-                {{ "remove" | i18n }}
-              </a>
-            </div>
+            <bit-menu #removeMenu>
+              <button bitMenuItem type="button" appStopClick (click)="remove(row)">
+                <span class="tw-text-danger">
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                  {{ "remove" | i18n }}
+                </span>
+              </button>
+            </bit-menu>
           </div>
         </td>
       </ng-template>