From c96a66b53f3df79d06b7608d696256f700ee0319 Mon Sep 17 00:00:00 2001
From: Mick Letofsky <mletofsky@bitwarden.com>
Date: Thu, 25 Sep 2025 17:23:05 +0200
Subject: [PATCH] [PM-21815] Implement component form the component library &
 Tailwind CSS (#16491)

---
 .../remove-password.component.html            | 100 +++++++++---------
 1 file changed, 49 insertions(+), 51 deletions(-)

diff --git a/apps/browser/src/key-management/key-connector/remove-password.component.html b/apps/browser/src/key-management/key-connector/remove-password.component.html
index 56baf0de2a0..427065e83f3 100644
--- a/apps/browser/src/key-management/key-connector/remove-password.component.html
+++ b/apps/browser/src/key-management/key-connector/remove-password.component.html
@@ -1,53 +1,51 @@
-<header>
-  <div class="left"></div>
-  <div class="center">
-    <span class="title">{{ "removeMasterPassword" | i18n }}</span>
-  </div>
-  <div class="right"></div>
-</header>
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'removeMasterPassword' | i18n }}">
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
 
-<main tabindex="-1">
-  <div class="box">
-    <div class="box-content" *ngIf="loading">
-      <div class="box-content-row">
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      </div>
+  @if (loading) {
+    <div class="tw-text-center">
+      <i
+        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </div>
-    <div class="box-content" *ngIf="!loading">
-      <div class="box-content-row" appBoxRow>
-        <p>{{ "removeMasterPasswordForOrganizationUserKeyConnector" | i18n }}</p>
-        <p class="tw-mb-0">{{ "organizationName" | i18n }}:</p>
-        <p class="tw-text-muted tw-mb-6">{{ organization.name }}</p>
-        <p class="tw-mb-0">{{ "keyConnectorDomain" | i18n }}:</p>
-        <p class="tw-text-muted tw-mb-6">{{ organization.keyConnectorUrl }}</p>
-      </div>
-      <div class="box-content-row">
-        <button type="button" class="btn block primary" (click)="convert()" [disabled]="action">
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-            *ngIf="continuing"
-          ></i>
-          {{ "removeMasterPassword" | i18n }}
-        </button>
-      </div>
-      <div class="box-content-row">
-        <button
-          type="button"
-          class="btn btn-outline-secondary block"
-          (click)="leave()"
-          [disabled]="action"
-        >
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-            *ngIf="leaving"
-          ></i>
-          {{ "leaveOrganization" | i18n }}
-        </button>
-      </div>
-    </div>
-  </div>
-</main>
+  } @else {
+    <p>{{ "removeMasterPasswordForOrganizationUserKeyConnector" | i18n }}</p>
+    <p class="tw-mb-0">{{ "organizationName" | i18n }}:</p>
+    <p class="tw-text-muted tw-mb-6">{{ organization.name }}</p>
+    <p class="tw-mb-0">{{ "keyConnectorDomain" | i18n }}:</p>
+    <p class="tw-text-muted tw-mb-6">{{ organization.keyConnectorUrl }}</p>
+    <button
+      type="button"
+      bitButton
+      buttonType="primary"
+      block
+      (click)="convert()"
+      [disabled]="action"
+      class="tw-mb-2"
+    >
+      <i
+        class="bwi bwi-spinner bwi-spin"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+        *ngIf="continuing"
+      ></i>
+      {{ "removeMasterPassword" | i18n }}
+    </button>
+
+    <button type="button" bitButton block (click)="leave()" [disabled]="action">
+      <i
+        class="bwi bwi-spinner bwi-spin"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+        *ngIf="leaving"
+      ></i>
+      {{ "leaveOrganization" | i18n }}
+    </button>
+  }
+</popup-page>