PM-21057 (#14631)

Author: dan-livefront

apps/browser/src/autofill/content/components/cipher/cipher-info.ts

@@ -29,7 +29,9 @@ export function CipherInfo({ cipher, theme }: CipherInfoProps) {
       </span>
 
       ${login?.username
-        ? html`<span class=${cipherInfoSecondaryTextStyles(theme)}>${login.username}</span>`
+        ? html`<span title=${login.username} class=${cipherInfoSecondaryTextStyles(theme)}
+            >${login.username}</span
+          >`
         : null}
     </div>
   `;

apps/browser/src/autofill/content/components/notification/confirmation/body.ts

@@ -3,7 +3,7 @@ import { html, nothing } from "lit";
 
 import { Theme } from "@bitwarden/common/platform/enums";
 
-import { themes } from "../../constants/styles";
+import { spacing, themes } from "../../constants/styles";
 import { Celebrate, Keyhole, Warning } from "../../illustrations";
 
 import { NotificationConfirmationMessage } from "./message";
@@ -66,7 +66,7 @@ const iconContainerStyles = (error?: string) => css`
   }
 `;
 const notificationConfirmationBodyStyles = ({ theme }: { theme: Theme }) => css`
-  gap: 16px;
+  gap: ${spacing[4]};
   display: flex;
   align-items: center;
   justify-content: flex-start;

apps/browser/src/autofill/content/components/notification/confirmation/container.ts

@@ -43,7 +43,7 @@ export function NotificationConfirmationContainer({
   type,
 }: NotificationConfirmationContainerProps) {
   const headerMessage = getHeaderMessage(i18n, type, error);
-  const confirmationMessage = getConfirmationMessage(i18n, itemName, type, error);
+  const confirmationMessage = getConfirmationMessage(i18n, type, error);
   const buttonText = error ? i18n.newItem : i18n.view;
   const buttonAria = chrome.i18n.getMessage("notificationViewAria", [itemName]);
 
@@ -109,19 +109,13 @@ const notificationContainerStyles = (theme: Theme) => css`
   }
 `;
 
-function getConfirmationMessage(
-  i18n: I18n,
-  itemName: string,
-  type?: NotificationType,
-  error?: string,
-) {
-  const loginSaveConfirmation = chrome.i18n.getMessage("loginSaveConfirmation", [itemName]);
-  const loginUpdatedConfirmation = chrome.i18n.getMessage("loginUpdatedConfirmation", [itemName]);
-
+function getConfirmationMessage(i18n: I18n, type?: NotificationType, error?: string) {
   if (error) {
     return i18n.saveFailureDetails;
   }
-  return type === NotificationTypes.Add ? loginSaveConfirmation : loginUpdatedConfirmation;
+  return type === NotificationTypes.Add
+    ? i18n.loginSaveConfirmation
+    : i18n.loginUpdatedConfirmation;
 }
 
 function getHeaderMessage(i18n: I18n, type?: NotificationType, error?: string) {

apps/browser/src/autofill/content/components/notification/confirmation/message.ts

@@ -3,7 +3,7 @@ import { html, nothing } from "lit";
 
 import { Theme } from "@bitwarden/common/platform/enums";
 
-import { themes, typography } from "../../constants/styles";
+import { spacing, themes, typography } from "../../constants/styles";
 
 export type NotificationConfirmationMessageProps = {
   buttonAria?: string;
@@ -18,15 +18,17 @@ export type NotificationConfirmationMessageProps = {
 export function NotificationConfirmationMessage({
   buttonAria,
   buttonText,
+  itemName,
   message,
   messageDetails,
   handleClick,
   theme,
 }: NotificationConfirmationMessageProps) {
   return html`
-    <div>
+    <div class=${containerStyles}>
       ${message || buttonText
         ? html`
+            <span class=${itemNameStyles(theme)} title=${itemName}> ${itemName} </span>
             <span
               title=${message || buttonText}
               class=${notificationConfirmationMessageStyles(theme)}
@@ -57,8 +59,15 @@ export function NotificationConfirmationMessage({
   `;
 }
 
+const containerStyles = css`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${spacing[1]};
+  width: 100%;
+`;
+
 const baseTextStyles = css`
-  flex-grow: 1;
   overflow-x: hidden;
   text-align: left;
   text-overflow: ellipsis;
@@ -74,6 +83,15 @@ const notificationConfirmationMessageStyles = (theme: Theme) => css`
   font-weight: 400;
 `;
 
+const itemNameStyles = (theme: Theme) => css`
+  ${baseTextStyles}
+
+  color: ${themes[theme].text.main};
+  font-weight: 400;
+  white-space: nowrap;
+  max-width: 300px;
+`;
+
 const notificationConfirmationButtonTextStyles = (theme: Theme) => css`
   ${baseTextStyles}
 

apps/browser/src/autofill/content/components/notification/header.ts

@@ -4,7 +4,7 @@ import { html } from "lit";
 import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
 
 import { CloseButton } from "../buttons/close-button";
-import { themes } from "../constants/styles";
+import { spacing, themes } from "../constants/styles";
 import { BrandIconContainer } from "../icons/brand-icon-container";
 
 import { NotificationHeaderMessage } from "./header-message";
@@ -47,7 +47,7 @@ const notificationHeaderStyles = ({
   standalone: boolean;
   theme: Theme;
 }) => css`
-  gap: 8px;
+  gap: ${spacing[2]};
   display: flex;
   align-items: center;
   justify-content: flex-start;

apps/browser/src/autofill/content/components/rows/button-row.ts

@@ -51,7 +51,7 @@ export function ButtonRow({ theme, primaryButton, selectButtons }: ButtonRowProp
 }
 
 const buttonRowStyles = css`
-  gap: 16px;
+  gap: ${spacing[4]};
   display: flex;
   align-items: center;
   justify-content: space-between;