bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[CL-581] Update svgs to new designs and make responsive (#16219)

Browse Source
This commit is contained in:
Vicki League
2025-09-10 17:23:53 -04:00
committed by GitHub
parent c160b421fc
commit 926f587ea2
109 changed files with 798 additions and 1391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/browser/src/popup/app-routing.module.ts
View File

@@ -17,10 +17,9 @@ import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-ma
import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import {
DevicesIcon,
RegistrationLockAltIcon,
RegistrationUserAddIcon,
TwoFactorTimeoutIcon,
DeviceVerificationIcon,
TwoFactorAuthEmailIcon,
UserLockIcon,
VaultIcon,
LockIcon,
@@ -165,7 +164,7 @@ const routes: Routes = [
canActivate: [unauthGuardFn(), activeAuthGuard()],
children: [{ path: "", component: NewDeviceVerificationComponent }],
data: {
pageIcon: DeviceVerificationIcon,
pageIcon: TwoFactorAuthEmailIcon,
pageTitle: {
key: "verifyYourIdentity",
},
@@ -362,7 +361,7 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [unauthGuardFn()],
data: {
pageIcon: RegistrationLockAltIcon,
pageIcon: LockIcon,
elevation: 1,
showBackButton: true,
} satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,

4
apps/browser/src/tools/popup/send-v2/send-created/send-created.component.html
View File

@@ -14,7 +14,9 @@
<div
class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-center tw-items-center tw-gap-2 tw-h-full tw-px-5"
>
<bit-icon [icon]="sendCreatedIcon"></bit-icon>
<div class="tw-size-[95px] tw-content-center">
<bit-icon [icon]="sendCreatedIcon"></bit-icon>
</div>
<h3 tabindex="0" appAutofocus class="tw-font-semibold">
{{ "createdSendSuccessfully" | i18n }}
</h3>

16
apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
View File

@@ -1,28 +1,36 @@
<vault-carousel [label]="'introCarouselLabel' | i18n">
<vault-carousel-slide [label]="'securityPrioritized' | i18n" [disablePadding]="true">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
<bit-icon [icon]="securityHandshake"></bit-icon>
<div class="tw-size-32 tw-content-center tw-my-4">
<bit-icon [icon]="itemTypes"></bit-icon>
</div>
<h2 bitTypography="h2" class="tw-text-center">{{ "securityPrioritized" | i18n }}</h2>
<p bitTypography="body1" class="tw-text-center">{{ "securityPrioritizedBody" | i18n }}</p>
</div>
</vault-carousel-slide>
<vault-carousel-slide [label]="'quickLogin' | i18n" [disablePadding]="true">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
<bit-icon [icon]="loginCards"></bit-icon>
<div class="tw-size-32 tw-content-center tw-my-4">
<bit-icon [icon]="loginCards"></bit-icon>
</div>
<h2 bitTypography="h2" class="tw-text-center">{{ "quickLogin" | i18n }}</h2>
<p bitTypography="body1" class="tw-text-center">{{ "quickLoginBody" | i18n }}</p>
</div>
</vault-carousel-slide>
<vault-carousel-slide [label]="'secureUser' | i18n" [disablePadding]="true">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
<bit-icon [icon]="secureUser"></bit-icon>
<div class="tw-size-32 tw-content-center tw-my-4">
<bit-icon [icon]="noCredentials"></bit-icon>
</div>
<h2 bitTypography="h2" class="tw-text-center">{{ "secureUser" | i18n }}</h2>
<p bitTypography="body1" class="tw-text-center">{{ "secureUserBody" | i18n }}</p>
</div>
</vault-carousel-slide>
<vault-carousel-slide [label]="'secureDevices' | i18n" [disablePadding]="true">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
<bit-icon [icon]="secureDevices"></bit-icon>
<div class="tw-size-32 tw-content-center tw-my-4">
<bit-icon [icon]="secureDevices"></bit-icon>
</div>
<h2 bitTypography="h2" class="tw-text-center">{{ "secureDevices" | i18n }}</h2>
<p bitTypography="body1" class="tw-text-center">{{ "secureDevicesBody" | i18n }}</p>
</div>

8
apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
View File

@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { SecurityHandshake, LoginCards, SecureUser, SecureDevices } from "@bitwarden/assets/svg";
import { ItemTypes, LoginCards, NoCredentialsIcon, DevicesIcon } from "@bitwarden/assets/svg";
import { ButtonModule, DialogModule, IconModule, TypographyModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { VaultCarouselModule } from "@bitwarden/vault";
@@ -23,10 +23,10 @@ import { IntroCarouselService } from "../../../services/intro-carousel.service";
],
})
export class IntroCarouselComponent {
protected securityHandshake = SecurityHandshake;
protected itemTypes = ItemTypes;
protected loginCards = LoginCards;
protected secureUser = SecureUser;
protected secureDevices = SecureDevices;
protected noCredentials = NoCredentialsIcon;
protected secureDevices = DevicesIcon;
constructor(
private router: Router,

7
apps/desktop/src/app/app-routing.module.ts
View File

@@ -15,10 +15,9 @@ import { ChangePasswordComponent } from "@bitwarden/angular/auth/password-manage
import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.component";
import {
DevicesIcon,
RegistrationLockAltIcon,
RegistrationUserAddIcon,
TwoFactorTimeoutIcon,
DeviceVerificationIcon,
TwoFactorAuthEmailIcon,
UserLockIcon,
VaultIcon,
LockIcon,
@@ -86,7 +85,7 @@ const routes: Routes = [
canActivate: [unauthGuardFn(), activeAuthGuard()],
children: [{ path: "", component: NewDeviceVerificationComponent }],
data: {
pageIcon: DeviceVerificationIcon,
pageIcon: TwoFactorAuthEmailIcon,
pageTitle: {
key: "verifyYourIdentity",
},
@@ -150,7 +149,7 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [unauthGuardFn()],
data: {
pageIcon: RegistrationLockAltIcon,
pageIcon: LockIcon,
} satisfies AnonLayoutWrapperData,
children: [
{

4
apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.ts
View File

@@ -34,7 +34,7 @@ import {
Unassigned,
} from "@bitwarden/admin-console/common";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { Search } from "@bitwarden/assets/svg";
import { NoResults } from "@bitwarden/assets/svg";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -170,7 +170,7 @@ export class VaultComponent implements OnInit, OnDestroy {
activeFilter: VaultFilter = new VaultFilter();
protected showAddAccessToggle = false;
protected noItemIcon = Search;
protected noItemIcon = NoResults;
protected performingInitialLoad = true;
protected refreshing = false;
protected processingEvent = false;

4
apps/web/src/app/admin-console/organizations/collections/vault.component.ts
View File

@@ -36,7 +36,7 @@ import {
Unassigned,
} from "@bitwarden/admin-console/common";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { Search } from "@bitwarden/assets/svg";
import { NoResults } from "@bitwarden/assets/svg";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -183,7 +183,7 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
activeFilter: VaultFilter = new VaultFilter();
protected showAddAccessToggle = false;
protected noItemIcon = Search;
protected noItemIcon = NoResults;
protected loading$: Observable<boolean>;
protected processingEvent$ = new BehaviorSubject<boolean>(false);
protected organization$: Observable<Organization>;

8
apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html
View File

@@ -12,7 +12,9 @@
>
<div class="tw-flex tw-flex-col tw-items-center">
<ng-container *ngIf="currentState === 'assert'">
<bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-my-10"></bit-icon>
<div class="tw-size-24 tw-content-center tw-my-10">
<bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
</div>
<p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
<button
type="button"
@@ -27,7 +29,9 @@
</ng-container>
<ng-container *ngIf="currentState === 'assertFailed'">
<bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-my-10"></bit-icon>
<div class="tw-size-24 tw-content-center tw-my-10">
<bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
</div>
<p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
<button
type="button"

9
apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.ts
View File

@@ -1,7 +1,10 @@
import { Component } from "@angular/core";
import { BaseLoginViaWebAuthnComponent } from "@bitwarden/angular/auth/components/base-login-via-webauthn.component";
import { CreatePasskeyIcon, CreatePasskeyFailedIcon } from "@bitwarden/assets/svg";
import {
TwoFactorAuthSecurityKeyIcon,
TwoFactorAuthSecurityKeyFailedIcon,
} from "@bitwarden/assets/svg";
@Component({
selector: "app-login-via-webauthn",
@@ -10,7 +13,7 @@ import { CreatePasskeyIcon, CreatePasskeyFailedIcon } from "@bitwarden/assets/sv
})
export class LoginViaWebAuthnComponent extends BaseLoginViaWebAuthnComponent {
protected readonly Icons = {
CreatePasskeyIcon,
CreatePasskeyFailedIcon,
TwoFactorAuthSecurityKeyIcon,
TwoFactorAuthSecurityKeyFailedIcon,
};
}

8
apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
View File

@@ -15,7 +15,9 @@
</ng-container>
<div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
<bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-mb-6"></bit-icon>
<div class="tw-size-24 tw-content-center tw-mb-6">
<bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
</div>
<h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
<p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
</div>
@@ -24,7 +26,9 @@
*ngIf="currentStep === 'credentialCreationFailed'"
class="tw-flex tw-flex-col tw-items-center"
>
<bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-mb-6"></bit-icon>
<div class="tw-size-24 tw-content-center tw-mb-6">
<bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
</div>
<h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
<p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
</div>

9
apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
View File

@@ -4,7 +4,10 @@ import { Component, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { firstValueFrom, map, Observable } from "rxjs";
import { CreatePasskeyFailedIcon, CreatePasskeyIcon } from "@bitwarden/assets/svg";
import {
TwoFactorAuthSecurityKeyFailedIcon,
TwoFactorAuthSecurityKeyIcon,
} from "@bitwarden/assets/svg";
import { PrfKeySet } from "@bitwarden/auth/common";
import { Verification } from "@bitwarden/common/auth/types/verification";
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
@@ -37,8 +40,8 @@ export class CreateCredentialDialogComponent implements OnInit {
protected readonly NameMaxCharacters = 50;
protected readonly CreateCredentialDialogResult = CreateCredentialDialogResult;
protected readonly Icons = {
CreatePasskeyIcon,
CreatePasskeyFailedIcon,
TwoFactorAuthSecurityKeyIcon,
TwoFactorAuthSecurityKeyFailedIcon,
};
protected currentStep: Step = "userVerification";

4
apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
View File

@@ -238,7 +238,9 @@
</ng-container>
<ng-template #organizationIsNotManagedByConsolidatedBillingMSP>
<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
<bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
<div class="tw-size-56 tw-content-center">
<bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
</div>
<p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
<p>{{ "billingContactProviderForAssistance" | i18n }}</p>
</div>

4
apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
View File

@@ -5,7 +5,7 @@ import { ActivatedRoute } from "@angular/router";
import { firstValueFrom, lastValueFrom, Subject } from "rxjs";
import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
import { GearIcon } from "@bitwarden/assets/svg";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
import {
@@ -66,7 +66,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
organizationIsManagedByConsolidatedBillingMSP = false;
resellerSeatsRemainingMessage: string;
protected readonly subscriptionHiddenIcon = SubscriptionHiddenIcon;
protected readonly gearIcon = GearIcon;
protected readonly teamsStarter = ProductTierType.TeamsStarter;
private destroy$ = new Subject<void>();

8
apps/web/src/app/billing/organizations/subscription-hidden.component.ts
View File

@@ -2,12 +2,14 @@
// @ts-strict-ignore
import { Component, Input } from "@angular/core";
import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
import { GearIcon } from "@bitwarden/assets/svg";
@Component({
selector: "app-org-subscription-hidden",
template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
<bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
<div class="tw-size-56 tw-content-center">
<bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
</div>
<p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: providerName }}</p>
<p>{{ "billingContactProviderForAssistance" | i18n }}</p>
</div>`,
@@ -15,5 +17,5 @@ import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
})
export class SubscriptionHiddenComponent {
@Input() providerName: string;
subscriptionHiddenIcon = SubscriptionHiddenIcon;
gearIcon = GearIcon;
}

16
apps/web/src/app/dirt/reports/reports.ts
View File

@@ -1,11 +1,11 @@
import {
MemberAccess,
NoCredentialsIcon,
ReportBreach,
ReportExposedPasswords,
ReportInactiveTwoFactor,
ReportReusedPasswords,
ReportUnsecuredWebsites,
ReportWeakPasswords,
TwoFactorAuthSecurityKeyFailedIcon,
UnlockedIcon,
UserLockIcon,
} from "@bitwarden/assets/svg";
import { ReportEntry } from "./shared";
@@ -35,13 +35,13 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
title: "reusedPasswordsReport",
description: "reusedPasswordsReportDesc",
route: "reused-passwords-report",
icon: ReportReusedPasswords,
icon: NoCredentialsIcon,
},
[ReportType.WeakPasswords]: {
title: "weakPasswordsReport",
description: "weakPasswordsReportDesc",
route: "weak-passwords-report",
icon: ReportWeakPasswords,
icon: UnlockedIcon,
},
[ReportType.UnsecuredWebsites]: {
title: "unsecuredWebsitesReport",
@@ -53,7 +53,7 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
title: "inactive2faReport",
description: "inactive2faReportDesc",
route: "inactive-two-factor-report",
icon: ReportInactiveTwoFactor,
icon: TwoFactorAuthSecurityKeyFailedIcon,
},
[ReportType.DataBreach]: {
title: "dataBreachReport",
@@ -65,6 +65,6 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
title: "memberAccessReport",
description: "memberAccessReportDesc",
route: "member-access-report",
icon: MemberAccess,
icon: UserLockIcon,
},
};

4
apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
View File

@@ -7,7 +7,9 @@
class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
[ngClass]="{ 'tw-grayscale': disabled }"
>
<div class="tw-m-auto"><bit-icon [icon]="icon" aria-hidden="true"></bit-icon></div>
<div class="tw-m-auto tw-size-20 tw-content-center">
<bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
</div>
</div>
<div class="tw-p-5" [ngClass]="{ 'tw-grayscale': disabled }">
<h3 class="tw-mb-4 tw-text-xl tw-font-bold">{{ title }}</h3>

10
apps/web/src/app/oss-routing.module.ts
View File

@@ -14,13 +14,11 @@ import { ChangePasswordComponent } from "@bitwarden/angular/auth/password-manage
import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.component";
import {
DevicesIcon,
RegistrationLockAltIcon,
RegistrationUserAddIcon,
TwoFactorTimeoutIcon,
DeviceVerificationIcon,
TwoFactorAuthEmailIcon,
UserLockIcon,
VaultIcon,
RegistrationExpiredLinkIcon,
SsoKeyIcon,
LockIcon,
BrowserExtensionIcon,
@@ -171,7 +169,7 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [unauthGuardFn()],
data: {
pageIcon: RegistrationLockAltIcon,
pageIcon: LockIcon,
titleId: "setAStrongPassword",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@@ -304,7 +302,7 @@ const routes: Routes = [
path: "signup-link-expired",
canActivate: [unauthGuardFn()],
data: {
pageIcon: RegistrationExpiredLinkIcon,
pageIcon: TwoFactorTimeoutIcon,
pageTitle: {
key: "expiredLink",
},
@@ -435,7 +433,7 @@ const routes: Routes = [
},
],
data: {
pageIcon: DeviceVerificationIcon,
pageIcon: TwoFactorAuthEmailIcon,
pageTitle: {
key: "verifyYourIdentity",
},

3
apps/web/src/app/shared/shared.module.ts
View File

@@ -22,6 +22,7 @@ import {
LinkModule,
MenuModule,
MultiSelectModule,
NoItemsModule,
ProgressModule,
RadioButtonModule,
SectionComponent,
@@ -66,6 +67,7 @@ import {
LinkModule,
MenuModule,
MultiSelectModule,
NoItemsModule,
ProgressModule,
RadioButtonModule,
SectionComponent,
@@ -101,6 +103,7 @@ import {
LinkModule,
MenuModule,
MultiSelectModule,
NoItemsModule,
ProgressModule,
RadioButtonModule,
SectionComponent,

4
apps/web/src/app/tools/send/send-access/access.component.html
View File

@@ -11,10 +11,10 @@
(setPasswordEvent)="setPassword($event)"
*ngIf="passwordRequired && !error"
></app-send-access-password>
<bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
<bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="unavailable">
<ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
</bit-no-items>
<bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
<bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="error">
<ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
</bit-no-items>
<div *ngIf="!passwordRequired && send && !error && !unavailable">

4
apps/web/src/app/tools/send/send-access/access.component.ts
View File

@@ -4,7 +4,7 @@ import { Component, OnInit } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { ActivatedRoute } from "@angular/router";
import { ExpiredSendIcon } from "@bitwarden/assets/svg";
import { ActiveSendIcon } from "@bitwarden/assets/svg";
import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -49,7 +49,7 @@ export class AccessComponent implements OnInit {
protected hideEmail = false;
protected decKey: SymmetricCryptoKey;
protected accessRequest: SendAccessRequest;
protected expiredSendIcon = ExpiredSendIcon;
protected sendIcon = ActiveSendIcon;
protected formGroup = this.formBuilder.group({});

4
apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
View File

@@ -30,7 +30,9 @@
</section>
<section *ngIf="state === SetupExtensionState.Success" class="tw-flex tw-flex-col tw-items-center">
<bit-icon [icon]="PartyIcon"></bit-icon>
<div class="tw-size-[90px]">
<bit-icon [icon]="PartyIcon"></bit-icon>
</div>
<h1 bitTypography="h2" class="tw-mb-6 tw-mt-4">{{ "bitwardenExtensionInstalled" | i18n }}</h1>
<div
class="tw-flex tw-flex-col tw-rounded-2xl tw-bg-background tw-border tw-border-solid tw-border-secondary-300 tw-p-8"

31
apps/web/src/app/vault/individual-vault/vault.component.html
View File

@@ -66,22 +66,21 @@
></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
<div
*ngIf="isEmpty && !performingInitialLoad"
class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
>
<bit-icon [icon]="noItemIcon" aria-hidden="true"></bit-icon>
<p>{{ "noItemsInList" | i18n }}</p>
<button
type="button"
buttonType="primary"
bitButton
(click)="addCipher()"
*ngIf="filter.type !== 'trash'"
>
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "newItem" | i18n }}
</button>
<div class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start">
<bit-no-items [icon]="noItemIcon" *ngIf="isEmpty && !performingInitialLoad">
<div slot="title">{{ "noItemsInList" | i18n }}</div>
<button
type="button"
buttonType="primary"
bitButton
(click)="addCipher()"
*ngIf="filter.type !== 'trash'"
slot="button"
>
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "newItem" | i18n }}
</button>
</bit-no-items>
</div>
</div>
</div>

4
apps/web/src/app/vault/individual-vault/vault.component.ts
View File

@@ -35,7 +35,7 @@ import {
Unassigned,
} from "@bitwarden/admin-console/common";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { Search } from "@bitwarden/assets/svg";
import { NoResults } from "@bitwarden/assets/svg";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -165,7 +165,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
kdfIterations: number;
activeFilter: VaultFilter = new VaultFilter();
protected noItemIcon = Search;
protected noItemIcon = NoResults;
protected performingInitialLoad = true;
protected refreshing = false;
protected processingEvent = false;

66
apps/web/src/connectors/webauthn-fallback.html
View File

@@ -15,75 +15,67 @@
</a>
<div class="tw-text-center tw-mb-6 tw-max-w-md tw-mx-auto">
<div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
<div class="tw-mx-auto tw-max-w-20 sm:tw-max-w-24">
<!-- Matches TwoFactorAuthWebAuthnIcon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="3.33 3.33 76.49 75.83">
<path
class="tw-fill-art-primary"
d="M19.258 16.434c0-3.635 2.966-6.58 6.626-6.58H56.88c3.659 0 6.625 2.946 6.625 6.58v27.788l-2.208 2.667V16.434c0-2.423-1.978-4.387-4.417-4.387H25.884c-2.44 0-4.418 1.964-4.418 4.387v67.09c0 2.422 1.978 4.386 4.418 4.386h16.389l-.814 2.194H25.884c-3.66 0-6.626-2.947-6.626-6.58v-67.09Z"
class="tw-fill-illustration-bg-primary"
d="M3.333 8.334a5 5 0 0 1 5-5H35a5 5 0 0 1 5 5v56.667a5 5 0 0 1-5 5H8.333a5 5 0 0 1-5-5V8.334Z"
/>
<path
class="tw-fill-art-primary"
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M40.119 19.287a.55.55 0 0 1 .552-.548h2.208a.55.55 0 0 1 .553.548.55.55 0 0 1-.553.549h-2.208a.55.55 0 0 1-.552-.549Z"
d="M35 5H8.333A3.333 3.333 0 0 0 5 8.335v56.667a3.333 3.333 0 0 0 3.333 3.333H35a3.333 3.333 0 0 0 3.333-3.333V8.334A3.333 3.333 0 0 0 35 5.001ZM8.333 3.335a5 5 0 0 0-5 5v56.667a5 5 0 0 0 5 5H35a5 5 0 0 0 5-5V8.334a5 5 0 0 0-5-5H8.333Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M31.994 38.828c2.103-3.001 5.541-4.957 9.425-4.957 5.66 0 10.376 4.155 11.392 9.653a.567.567 0 0 1-.439.664.553.553 0 0 1-.646-.451c-.918-4.969-5.183-8.73-10.307-8.73-3.515 0-6.625 1.769-8.53 4.485a.542.542 0 0 1-.77.129.579.579 0 0 1-.125-.793Zm-.623 2.186c.282.117.42.448.305.74a10.928 10.928 0 0 0-.748 3.992v3.46a.56.56 0 0 1-.553.569.56.56 0 0 1-.552-.568v-3.461c0-1.56.294-3.051.829-4.417a.547.547 0 0 1 .718-.315Zm21.09 4.164a.56.56 0 0 1 .553.568v3.23a.56.56 0 0 1-.552.568.56.56 0 0 1-.552-.568v-3.23a.56.56 0 0 1 .552-.568Z"
d="M18.333 9.167c0-.46.373-.833.834-.833h5a.833.833 0 0 1 0 1.667h-5a.833.833 0 0 1-.834-.834Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-tertiary"
d="M36.667 38.333c0 10.126-6.716 18.334-15 18.334-8.285 0-15-8.208-15-18.334 0-10.125 6.715-18.333 15-18.333 8.284 0 15 8.208 15 18.333Z"
/>
<path
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M32.823 41.892c1.451-3.427 4.75-5.827 8.596-5.827 1.98 0 3.819.638 5.333 1.725.25.18.31.532.135.788a.544.544 0 0 1-.769.138 8.02 8.02 0 0 0-4.7-1.52c-3.382 0-6.297 2.111-7.582 5.146a.547.547 0 0 1-.726.294.57.57 0 0 1-.287-.744Zm14.94-2.495a.543.543 0 0 1 .778.066 9.936 9.936 0 0 1 2.265 6.35v7.783a.559.559 0 0 1-.552.566.559.559 0 0 1-.553-.566v-7.782a8.788 8.788 0 0 0-2.002-5.62.575.575 0 0 1 .064-.797Zm-15.06 4.804a.562.562 0 0 1 .487.625 9.062 9.062 0 0 0-.053.988v7.782a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-7.782c0-.377.02-.748.06-1.114a.555.555 0 0 1 .611-.499Z"
d="M21.667 55C28.733 55 35 47.866 35 38.333c0-9.533-6.267-16.666-13.333-16.666-7.067 0-13.334 7.133-13.334 16.666C8.333 47.866 14.6 55 21.667 55Zm0 1.667c8.284 0 15-8.208 15-18.334 0-10.125-6.716-18.333-15-18.333-8.285 0-15 8.208-15 18.333 0 10.126 6.715 18.334 15 18.334Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-bg-tertiary"
d="M68.333 35c0 6.444-5.223 11.667-11.666 11.667C50.223 46.667 45 41.444 45 35.001c0-6.444 5.223-11.667 11.667-11.667 6.443 0 11.666 5.223 11.666 11.667Z"
/>
<path
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M34.24 45.704c0-4.105 3.207-7.446 7.178-7.446 3.972 0 7.178 3.341 7.178 7.446V55.79a.559.559 0 0 1-.552.565.559.559 0 0 1-.552-.565V45.704c0-3.495-2.726-6.315-6.074-6.315-3.347 0-6.073 2.82-6.073 6.315v3.948a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-3.948Zm.552 5.572c.305 0 .553.253.553.565v3.949a.559.559 0 0 1-.553.565.559.559 0 0 1-.552-.565V51.84c0-.312.247-.565.552-.565Z"
d="M56.667 45c5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10s-10 4.478-10 10c0 5.523 4.477 10 10 10Zm0 1.667c6.443 0 11.666-5.223 11.666-11.666 0-6.444-5.223-11.667-11.666-11.667C50.223 23.334 45 28.557 45 35.001c0 6.443 5.223 11.666 11.667 11.666Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-bg-tertiary"
fill-rule="evenodd"
d="M38.89 41.142a4.955 4.955 0 0 1 2.529-.69 4.966 4.966 0 0 1 4.97 4.962v3.044a.55.55 0 0 1-.553.548.55.55 0 0 1-.552-.548v-3.044a3.865 3.865 0 0 0-5.83-3.33.554.554 0 0 1-.757-.19.546.546 0 0 1 .192-.752Zm-.911 1.45c.258.16.335.5.173.756a3.844 3.844 0 0 0-.599 2.066v11.49a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-11.49c0-.974.282-1.884.768-2.651a.554.554 0 0 1 .762-.172Zm7.857 7.904a.55.55 0 0 1 .552.549v5.859a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-5.86a.55.55 0 0 1 .552-.547Z"
d="M78.255 59.98a22.918 22.918 0 0 1 1.559 5.854H41.667v-8.333h-4.549a22.916 22.916 0 0 1 41.137 2.48Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M38.658 45.306c0-1.488 1.256-2.66 2.76-2.66 1.505 0 2.761 1.172 2.761 2.66v4.829a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-4.828c0-.845-.722-1.564-1.657-1.564-.934 0-1.656.72-1.656 1.563v12.146a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549V45.307Zm4.97 6.317a.55.55 0 0 1 .551.549v5.28a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-5.28a.55.55 0 0 1 .552-.549Z"
d="M43.333 55.834v8.333h34.5a21.238 21.238 0 0 0-5.724-10.442 21.25 21.25 0 0 0-31.9 2.109h3.124Zm-5.18 0c-.368.54-.714 1.096-1.035 1.667h4.549v8.333h38.147a22.875 22.875 0 0 0-1.558-5.853 22.915 22.915 0 0 0-40.102-4.147Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
class="tw-fill-illustration-bg-secondary"
fill-rule="evenodd"
d="M41.419 44.84a.55.55 0 0 1 .552.548v1.9a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.549v-1.9a.55.55 0 0 1 .552-.548Zm0 4a.55.55 0 0 1 .552.548V58a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-8.612a.55.55 0 0 1 .552-.549Z"
d="M39.167 79.167c5.272 0 9.829-3.06 11.993-7.5h5.65c.442 0 .866-.176 1.178-.489L60 69.168l1.91 1.91a.833.833 0 0 0 1.18 0l.66-.66.66.66a.833.833 0 0 0 1.18 0l1.91-1.91 2.012 2.011c.312.313.736.489 1.178.489h2.786c.442 0 .866-.176 1.179-.489l5.05-5.05a.417.417 0 0 0 0-.59l-5.05-5.05A1.667 1.667 0 0 0 73.476 60H51.16c-2.164-4.44-6.721-7.5-11.993-7.5-7.364 0-13.334 5.97-13.334 13.333 0 7.364 5.97 13.334 13.334 13.334Zm-5-10.834a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-primary"
class="tw-fill-illustration-outline"
fill-rule="evenodd"
d="M48.904 87.97c2.492 0 4.542-2.042 4.542-4.616 0-2.51-1.986-4.616-4.542-4.616-2.55 0-4.543 2.049-4.543 4.616 0 2.574 2.05 4.616 4.543 4.616Zm3.016-4.616c0 1.739-1.376 3.086-3.016 3.086-1.64 0-3.017-1.347-3.017-3.086 0-1.745 1.333-3.086 3.017-3.086 1.677 0 3.016 1.385 3.016 3.086Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-primary"
fill-rule="evenodd"
d="M108.913 84.456a.767.767 0 0 0 0-1.074l-6.098-6.213a.76.76 0 0 0-.544-.228H70.225c-2.438-5.616-7.969-9.602-14.417-9.602-8.75 0-15.73 7.185-15.73 16.015 0 8.832 7.032 16.015 15.73 16.015 6.498 0 12.081-4.036 14.475-9.756h8.303c.204 0 .4-.082.544-.228l2.933-2.989 3.034 3.091a.762.762 0 0 0 1.088 0l.918-.934.766.78a.762.762 0 0 0 1.08.008l3.135-3.107 3.294 3.356c.143.146.339.229.543.229h7.408a.76.76 0 0 0 .544-.229l5.04-5.134Zm-5.903 3.832h-6.769l-3.606-3.674a.762.762 0 0 0-1.08-.007l-3.135 3.106-.774-.788a.762.762 0 0 0-1.087 0l-.918.935-3.034-3.091a.762.762 0 0 0-1.088 0l-3.253 3.314h-8.5c-.316 0-.6.196-.712.493-2.06 5.419-7.23 9.263-13.246 9.263-7.832 0-14.204-6.475-14.204-14.485 0-8.011 6.323-14.485 14.204-14.485 5.966 0 11.09 3.795 13.2 9.12a.763.763 0 0 0 .709.482h32.235l5.346 5.448-4.288 4.37Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
d="M100.357 80.991a.382.382 0 0 0-.382-.382H73.651a.382.382 0 0 0 0 .765h26.324c.211 0 .382-.171.382-.383ZM65.693 77.56c-2.04-3.686-5.74-6.133-9.95-6.133-.895 0-1.766.11-2.602.319a.382.382 0 0 1-.184-.743 11.478 11.478 0 0 1 2.785-.341c4.52 0 8.46 2.627 10.618 6.528a14.09 14.09 0 0 1 1.563 4.503.382.382 0 1 1-.752.126 13.324 13.324 0 0 0-1.478-4.258Z"
/>
<path
class="tw-fill-art-primary tw-stroke-art-primary"
fill-rule="evenodd"
stroke-width=".355"
d="M75.94 32.403c8.007 0 14.498 6.51 14.498 14.538a14.542 14.542 0 0 1-9.26 13.56c8.849 1.9 15.896 8.519 18.221 17.036l-1.472.404C95.343 68.475 86.492 61.48 75.95 61.48c-6.743 0-12.796 2.861-16.96 7.404l-1.123-1.036a24.374 24.374 0 0 1 12.842-7.344 14.542 14.542 0 0 1-9.265-13.563c0-8.029 6.49-14.538 14.497-14.538Zm12.972 14.538c0-7.184-5.808-13.007-12.972-13.007S62.97 39.757 62.97 46.94c0 7.184 5.807 13.008 12.971 13.008s12.972-5.823 12.972-13.008Z"
d="M50.118 70h6.692L60 66.81l2.5 2.5 1.25-1.25L65 69.31l2.5-2.5L70.69 70h2.786l4.167-4.167-4.167-4.166H50.118l-.457-.937a11.667 11.667 0 0 0-10.494-6.563c-6.444 0-11.667 5.223-11.667 11.666 0 6.444 5.223 11.667 11.667 11.667 4.61 0 8.6-2.674 10.494-6.563l.457-.937Zm29.587-3.872a.417.417 0 0 0 0-.59l-5.05-5.05A1.667 1.667 0 0 0 73.476 60H51.16c-2.164-4.44-6.721-7.5-11.993-7.5-7.364 0-13.334 5.97-13.334 13.333 0 7.364 5.97 13.334 13.334 13.334 5.272 0 9.829-3.06 11.993-7.5h5.65c.442 0 .866-.176 1.178-.489L60 69.168l1.91 1.91a.833.833 0 0 0 1.179.001l.661-.661.66.66.002.001a.833.833 0 0 0 1.177 0l1.911-1.911 2.012 2.011c.312.313.736.489 1.178.489h2.786c.442 0 .866-.176 1.179-.489l5.05-5.05Zm-41.372-.295a4.167 4.167 0 1 1-8.333 0 4.167 4.167 0 0 1 8.333 0Zm-1.666 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM16.126 28.497a15.793 15.793 0 0 1 5.542-.996c1.95 0 3.818.352 5.541.996a.833.833 0 0 0 .584-1.56 17.462 17.462 0 0 0-6.125-1.103c-2.154 0-4.218.39-6.125 1.102a.833.833 0 1 0 .583 1.561Zm5.542 2.337a11.648 11.648 0 0 0-9.335 4.667.833.833 0 1 1-1.332-1 13.314 13.314 0 0 1 10.667-5.334c4.331 0 7.947 1.77 10.59 4.41a.833.833 0 1 1-1.179 1.18c-2.36-2.36-5.564-3.923-9.411-3.923Zm-.117 1.667c-5.377 0-9.63 4.555-9.26 9.92l.075 1.081c.097 1.4.428 2.772.98 4.061l.47 1.099a.833.833 0 1 0 1.532-.656l-.47-1.1a10.835 10.835 0 0 1-.85-3.519l-.074-1.08a7.615 7.615 0 1 1 15.212-.524v.718a.833.833 0 0 1-1.666 0v-.834a5.848 5.848 0 0 0-1.522-3.927c-1.054-1.146-2.637-1.906-4.728-1.906-2.173 0-3.575.99-4.397 2.254-.79 1.216-1.02 2.639-1.02 3.58 0 2.326.209 4.02.794 5.424.593 1.425 1.54 2.465 2.84 3.549a.833.833 0 1 0 1.067-1.28c-1.2-1-1.921-1.835-2.369-2.91-.457-1.097-.665-2.527-.665-4.784 0-.726.187-1.803.75-2.67.533-.82 1.423-1.496 3-1.496 1.659 0 2.785.589 3.501 1.368a4.181 4.181 0 0 1 1.082 2.798v.834a2.5 2.5 0 0 0 5 0v-.718a9.282 9.282 0 0 0-9.282-9.282Zm-.754 9.116c0-.42.347-.783.823-.783a.88.88 0 0 1 .88.88v1.364a4.68 4.68 0 0 0 1.872 3.743l.684.513a5 5 0 0 0 3 1h.277a.833.833 0 0 0 0-1.667h-.277a3.334 3.334 0 0 1-2-.666l-.684-.513a3.013 3.013 0 0 1-1.205-2.41v-1.364a2.547 2.547 0 0 0-2.547-2.547c-1.342 0-2.492 1.056-2.49 2.453.001.82.033 1.85.148 2.804.125 1.035.627 1.848 1.163 2.526.244.31.509.608.757.887l.066.074c.274.308.526.597.752.895.553.729.7 1.326.544 1.719a.833.833 0 0 0 1.547.619c.504-1.26-.137-2.52-.763-3.345-.27-.356-.562-.688-.834-.994l-.06-.069a18.78 18.78 0 0 1-.701-.819c-.456-.577-.745-1.1-.817-1.693a23.012 23.012 0 0 1-.135-2.607Z"
clip-rule="evenodd"
/>
</svg>

1
apps/web/src/images/domain-verification/domain.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="129" height="123" fill="none"><circle cx="67.071" cy="61.444" r="59.684" fill="#F0F0F0" stroke="#89929F" stroke-width="3"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M21.55 100.351c30.98 2.459 58.077-20.525 60.522-51.335 1.482-18.666-6.06-34.632-19.411-45.882"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M14.496 33.785C12.136 66.27 38.456 95.843 72.6 98.322c1.593.116 5.962.174 7.528.177 4.43-.177 17.611-2.407 26.618-7.151 6.626-3.49 12.932-7.15 17.831-12.737"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M124.435 48.005c-17.949-24.123-55.678-26.834-83.084-6.443-16.604 12.353-26.685 30.356-27.493 48.08"/><circle cx="78.336" cy="27.893" r="5" fill="#89929F"/><circle cx="19.703" cy="66.052" r="5" fill="#89929F"/><circle cx="52.277" cy="93.973" r="5" fill="#89929F"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 898 B