diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts index b03aeeae311..5ad0a5a2aca 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts @@ -9,6 +9,7 @@ type Args = { notificationType: NotificationType; theme: Theme; handleSaveAction: (e: Event) => void; + i18n: { [key: string]: string }; }; export default { @@ -23,6 +24,11 @@ export default { args: { theme: ThemeTypes.Light, notificationType: "add", + i18n: { + saveAsNewLoginAction: "Save as New Login", + saveAction: "Save", + }, + handleSaveAction: () => alert("Save action triggered"), }, parameters: { design: { diff --git a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts index ffef4751627..7f833f2a1f6 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts @@ -7,15 +7,18 @@ import { ButtonRow } from "../../rows/button-row"; type Args = { theme: Theme; buttonAction: (e: Event) => void; + buttonText: string; }; export default { title: "Components/Rows/Button Row", argTypes: { theme: { control: "select", options: [...Object.values(ThemeTypes)] }, + buttonText: { control: "text" }, }, args: { theme: ThemeTypes.Light, + buttonText: "Action", }, } as Meta; diff --git a/apps/browser/src/autofill/content/components/notification/confirmation-message.ts b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts index 745899481dd..d6f7ba3024d 100644 --- a/apps/browser/src/autofill/content/components/notification/confirmation-message.ts +++ b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts @@ -35,7 +35,6 @@ const baseTextStyles = css` text-align: left; text-overflow: ellipsis; line-height: 24px; - white-space: nowrap; font-family: "DM Sans", sans-serif; font-size: 16px; `; diff --git a/apps/browser/src/autofill/content/components/notification/confirmation.ts b/apps/browser/src/autofill/content/components/notification/confirmation.ts index 13d6c970731..8c213a7663f 100644 --- a/apps/browser/src/autofill/content/components/notification/confirmation.ts +++ b/apps/browser/src/autofill/content/components/notification/confirmation.ts @@ -56,5 +56,4 @@ const notificationConfirmationBodyStyles = ({ theme }: { theme: Theme }) => css` justify-content: flex-start; background-color: ${themes[theme].background.alt}; padding: 12px; - white-space: nowrap; `; diff --git a/apps/browser/src/autofill/content/components/notification/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts index 1cdde3ec3ed..f98ef795749 100644 --- a/apps/browser/src/autofill/content/components/notification/container.ts +++ b/apps/browser/src/autofill/content/components/notification/container.ts @@ -58,6 +58,7 @@ export function NotificationContainer({ handleSaveAction, theme, notificationType: type, + i18n, })} `; diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts index edc6d6f6e00..6de4a333dfe 100644 --- a/apps/browser/src/autofill/content/components/notification/footer.ts +++ b/apps/browser/src/autofill/content/components/notification/footer.ts @@ -15,14 +15,16 @@ export function NotificationFooter({ handleSaveAction, notificationType, theme, + i18n, }: { handleSaveAction: (e: Event) => void; + i18n: { [key: string]: string }; notificationType?: NotificationType; theme: Theme; }) { const isChangeNotification = notificationType === NotificationTypes.Change; - // @TODO localize - const saveNewItemText = "Save as new login"; + const saveNewItemText = i18n.saveAsNewLoginAction; + const buttonText = i18n.saveAction; return html`
@@ -32,7 +34,7 @@ export function NotificationFooter({ handleAction: handleSaveAction, theme, }) - : ButtonRow({ theme, buttonAction: handleSaveAction })} + : ButtonRow({ theme, buttonAction: handleSaveAction, buttonText })}
`; } diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts index 942c8dd55fe..1feef016a81 100644 --- a/apps/browser/src/autofill/content/components/rows/button-row.ts +++ b/apps/browser/src/autofill/content/components/rows/button-row.ts @@ -11,16 +11,18 @@ import { DropdownMenu } from "../dropdown-menu"; export function ButtonRow({ theme, buttonAction, + buttonText, }: { theme: Theme; buttonAction: (e: Event) => void; + buttonText: string; }) { return html`
${[ ActionButton({ buttonAction: buttonAction, - buttonText: "Action Button", + buttonText, theme, }), DropdownContainer({