diff --git a/apps/browser/src/platform/popup/layout/password-manager-logo.ts b/apps/browser/src/platform/popup/layout/password-manager-logo.ts
new file mode 100644
index 00000000000..d93e2d5bb30
--- /dev/null
+++ b/apps/browser/src/platform/popup/layout/password-manager-logo.ts
@@ -0,0 +1,5 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const PasswordManagerLogo = svgIcon`
+
+`;
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index 9c56271cf31..0d68ff83e1e 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -1,29 +1,14 @@
-
+
+
+
+
+
+
-
-
+
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
index ced3f6462e9..5373b898b59 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
@@ -2,18 +2,21 @@ import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { RouterModule } from "@angular/router";
-import { LinkModule } from "@bitwarden/components";
+import { LinkModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
+import { PasswordManagerLogo } from "./password-manager-logo";
@Component({
selector: "popup-tab-navigation",
templateUrl: "popup-tab-navigation.component.html",
standalone: true,
- imports: [CommonModule, LinkModule, RouterModule],
+ imports: [CommonModule, LinkModule, RouterModule, LayoutComponent, NavigationModule],
host: {
class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
},
})
export class PopupTabNavigationComponent {
+ logo = PasswordManagerLogo;
+
navButtons = [
{
label: "Vault",
diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 02ec66ec2f1..1023071ede1 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -15,7 +15,9 @@ body {
}
body {
- width: 380px !important;
+ width: 380px;
+ transition: width 1s ease-out;
+ min-width: 380px !important;
height: 600px !important;
position: relative;
min-height: 100vh;
@@ -444,13 +446,13 @@ app-root {
@media only screen and (min-width: 601px) {
header,
main {
- padding: 0 calc((100% - 500px) / 2);
+ // padding: 0 calc((100% - 500px) / 2);
}
}
main:not(popup-page main) {
position: absolute;
- top: 44px;
+ top: 0px;
bottom: 0;
left: 0;
right: 0;
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
index 6b517e500db..5321db87b88 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -37,6 +37,11 @@
{{ "Compact Mode" }}
+
+
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
index c995b13ec69..8724977c18f 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -46,6 +46,7 @@ export class AppearanceV2Component implements OnInit {
theme: ThemeType.System,
enableAnimations: true,
compactMode: false,
+ width: 380,
});
/** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -86,6 +87,7 @@ export class AppearanceV2Component implements OnInit {
theme,
enableAnimations,
compactMode: false,
+ width: document.body.clientWidth,
});
this.formLoading = false;
@@ -119,6 +121,12 @@ export class AppearanceV2Component implements OnInit {
.subscribe((compactMode) => {
this.designSystemService.compactMode.set(compactMode);
});
+
+ this.appearanceForm.controls.width.valueChanges
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((width) => {
+ document.body.style.width = `${width}px`;
+ });
}
async updateFavicon(enableFavicon: boolean) {