From 6c930deefee42365b256e558f7d3cdaa43b88aee Mon Sep 17 00:00:00 2001
From: Leslie Tilton <23057410+Banrion@users.noreply.github.com>
Date: Thu, 17 Apr 2025 09:08:39 -0500
Subject: [PATCH] Migrate bootstrap styling to use tailwind while keeping the
 same styling (#14203)

---
 .../pages/breach-report.component.html        | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/app/tools/reports/pages/breach-report.component.html b/apps/web/src/app/tools/reports/pages/breach-report.component.html
index fcfd37fef3f..d645fa39d69 100644
--- a/apps/web/src/app/tools/reports/pages/breach-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/breach-report.component.html
@@ -7,7 +7,7 @@
       <bit-label>{{ "username" | i18n }}</bit-label>
       <input id="username" type="text" formControlName="username" bitInput />
     </bit-form-field>
-    <small class="form-text text-muted tw-mb-4">{{ "breachCheckUsernameEmail" | i18n }}</small>
+    <small class="tw-mb-4 tw-block tw-text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
     <button type="submit" buttonType="primary" bitButton [loading]="loading">
       {{ "checkBreaches" | i18n }}
     </button>
@@ -21,32 +21,33 @@
       <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
         {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
       </bit-callout>
-      <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
-        <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
-          <div class="row">
-            <div class="col-2 tw-text-center">
-              <img [src]="a.logoPath" alt="" class="img-fluid" />
-            </div>
-            <div class="col-7">
-              <h3 class="tw-text-lg">{{ a.title }}</h3>
-              <p [innerHTML]="a.description"></p>
-              <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
-              <ul>
-                <li *ngFor="let d of a.dataClasses">{{ d }}</li>
-              </ul>
-            </div>
-            <div class="col-3">
-              <dl>
-                <dt>{{ "website" | i18n }}</dt>
-                <dd>{{ a.domain }}</dd>
-                <dt>{{ "affectedUsers" | i18n }}</dt>
-                <dd>{{ a.pwnCount | number }}</dd>
-                <dt>{{ "breachOccurred" | i18n }}</dt>
-                <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
-                <dt>{{ "breachReported" | i18n }}</dt>
-                <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
-              </dl>
-            </div>
+      <ul
+        class="tw-list-none tw-flex-col tw-divide-x-0 tw-divide-y tw-divide-solid tw-divide-secondary-300 tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-p-0"
+        *ngIf="breachedAccounts.length"
+      >
+        <li *ngFor="let a of breachedAccounts" class="tw-flex tw-gap-4 tw-p-4">
+          <div class="tw-w-32 tw-flex-none">
+            <img [src]="a.logoPath" alt="" class="tw-max-w-32 tw-items-stretch" />
+          </div>
+          <div class="tw-flex-auto">
+            <h3 class="tw-text-lg">{{ a.title }}</h3>
+            <p [innerHTML]="a.description"></p>
+            <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
+            <ul>
+              <li *ngFor="let d of a.dataClasses">{{ d }}</li>
+            </ul>
+          </div>
+          <div class="tw-w-48 tw-flex-none">
+            <dl>
+              <dt>{{ "website" | i18n }}</dt>
+              <dd>{{ a.domain }}</dd>
+              <dt>{{ "affectedUsers" | i18n }}</dt>
+              <dd>{{ a.pwnCount | number }}</dd>
+              <dt>{{ "breachOccurred" | i18n }}</dt>
+              <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
+              <dt>{{ "breachReported" | i18n }}</dt>
+              <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
+            </dl>
           </div>
         </li>
       </ul>