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

[PM-20325] - Misc design fixes/tweaks (#14309)

Browse Source 
* fix icon sizing in option selection

* fix close button vertical centering

* fix cipher item update text

* fix missing header background color

* fix brand logo positioning in notification header
This commit is contained in:
Jonathan Prusik
2025-04-16 11:08:51 -04:00
committed by GitHub
parent 0d0314d16d
commit b413272bd5
6 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/browser/src/autofill/content/components/buttons/close-button.ts
View File

@@ -35,5 +35,6 @@ const closeButtonStyles = (theme: Theme) => css`
> svg { > svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: middle;
} }
`; `;

5
apps/browser/src/autofill/content/components/buttons/option-selection-button.ts
View File

@@ -44,7 +44,7 @@ export function OptionSelectionButton({
`; `;
} }
const iconSize = "15px"; const iconSize = "16px";
const selectionButtonStyles = ({ const selectionButtonStyles = ({
disabled, disabled,
@@ -94,7 +94,8 @@ const selectionButtonStyles = ({
> svg { > svg {
max-width: ${iconSize}; max-width: ${iconSize};
height: fit-content; max-height: ${iconSize};
height: auto;
} }
`; `;

4
apps/browser/src/autofill/content/components/cipher/cipher-action.ts
View File

@@ -19,13 +19,13 @@ export function CipherAction({
? BadgeButton({ ? BadgeButton({
buttonAction: handleAction, buttonAction: handleAction,
// @TODO localize // @TODO localize
buttonText: "Update item", buttonText: "Update",
theme, theme,
}) })
: EditButton({ : EditButton({
buttonAction: handleAction, buttonAction: handleAction,
// @TODO localize // @TODO localize
buttonText: "Edit item", buttonText: "Edit",
theme, theme,
}); });
} }

9
apps/browser/src/autofill/content/components/icons/brand-icon-container.ts
View File

@@ -12,8 +12,13 @@ export function BrandIconContainer({ iconLink, theme }: { iconLink?: URL; theme:
} }
const brandIconContainerStyles = css` const brandIconContainerStyles = css`
display: flex;
justify-content: center;
width: 24px;
height: 24px;
> svg { > svg {
width: 20px; width: auto;
height: fit-content; height: 100%;
} }
`; `;

2
apps/browser/src/autofill/content/components/notification/header.ts
View File

@@ -49,7 +49,7 @@ const notificationHeaderStyles = ({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
background-color: ${themes[theme].background}; background-color: ${themes[theme].background.DEFAULT};
padding: 12px 16px 8px 16px; padding: 12px 16px 8px 16px;
white-space: nowrap; white-space: nowrap;

7
apps/browser/src/autofill/content/components/option-selection/option-item.ts
View File

@@ -62,14 +62,15 @@ const optionItemStyles = css`
`; `;
const optionItemIconContainerStyles = css` const optionItemIconContainerStyles = css`
display: flex;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
width: ${optionItemIconWidth}px; max-width: ${optionItemIconWidth}px;
height: ${optionItemIconWidth}px; max-height: ${optionItemIconWidth}px;
> svg { > svg {
width: 100%; width: 100%;
height: fit-content; height: auto;
} }
`; `;