1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 21:33:27 +00:00

[CL-849] Update and consolidate logo svgs (#16390)

This commit is contained in:
Vicki League
2025-09-25 14:52:55 -04:00
committed by GitHub
parent 3b2a2e3129
commit e3a5111a35
12 changed files with 83 additions and 46 deletions

View File

@@ -5,12 +5,9 @@
[showBackButton]="showBackButton"
[pageTitle]="''"
>
<bit-icon
*ngIf="showLogo"
class="tw-inline-flex"
[icon]="logo"
[ariaLabel]="'appLogoLabel' | i18n"
></bit-icon>
<div class="tw-w-32">
<bit-icon *ngIf="showLogo" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
</div>
<ng-container slot="end">
<app-pop-out></app-pop-out>

View File

@@ -5,7 +5,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
import { ExtensionBitwardenLogo, Icon } from "@bitwarden/assets/svg";
import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import {
IconModule,
@@ -62,7 +62,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
protected hideCardWrapper: boolean = false;
protected theme: string;
protected logo = ExtensionBitwardenLogo;
protected logo = BitwardenLogo;
constructor(
private router: Router,

File diff suppressed because one or more lines are too long

View File

@@ -3,18 +3,18 @@ import { svgIcon } from "../icon-service";
export const BitwardenIcon = svgIcon`
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11934_25684)">
<path d="M17.3333 0H2.66667C1.19391 0 0 1.19391 0 2.66667V17.3333C0 18.8061 1.19391 20 2.66667 20H17.3333C18.8061 20 20 18.8061 20 17.3333V2.66667C20 1.19391 18.8061 0 17.3333 0Z" fill="#175DDC"/>
<mask id="mask0_11934_25684" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="3" width="14" height="14">
<path d="M17 3H3V17H17V3Z" fill="white"/>
</mask>
<g mask="url(#mask0_11934_25684)">
<path d="M15.6599 3.17501C15.607 3.11944 15.5435 3.07526 15.4731 3.04507C15.4027 3.01489 15.327 2.99958 15.2504 3.00001H4.75052C4.67396 2.99958 4.59784 3.01489 4.5274 3.04507C4.45696 3.07526 4.39352 3.11944 4.34102 3.17501C4.28546 3.22751 4.24127 3.29138 4.21109 3.36182C4.1809 3.43226 4.16559 3.50794 4.16602 3.58451V10.5844C4.16821 11.1173 4.27146 11.6449 4.47052 12.1393C4.65996 12.6271 4.91458 13.0874 5.22739 13.5069C5.54895 13.9274 5.90901 14.3163 6.30276 14.6698C6.66807 15.0049 7.05306 15.3186 7.4551 15.6086C7.8051 15.8571 8.1726 16.0925 8.5576 16.3148C8.9426 16.537 9.21431 16.6871 9.3731 16.7654C9.53322 16.8441 9.66272 16.9063 9.75897 16.9474C9.83422 16.9837 9.91694 17.0016 10.0005 16.9999C10.0827 17.0012 10.1641 16.982 10.2376 16.9448C10.3356 16.9019 10.4633 16.8415 10.6252 16.7628C10.7871 16.684 11.0627 16.5335 11.4407 16.3121C11.8187 16.0908 12.1906 15.8545 12.5432 15.606C12.9457 15.3155 13.3311 15.0023 13.6973 14.6671C14.0915 14.3141 14.4515 13.9247 14.7727 13.5043C15.085 13.0843 15.3397 12.6245 15.5295 12.1367C15.729 11.6423 15.8323 11.1147 15.834 10.5818V3.58188C15.8345 3.50576 15.8192 3.43051 15.789 3.36051C15.7588 3.29051 15.715 3.22751 15.6599 3.17501ZM14.3063 10.6483C14.3063 13.1858 10.0005 15.3654 10.0005 15.3654V4.49975H14.3063V10.6483Z" fill="white"/>
</g>
<path d="M17.3333 0H2.66667C1.19391 0 0 1.19391 0 2.66667V17.3333C0 18.8061 1.19391 20 2.66667 20H17.3333C18.8061 20 20 18.8061 20 17.3333V2.66667C20 1.19391 18.8061 0 17.3333 0Z" fill="#175DDC"/>
<mask id="mask0_11934_25684" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="3" width="14" height="14">
<path d="M17 3H3V17H17V3Z" class="tw-fill-text-alt2"/>
</mask>
<g mask="url(#mask0_11934_25684)">
<path d="M15.6599 3.17501C15.607 3.11944 15.5435 3.07526 15.4731 3.04507C15.4027 3.01489 15.327 2.99958 15.2504 3.00001H4.75052C4.67396 2.99958 4.59784 3.01489 4.5274 3.04507C4.45696 3.07526 4.39352 3.11944 4.34102 3.17501C4.28546 3.22751 4.24127 3.29138 4.21109 3.36182C4.1809 3.43226 4.16559 3.50794 4.16602 3.58451V10.5844C4.16821 11.1173 4.27146 11.6449 4.47052 12.1393C4.65996 12.6271 4.91458 13.0874 5.22739 13.5069C5.54895 13.9274 5.90901 14.3163 6.30276 14.6698C6.66807 15.0049 7.05306 15.3186 7.4551 15.6086C7.8051 15.8571 8.1726 16.0925 8.5576 16.3148C8.9426 16.537 9.21431 16.6871 9.3731 16.7654C9.53322 16.8441 9.66272 16.9063 9.75897 16.9474C9.83422 16.9837 9.91694 17.0016 10.0005 16.9999C10.0827 17.0012 10.1641 16.982 10.2376 16.9448C10.3356 16.9019 10.4633 16.8415 10.6252 16.7628C10.7871 16.684 11.0627 16.5335 11.4407 16.3121C11.8187 16.0908 12.1906 15.8545 12.5432 15.606C12.9457 15.3155 13.3311 15.0023 13.6973 14.6671C14.0915 14.3141 14.4515 13.9247 14.7727 13.5043C15.085 13.0843 15.3397 12.6245 15.5295 12.1367C15.729 11.6423 15.8323 11.1147 15.834 10.5818V3.58188C15.8345 3.50576 15.8192 3.43051 15.789 3.36051C15.7588 3.29051 15.715 3.22751 15.6599 3.17501ZM14.3063 10.6483C14.3063 13.1858 10.0005 15.3654 10.0005 15.3654V4.49975H14.3063V10.6483Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="clip0_11934_25684">
<rect width="20" height="20" fill="white"/>
</clipPath>
<clipPath id="clip0_11934_25684">
<rect width="20" height="20" class="tw-fill-text-alt2"/>
</clipPath>
</defs>
</svg>
`;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -12,7 +12,6 @@ export * from "./deactivated-org";
export * from "./devices.icon";
export * from "./domain.icon";
export * from "./empty-trash";
export * from "./extension-bitwarden-logo.icon";
export * from "./gear";
export * from "./generator";
export * from "./item-types";

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -4,13 +4,22 @@ import { svgIcon } from "../icon-service";
* Shield logo with extra space in the viewbox.
*/
const AnonLayoutBitwardenShield = svgIcon`
<svg viewBox="10 15 100 100" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="10 15 100 100" xmlns="http://www.w3.org/2000/svg">
<path class="tw-fill-marketing-logo" d="M82.2944 69.1899V37.2898H60V93.9624C63.948 91.869 67.4812 89.5927 70.5998 87.1338C78.3962 81.0196 82.2944 75.0383 82.2944 69.1899ZM91.8491 30.9097V69.1899C91.8491 72.0477 91.2934 74.8805 90.182 77.6883C89.0706 80.4962 87.6938 82.9884 86.0516 85.1649C84.4094 87.3415 82.452 89.4598 80.1794 91.5201C77.9068 93.5803 75.8084 95.2916 73.8842 96.654C71.96 98.0164 69.9528 99.304 67.8627 100.517C65.7726 101.73 64.288 102.552 63.4088 102.984C62.5297 103.416 61.8247 103.748 61.2939 103.981C60.8958 104.18 60.4645 104.28 60 104.28C59.5355 104.28 59.1042 104.18 58.7061 103.981C58.1753 103.748 57.4703 103.416 56.5911 102.984C55.712 102.552 54.2273 101.73 52.1372 100.517C50.0471 99.304 48.04 98.0164 46.1158 96.654C44.1916 95.2916 42.0932 93.5803 39.8206 91.5201C37.548 89.4598 35.5906 87.3415 33.9484 85.1649C32.3062 82.9884 30.9294 80.4962 29.818 77.6883C28.7066 74.8805 28.1509 72.0477 28.1509 69.1899V30.9097C28.1509 30.0458 28.4661 29.2981 29.0964 28.6668C29.7267 28.0354 30.4732 27.7197 31.3358 27.7197H88.6642C89.5268 27.7197 90.2732 28.0354 90.9036 28.6668C91.5339 29.2981 91.8491 30.0458 91.8491 30.9097Z" />
</svg>
`;
const BitwardenShield = svgIcon`
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" fill="none"><g clip-path="url(#bitwarden-shield-clip)"><path class="tw-fill-text-alt2" d="M22.01 17.055V4.135h-9.063v22.954c1.605-.848 3.041-1.77 4.31-2.766 3.169-2.476 4.753-4.899 4.753-7.268Zm3.884-15.504v15.504a9.256 9.256 0 0 1-.677 3.442 12.828 12.828 0 0 1-1.68 3.029 18.708 18.708 0 0 1-2.386 2.574 27.808 27.808 0 0 1-2.56 2.08 32.251 32.251 0 0 1-2.448 1.564c-.85.49-1.453.824-1.81.999-.357.175-.644.31-.86.404-.162.08-.337.12-.526.12s-.364-.04-.526-.12a22.99 22.99 0 0 1-.86-.404c-.357-.175-.96-.508-1.81-1a32.242 32.242 0 0 1-2.448-1.564 27.796 27.796 0 0 1-2.56-2.08 18.706 18.706 0 0 1-2.386-2.573 12.828 12.828 0 0 1-1.68-3.029A9.256 9.256 0 0 1 0 17.055V1.551C0 1.2.128.898.384.642.641.386.944.26 1.294.26H24.6c.35 0 .654.127.91.383s.384.559.384.909Z"/></g><defs><clipPath id="bitwarden-shield-clip"><path class="tw-fill-text-alt2" d="M0 0h26v32H0z"/></clipPath></defs></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32" fill="none">
<g clip-path="url(#bitwarden-shield-clip)">
<path class="tw-fill-text-alt2" d="M22.01 17.055V4.135h-9.063v22.954c1.605-.848 3.041-1.77 4.31-2.766 3.169-2.476 4.753-4.899 4.753-7.268Zm3.884-15.504v15.504a9.256 9.256 0 0 1-.677 3.442 12.828 12.828 0 0 1-1.68 3.029 18.708 18.708 0 0 1-2.386 2.574 27.808 27.808 0 0 1-2.56 2.08 32.251 32.251 0 0 1-2.448 1.564c-.85.49-1.453.824-1.81.999-.357.175-.644.31-.86.404-.162.08-.337.12-.526.12s-.364-.04-.526-.12a22.99 22.99 0 0 1-.86-.404c-.357-.175-.96-.508-1.81-1a32.242 32.242 0 0 1-2.448-1.564 27.796 27.796 0 0 1-2.56-2.08 18.706 18.706 0 0 1-2.386-2.573 12.828 12.828 0 0 1-1.68-3.029A9.256 9.256 0 0 1 0 17.055V1.551C0 1.2.128.898.384.642.641.386.944.26 1.294.26H24.6c.35 0 .654.127.91.383s.384.559.384.909Z"/>
</g>
<defs>
<clipPath id="bitwarden-shield-clip">
<path class="tw-fill-text-alt2" d="M0 0h26v32H0z"/>
</clipPath>
</defs>
</svg>
`;
export { AnonLayoutBitwardenShield, BitwardenShield };

View File

@@ -1,7 +1,7 @@
<div
[ngClass]="{
'tw-sticky tw-top-0 tw-z-50 tw-pb-4': sideNavService.open,
'tw-pb-[calc(theme(spacing.6)_+_2px)]': !sideNavService.open,
'tw-pb-[calc(theme(spacing.8)_+_2px)]': !sideNavService.open,
}"
class="tw-px-2 tw-pt-2"
>
@@ -12,6 +12,7 @@
[ngClass]="{
'!tw-h-[55px] [&_svg]:!tw-w-[26px] [&_svg]:tw-inset-y-[theme(spacing.3)]':
!sideNavService.open,
'tw-w-56': sideNavService.open,
}"
[attr.aria-label]="label()"
[title]="label()"