[PM-2415] migrate AboutComponent to CL (#6301)

* migrate AboutComponent to CL

apps/browser/src/popup/app.module.ts

@@ -61,7 +61,6 @@ import { PrivateModeWarningComponent } from "./components/private-mode-warning.c
 import { SetPinComponent } from "./components/set-pin.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
 import { ServicesModule } from "./services/services.module";
-import { AboutComponent } from "./settings/about.component";
 import { AutofillComponent } from "./settings/autofill.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { FoldersComponent } from "./settings/folders.component";
@@ -151,7 +150,6 @@ import "../platform/popup/locales";
     ViewCustomFieldsComponent,
     RemovePasswordComponent,
     VaultSelectComponent,
-    AboutComponent,
     HelpAndFeedbackComponent,
     AutofillComponent,
     EnvironmentSelectorComponent,

apps/browser/src/popup/settings/about.component.html

@@ -1,52 +1,46 @@
-<div class="modal fade" role="dialog" aria-modal="true">
-  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-        <p class="text-center">
-          <i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i>
-        </p>
-        <p class="text-center">
-          <b>Bitwarden</b>
-        </p>
-        <p class="text-center">&copy; Bitwarden Inc. 2015-{{ year }}</p>
-        <p class="text-center">{{ "version" | i18n }}: {{ version }}</p>
-        <ng-container *ngIf="serverConfig$ | async as serverConfig">
-          <p class="text-center" *ngIf="isCloud">
-            {{ "serverVersion" | i18n }}: {{ this.serverConfig?.version }}
+<bit-simple-dialog>
+  <div bitDialogIcon>
+    <i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i>
+  </div>
+  <div bitDialogTitle>Bitwarden</div>
+  <div bitDialogContent>
+    <p>&copy; Bitwarden Inc. 2015-{{ year }}</p>
+    <p>{{ "version" | i18n }}: {{ version }}</p>
+    <ng-container *ngIf="serverConfig$ | async as serverConfig">
+      <p *ngIf="isCloud">
+        {{ "serverVersion" | i18n }}: {{ this.serverConfig?.version }}
+        <span *ngIf="!serverConfig.isValid()">
+          ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
+        </span>
+      </p>
+
+      <ng-container *ngIf="!isCloud">
+        <ng-container *ngIf="serverConfig.server">
+          <p>
+            {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
+            {{ this.serverConfig?.version }}
             <span *ngIf="!serverConfig.isValid()">
               ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
             </span>
           </p>
-
-          <ng-container *ngIf="!isCloud">
-            <ng-container *ngIf="serverConfig.server">
-              <p class="text-center">
-                {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
-                {{ this.serverConfig?.version }}
-                <span *ngIf="!serverConfig.isValid()">
-                  ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
-                </span>
-              </p>
-              <div class="text-center">
-                <small>{{ "thirdPartyServerMessage" | i18n : serverConfig.server?.name }}</small>
-              </div>
-            </ng-container>
-
-            <p class="text-center" *ngIf="!serverConfig.server">
-              {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
-              {{ this.serverConfig?.version }}
-              <span *ngIf="!serverConfig.isValid()">
-                ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
-              </span>
-            </p>
-          </ng-container>
+          <div>
+            <small>{{ "thirdPartyServerMessage" | i18n : serverConfig.server?.name }}</small>
+          </div>
         </ng-container>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-      </div>
-    </div>
+
+        <p *ngIf="!serverConfig.server">
+          {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
+          {{ this.serverConfig?.version }}
+          <span *ngIf="!serverConfig.isValid()">
+            ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
+          </span>
+        </p>
+      </ng-container>
+    </ng-container>
   </div>
-</div>
+  <div bitDialogFooter>
+    <button bitButton bitDialogClose buttonType="primary" type="button">
+      {{ "close" | i18n }}
+    </button>
+  </div>
+</bit-simple-dialog>

apps/browser/src/popup/settings/about.component.ts

@@ -1,25 +1,29 @@
+import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { Observable } from "rxjs";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { ButtonModule, DialogModule } from "@bitwarden/components";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
 
 @Component({
-  selector: "app-about",
   templateUrl: "about.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, DialogModule, ButtonModule],
 })
 export class AboutComponent {
-  serverConfig$: Observable<ServerConfig>;
+  protected serverConfig$: Observable<ServerConfig> = this.configService.serverConfig$;
 
-  year = new Date().getFullYear();
-  version = BrowserApi.getApplicationVersion();
-  isCloud: boolean;
+  protected year = new Date().getFullYear();
+  protected version = BrowserApi.getApplicationVersion();
+  protected isCloud = this.environmentService.isCloud();
 
-  constructor(configService: ConfigServiceAbstraction, environmentService: EnvironmentService) {
-    this.serverConfig$ = configService.serverConfig$;
-    this.isCloud = environmentService.isCloud();
-  }
+  constructor(
+    private configService: ConfigServiceAbstraction,
+    private environmentService: EnvironmentService
+  ) {}
 }

apps/browser/src/popup/settings/settings.component.ts

@@ -482,7 +482,7 @@ export class SettingsComponent implements OnInit {
   }
 
   about() {
-    this.modalService.open(AboutComponent);
+    this.dialogService.open(AboutComponent);
   }
 
   async fingerprint() {