1
0
mirror of https://github.com/bitwarden/browser synced 2026-01-01 16:13:27 +00:00

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

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

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"

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,
};
}

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>

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";