[PM-20997] Part 1 of PM-20117 - Styling Changes (#14527)

bitwarden_license/bit-web/src/app/dirt/access-intelligence/access-intelligence-routing.module.ts

@@ -6,6 +6,7 @@ import { organizationPermissionsGuard } from "@bitwarden/web-vault/app/admin-con
 import { RiskInsightsComponent } from "./risk-insights.component";
 
 const routes: Routes = [
+  { path: "", pathMatch: "full", redirectTo: "risk-insights" },
   {
     path: "risk-insights",
     canActivate: [organizationPermissionsGuard((org) => org.useRiskInsights)],

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications.component.html

@@ -56,16 +56,15 @@
       [formControl]="searchControl"
     ></bit-search>
     <button
-      class="tw-rounded-lg"
       type="button"
-      buttonType="secondary"
+      [buttonType]="'primary'"
       bitButton
       *ngIf="isCriticalAppsFeatureEnabled"
       [disabled]="!selectedUrls.size"
       [loading]="markingAsCritical"
       (click)="markAppsAsCritical()"
     >
-      <i class="bwi bwi-star-f tw-mr-2"></i>
+      <i class="bwi tw-mr-2" [ngClass]="selectedUrls.size ? 'bwi-star-f' : 'bwi-star'"></i>
       {{ "markAppAsCritical" | i18n }}
     </button>
   </div>

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications.component.ts

@@ -26,6 +26,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import {
+  IconButtonModule,
   Icons,
   NoItemsModule,
   SearchModule,
@@ -53,6 +54,7 @@ import { ApplicationsLoadingComponent } from "./risk-insights-loading.component"
     NoItemsModule,
     SharedModule,
     AppTableRowScrollableComponent,
+    IconButtonModule,
   ],
 })
 export class AllApplicationsComponent implements OnInit {
@@ -160,7 +162,7 @@ export class AllApplicationsComponent implements OnInit {
       this.toastService.showToast({
         variant: "success",
         title: "",
-        message: this.i18nService.t("appsMarkedAsCritical"),
+        message: this.i18nService.t("applicationsMarkedAsCriticalSuccess"),
       });
     } finally {
       this.selectedUrls.clear();

bitwarden_license/bit-web/src/app/dirt/access-intelligence/app-table-row-scrollable.component.html

@@ -2,6 +2,7 @@
   <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
     <ng-container header>
       <th *ngIf="isCriticalAppsFeatureEnabled"></th>
+      <th bitCell></th>
       <th bitSortable="applicationName" bitCell>{{ "application" | i18n }}</th>
       <th bitSortable="atRiskPasswordCount" bitCell>{{ "atRiskPasswords" | i18n }}</th>
       <th bitSortable="passwordCount" bitCell>{{ "totalPasswords" | i18n }}</th>
@@ -30,6 +31,9 @@
       >
         <i class="bwi bwi-star-f" *ngIf="row.isMarkedAsCritical"></i>
       </td>
+      <td bitCell>
+        <app-vault-icon [cipher]="row.cipher"></app-vault-icon>
+      </td>
       <td
         class="tw-cursor-pointer"
         [ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }"

bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html

@@ -1,10 +1,7 @@
 <ng-container>
   <bit-layout>
-    <div class="tw-mb-1 tw-text-primary-600" bitTypography="body1">
-      {{ "accessIntelligence" | i18n }}
-    </div>
     <h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
-    <div class="tw-text-muted tw-max-w-4xl tw-mb-2">
+    <div class="tw-text-main tw-max-w-4xl tw-mb-2">
       {{ "reviewAtRiskPasswords" | i18n }}
     </div>
     <div
@@ -74,8 +71,10 @@
             "atRiskMembersDescription" | i18n
           }}</span>
           <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
-            <div bitTypography="body2" class="tw-font-bold">{{ "email" | i18n }}</div>
-            <div bitTypography="body2" class="tw-font-bold">{{ "atRiskPasswords" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">{{ "email" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
+              {{ "atRiskPasswords" | i18n }}
+            </div>
           </div>
           <ng-container *ngFor="let member of dataService.atRiskMemberDetails">
             <div class="tw-flex tw-justify-between tw-mt-2">
@@ -117,8 +116,12 @@
             "atRiskApplicationsDescription" | i18n
           }}</span>
           <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
-            <div bitTypography="body2" class="tw-font-bold">{{ "application" | i18n }}</div>
-            <div bitTypography="body2" class="tw-font-bold">{{ "atRiskPasswords" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
+              {{ "application" | i18n }}
+            </div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
+              {{ "atRiskPasswords" | i18n }}
+            </div>
           </div>
           <ng-container *ngFor="let app of dataService.atRiskAppDetails">
             <div class="tw-flex tw-justify-between tw-mt-2">