mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Update memo notification styling
Summary: Updates CSS for memo notifications to match latest Figma designs. Test Plan: N/A Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D3737
This commit is contained in:
parent
e6692c2793
commit
9e009bbab9
@ -87,6 +87,7 @@ function buildNotificationDom(item: Notification, options: IBeaconOpenOptions) {
|
|||||||
return cssToastWrapper(testId('toast-wrapper'),
|
return cssToastWrapper(testId('toast-wrapper'),
|
||||||
cssToastWrapper.cls(use => `-${use(item.status)}`),
|
cssToastWrapper.cls(use => `-${use(item.status)}`),
|
||||||
cssToastWrapper.cls(`-${item.options.level}`),
|
cssToastWrapper.cls(`-${item.options.level}`),
|
||||||
|
cssToastWrapper.cls('-memo', item.options.memos.length > 0),
|
||||||
cssToastWrapper.cls(hasLeftIcon ? '-left-icon' : ''),
|
cssToastWrapper.cls(hasLeftIcon ? '-left-icon' : ''),
|
||||||
item.options.title ? null : iconElement,
|
item.options.title ? null : iconElement,
|
||||||
cssToastBody(
|
cssToastBody(
|
||||||
@ -98,7 +99,10 @@ function buildNotificationDom(item: Notification, options: IBeaconOpenOptions) {
|
|||||||
item.options.actions.map((action) => buildAction(action, item, options))
|
item.options.actions.map((action) => buildAction(action, item, options))
|
||||||
) : null,
|
) : null,
|
||||||
item.options.memos.length ? cssToastMemos(
|
item.options.memos.length ? cssToastMemos(
|
||||||
item.options.memos.map(memo => cssToastMemo(memo, testId('toast-memo')))
|
item.options.memos.map(memo => cssToastMemo(
|
||||||
|
cssToastMemoIcon('Memo'),
|
||||||
|
dom('div', memo, testId('toast-memo')),
|
||||||
|
))
|
||||||
) : null,
|
) : null,
|
||||||
),
|
),
|
||||||
dom.maybe(item.options.canUserClose, () =>
|
dom.maybe(item.options.canUserClose, () =>
|
||||||
@ -310,12 +314,15 @@ const cssToastWrapper = styled('div', `
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity ${Expirable.fadeDelay}ms;
|
transition: opacity ${Expirable.fadeDelay}ms;
|
||||||
|
|
||||||
|
&-memo {
|
||||||
|
color: ${theme.toastMemoText};
|
||||||
|
background-color: ${theme.toastMemoBg};
|
||||||
|
}
|
||||||
&-error {
|
&-error {
|
||||||
border-left: 6px solid ${theme.toastErrorBg};
|
border-left: 6px solid ${theme.toastErrorBg};
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
--icon-color: ${theme.toastErrorIcon};
|
--icon-color: ${theme.toastErrorIcon};
|
||||||
}
|
}
|
||||||
|
|
||||||
&-success {
|
&-success {
|
||||||
border-left: 6px solid ${theme.toastSuccessBg};
|
border-left: 6px solid ${theme.toastSuccessBg};
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
@ -360,6 +367,9 @@ const cssToastWrapper = styled('div', `
|
|||||||
|
|
||||||
|
|
||||||
const cssToastText = styled('div', `
|
const cssToastText = styled('div', `
|
||||||
|
.${cssToastWrapper.className}-memo & {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
`);
|
`);
|
||||||
|
|
||||||
const cssToastTitle = styled(cssToastText, `
|
const cssToastTitle = styled(cssToastText, `
|
||||||
@ -392,16 +402,20 @@ const cssToastAction = styled('div', `
|
|||||||
`);
|
`);
|
||||||
|
|
||||||
const cssToastMemos = styled('div', `
|
const cssToastMemos = styled('div', `
|
||||||
margin-top: 16px;
|
margin-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`);
|
`);
|
||||||
|
|
||||||
const cssToastMemo = styled('div', `
|
const cssToastMemo = styled('div', `
|
||||||
margin: 3px;
|
display: flex;
|
||||||
color: ${theme.text};
|
column-gap: 8px;
|
||||||
background: ${theme.notificationsPanelBodyBg};
|
align-items: center;
|
||||||
padding: 3px;
|
`);
|
||||||
|
|
||||||
|
const cssToastMemoIcon = styled(icon, `
|
||||||
|
--icon-color: ${theme.toastMemoText};
|
||||||
|
flex-shrink: 0;
|
||||||
`);
|
`);
|
||||||
|
|
||||||
const cssProgressBarWrapper = styled('div', `
|
const cssProgressBarWrapper = styled('div', `
|
||||||
|
@ -208,6 +208,8 @@ export const theme = {
|
|||||||
toastText: new CustomProp('theme-toast-text', undefined, colors.light),
|
toastText: new CustomProp('theme-toast-text', undefined, colors.light),
|
||||||
toastLightText: new CustomProp('theme-toast-text-light', undefined, colors.slate),
|
toastLightText: new CustomProp('theme-toast-text-light', undefined, colors.slate),
|
||||||
toastBg: new CustomProp('theme-toast-bg', undefined, vars.toastBg),
|
toastBg: new CustomProp('theme-toast-bg', undefined, vars.toastBg),
|
||||||
|
toastMemoText: new CustomProp('theme-toast-memo-text', undefined, colors.light),
|
||||||
|
toastMemoBg: new CustomProp('theme-toast-memo-bg', undefined, colors.dark),
|
||||||
toastErrorIcon: new CustomProp('theme-toast-error-icon', undefined, colors.error),
|
toastErrorIcon: new CustomProp('theme-toast-error-icon', undefined, colors.error),
|
||||||
toastErrorBg: new CustomProp('theme-toast-error-bg', undefined, colors.error),
|
toastErrorBg: new CustomProp('theme-toast-error-bg', undefined, colors.error),
|
||||||
toastSuccessIcon: new CustomProp('theme-toast-success-icon', undefined, colors.darkGreen),
|
toastSuccessIcon: new CustomProp('theme-toast-success-icon', undefined, colors.darkGreen),
|
||||||
|
@ -59,6 +59,8 @@ export const ThemeColors = t.iface([], {
|
|||||||
"toast-text": "string",
|
"toast-text": "string",
|
||||||
"toast-text-light": "string",
|
"toast-text-light": "string",
|
||||||
"toast-bg": "string",
|
"toast-bg": "string",
|
||||||
|
"toast-memo-text": "string",
|
||||||
|
"toast-memo-bg": "string",
|
||||||
"toast-error-icon": "string",
|
"toast-error-icon": "string",
|
||||||
"toast-error-bg": "string",
|
"toast-error-bg": "string",
|
||||||
"toast-success-icon": "string",
|
"toast-success-icon": "string",
|
||||||
|
@ -69,6 +69,8 @@ export interface ThemeColors {
|
|||||||
'toast-text': string;
|
'toast-text': string;
|
||||||
'toast-text-light': string;
|
'toast-text-light': string;
|
||||||
'toast-bg': string;
|
'toast-bg': string;
|
||||||
|
'toast-memo-text': string;
|
||||||
|
'toast-memo-bg': string;
|
||||||
'toast-error-icon': string;
|
'toast-error-icon': string;
|
||||||
'toast-error-bg': string;
|
'toast-error-bg': string;
|
||||||
'toast-success-icon': string;
|
'toast-success-icon': string;
|
||||||
|
@ -48,6 +48,8 @@ export const GristDark: ThemeColors = {
|
|||||||
'toast-text': '#FFFFFF',
|
'toast-text': '#FFFFFF',
|
||||||
'toast-text-light': '#929299',
|
'toast-text-light': '#929299',
|
||||||
'toast-bg': '#040404',
|
'toast-bg': '#040404',
|
||||||
|
'toast-memo-text': '#EFEFEF',
|
||||||
|
'toast-memo-bg': '#555563',
|
||||||
'toast-error-icon': '#D0021B',
|
'toast-error-icon': '#D0021B',
|
||||||
'toast-error-bg': '#D0021B',
|
'toast-error-bg': '#D0021B',
|
||||||
'toast-success-icon': '#009058',
|
'toast-success-icon': '#009058',
|
||||||
|
@ -48,6 +48,8 @@ export const GristLight: ThemeColors = {
|
|||||||
'toast-text': '#FFFFFF',
|
'toast-text': '#FFFFFF',
|
||||||
'toast-text-light': '#929299',
|
'toast-text-light': '#929299',
|
||||||
'toast-bg': '#040404',
|
'toast-bg': '#040404',
|
||||||
|
'toast-memo-text': '#FFFFFF',
|
||||||
|
'toast-memo-bg': '#262633',
|
||||||
'toast-error-icon': '#D0021B',
|
'toast-error-icon': '#D0021B',
|
||||||
'toast-error-bg': '#D0021B',
|
'toast-error-bg': '#D0021B',
|
||||||
'toast-success-icon': '#009058',
|
'toast-success-icon': '#009058',
|
||||||
|
Loading…
Reference in New Issue
Block a user