bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +00:00
Code Issues Releases Wiki Activity

PM-20397 Misc notification bar UI tweaks (#14558)

Browse Source 
* PM-20637

* turncate save button
This commit is contained in:
Daniel Riera
2025-05-12 17:23:06 -04:00
committed by GitHub
parent 63b224f3dd
commit 02cbc37ac5
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@ const notificationContainerStyles = (theme: Theme) => css`
} }
[class*="${notificationBodyClassPrefix}-"] { [class*="${notificationBodyClassPrefix}-"] {
margin: ${spacing["3"]} 0 ${spacing["1.5"]} ${spacing["3"]}; margin: ${spacing["3"]} 0 0 ${spacing["3"]};
padding-right: ${spacing["3"]}; padding-right: ${spacing["3"]};
} }
`; `;

15
apps/browser/src/autofill/content/components/notification/footer.ts
View File

@@ -8,7 +8,7 @@ import {
NotificationTypes, NotificationTypes,
} from "../../../notification/abstractions/notification-bar"; } from "../../../notification/abstractions/notification-bar";
import { OrgView, FolderView, I18n, CollectionView } from "../common-types"; import { OrgView, FolderView, I18n, CollectionView } from "../common-types";
import { spacing, themes } from "../constants/styles"; import { spacing } from "../constants/styles";
import { NotificationButtonRow } from "./button-row"; import { NotificationButtonRow } from "./button-row";
@@ -37,7 +37,7 @@ export function NotificationFooter({
const primaryButtonText = i18n.saveAction; const primaryButtonText = i18n.saveAction;
return html` return html`
<div class=${notificationFooterStyles({ theme })}> <div class=${notificationFooterStyles({ isChangeNotification })}>
${!isChangeNotification ${!isChangeNotification
? NotificationButtonRow({ ? NotificationButtonRow({
collections, collections,
@@ -56,13 +56,16 @@ export function NotificationFooter({
`; `;
} }
const notificationFooterStyles = ({ theme }: { theme: Theme }) => css` const notificationFooterStyles = ({
isChangeNotification,
}: {
isChangeNotification: boolean;
}) => css`
display: flex; display: flex;
background-color: ${themes[theme].background.alt}; padding: ${spacing[2]} ${spacing[4]} ${isChangeNotification ? spacing[1] : spacing[4]}
padding: 0 ${spacing[3]} ${spacing[3]} ${spacing[3]}; ${spacing[4]};
:last-child { :last-child {
border-radius: 0 0 ${spacing["4"]} ${spacing["4"]}; border-radius: 0 0 ${spacing["4"]} ${spacing["4"]};
padding-bottom: ${spacing[4]};
} }
`; `;

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

@@ -62,7 +62,7 @@ const buttonRowStyles = css`
> button { > button {
max-width: min-content; max-width: min-content;
flex: 1 1 50%; flex: 1 1 25%;
} }
> div { > div {