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

* 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

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

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

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

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%;
   }
 `;

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;
 

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