Replace app-callout with bit-callout and fixed the used types forthe styles (#8414)

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

libs/auth/src/angular/user-verification/user-verification-dialog.component.html

@@ -18,12 +18,12 @@
           {{ dialogOptions.bodyText | i18n }}
         </p>
 
-        <app-callout
+        <bit-callout
           *ngIf="dialogOptions.calloutOptions"
           [type]="dialogOptions.calloutOptions.type"
         >
           {{ dialogOptions.calloutOptions.text | i18n }}
-        </app-callout>
+        </bit-callout>
       </ng-container>
 
       <!-- Shown when client side verification methods picked and no verification methods found -->

libs/auth/src/angular/user-verification/user-verification-dialog.component.ts

@@ -12,6 +12,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import {
   AsyncActionsModule,
   ButtonModule,
+  CalloutModule,
   DialogModule,
   DialogService,
 } from "@bitwarden/components";
@@ -34,6 +35,7 @@ import { UserVerificationFormInputComponent } from "./user-verification-form-inp
     DialogModule,
     AsyncActionsModule,
     UserVerificationFormInputComponent,
+    CalloutModule,
   ],
 })
 export class UserVerificationDialogComponent {

libs/auth/src/angular/user-verification/user-verification-dialog.types.ts

@@ -11,9 +11,9 @@ export type UserVerificationCalloutOptions = {
 
   /**
    * The type of the callout.
-   * Can be "warning", "danger", "error", or "tip".
+   * Can be "warning", "danger", "info", or "success".
    */
-  type: "warning" | "danger" | "error" | "tip";
+  type: "warning" | "danger" | "info" | "success";
 };
 
 /**

libs/auth/src/angular/user-verification/user-verification-form-input.component.html

@@ -49,12 +49,12 @@
         </div>
       </div>
 
-      <app-callout type="error" *ngIf="biometricsVerificationFailed">
+      <bit-callout type="danger" *ngIf="biometricsVerificationFailed">
         {{ "couldNotCompleteBiometrics" | i18n }}
         <button bitLink type="button" linkType="primary" (click)="verifyUserViaBiometrics()">
           {{ "tryAgain" | i18n }}
         </button>
-      </app-callout>
+      </bit-callout>
     </ng-container>
 
     <!-- Alternate verification options if user has more than 1 -->

libs/auth/src/angular/user-verification/user-verification-form-input.component.ts

@@ -20,6 +20,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import {
   AsyncActionsModule,
   ButtonModule,
+  CalloutModule,
   FormFieldModule,
   IconButtonModule,
   IconModule,
@@ -62,6 +63,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
     IconModule,
     LinkModule,
     ButtonModule,
+    CalloutModule,
   ],
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil