diff --git a/apps/browser/src/autofill/content/components/buttons/close-button.ts b/apps/browser/src/autofill/content/components/buttons/close-button.ts index c32d0c130e3..05a12d4f453 100644 --- a/apps/browser/src/autofill/content/components/buttons/close-button.ts +++ b/apps/browser/src/autofill/content/components/buttons/close-button.ts @@ -35,5 +35,6 @@ const closeButtonStyles = (theme: Theme) => css` > svg { width: 20px; height: 20px; + vertical-align: middle; } `; diff --git a/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts b/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts index cf9a561ee39..e3c7e0d54e6 100644 --- a/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts +++ b/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts @@ -44,7 +44,7 @@ export function OptionSelectionButton({ `; } -const iconSize = "15px"; +const iconSize = "16px"; const selectionButtonStyles = ({ disabled, @@ -94,7 +94,8 @@ const selectionButtonStyles = ({ > svg { max-width: ${iconSize}; - height: fit-content; + max-height: ${iconSize}; + height: auto; } `; diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts index 2d386d34d6a..aaa4b11d8a2 100644 --- a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts +++ b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts @@ -19,13 +19,13 @@ export function CipherAction({ ? BadgeButton({ buttonAction: handleAction, // @TODO localize - buttonText: "Update item", + buttonText: "Update", theme, }) : EditButton({ buttonAction: handleAction, // @TODO localize - buttonText: "Edit item", + buttonText: "Edit", theme, }); } diff --git a/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts b/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts index 8df68d79b6e..1b08f261eb6 100644 --- a/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts +++ b/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts @@ -12,8 +12,13 @@ export function BrandIconContainer({ iconLink, theme }: { iconLink?: URL; theme: } const brandIconContainerStyles = css` + display: flex; + justify-content: center; + width: 24px; + height: 24px; + > svg { - width: 20px; - height: fit-content; + width: auto; + height: 100%; } `; diff --git a/apps/browser/src/autofill/content/components/notification/header.ts b/apps/browser/src/autofill/content/components/notification/header.ts index 50c2c629942..d6cedf6a85a 100644 --- a/apps/browser/src/autofill/content/components/notification/header.ts +++ b/apps/browser/src/autofill/content/components/notification/header.ts @@ -49,7 +49,7 @@ const notificationHeaderStyles = ({ display: flex; align-items: center; justify-content: flex-start; - background-color: ${themes[theme].background}; + background-color: ${themes[theme].background.DEFAULT}; padding: 12px 16px 8px 16px; white-space: nowrap; diff --git a/apps/browser/src/autofill/content/components/option-selection/option-item.ts b/apps/browser/src/autofill/content/components/option-selection/option-item.ts index 619d77e63d3..e8a293e2c3f 100644 --- a/apps/browser/src/autofill/content/components/option-selection/option-item.ts +++ b/apps/browser/src/autofill/content/components/option-selection/option-item.ts @@ -62,14 +62,15 @@ const optionItemStyles = css` `; const optionItemIconContainerStyles = css` + display: flex; flex-grow: 1; flex-shrink: 1; - width: ${optionItemIconWidth}px; - height: ${optionItemIconWidth}px; + max-width: ${optionItemIconWidth}px; + max-height: ${optionItemIconWidth}px; > svg { width: 100%; - height: fit-content; + height: auto; } `;