From 9e009bbab99c8c48794fd87131592948fb409237 Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Mon, 9 Jan 2023 00:23:52 -0500
Subject: [PATCH] (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
---
 app/client/ui/NotifyUI.ts       | 28 +++++++++++++++++++++-------
 app/client/ui2018/cssVars.ts    |  2 ++
 app/common/ThemePrefs-ti.ts     |  2 ++
 app/common/ThemePrefs.ts        |  2 ++
 app/common/themes/GristDark.ts  |  2 ++
 app/common/themes/GristLight.ts |  2 ++
 6 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/client/ui/NotifyUI.ts b/app/client/ui/NotifyUI.ts
index 7236c50a..ba3c7151 100644
--- a/app/client/ui/NotifyUI.ts
+++ b/app/client/ui/NotifyUI.ts
@@ -87,6 +87,7 @@ function buildNotificationDom(item: Notification, options: IBeaconOpenOptions) {
   return cssToastWrapper(testId('toast-wrapper'),
     cssToastWrapper.cls(use => `-${use(item.status)}`),
     cssToastWrapper.cls(`-${item.options.level}`),
+    cssToastWrapper.cls('-memo', item.options.memos.length > 0),
     cssToastWrapper.cls(hasLeftIcon ? '-left-icon' : ''),
     item.options.title ? null : iconElement,
     cssToastBody(
@@ -98,7 +99,10 @@ function buildNotificationDom(item: Notification, options: IBeaconOpenOptions) {
         item.options.actions.map((action) => buildAction(action, item, options))
       ) : null,
       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,
     ),
     dom.maybe(item.options.canUserClose, () =>
@@ -310,12 +314,15 @@ const cssToastWrapper = styled('div', `
   opacity: 1;
   transition: opacity ${Expirable.fadeDelay}ms;
 
+  &-memo {
+    color: ${theme.toastMemoText};
+    background-color: ${theme.toastMemoBg};
+  }
   &-error {
     border-left: 6px solid ${theme.toastErrorBg};
     padding-left: 6px;
     --icon-color: ${theme.toastErrorIcon};
   }
-
   &-success {
     border-left: 6px solid ${theme.toastSuccessBg};
     padding-left: 6px;
@@ -360,6 +367,9 @@ const cssToastWrapper = styled('div', `
 
 
 const cssToastText = styled('div', `
+  .${cssToastWrapper.className}-memo & {
+    font-weight: 700;
+  }
 `);
 
 const cssToastTitle = styled(cssToastText, `
@@ -392,16 +402,20 @@ const cssToastAction = styled('div', `
 `);
 
 const cssToastMemos = styled('div', `
-  margin-top: 16px;
+  margin-top: 8px;
   display: flex;
   flex-direction: column;
 `);
 
 const cssToastMemo = styled('div', `
-  margin: 3px;
-  color: ${theme.text};
-  background: ${theme.notificationsPanelBodyBg};
-  padding: 3px;
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+`);
+
+const cssToastMemoIcon = styled(icon, `
+  --icon-color: ${theme.toastMemoText};
+  flex-shrink: 0;
 `);
 
 const cssProgressBarWrapper = styled('div', `
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index d2d88abd..df5eff51 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -208,6 +208,8 @@ export const theme = {
   toastText: new CustomProp('theme-toast-text', undefined, colors.light),
   toastLightText: new CustomProp('theme-toast-text-light', undefined, colors.slate),
   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),
   toastErrorBg: new CustomProp('theme-toast-error-bg', undefined, colors.error),
   toastSuccessIcon: new CustomProp('theme-toast-success-icon', undefined, colors.darkGreen),
diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts
index 731ec39f..c4df2c01 100644
--- a/app/common/ThemePrefs-ti.ts
+++ b/app/common/ThemePrefs-ti.ts
@@ -59,6 +59,8 @@ export const ThemeColors = t.iface([], {
   "toast-text": "string",
   "toast-text-light": "string",
   "toast-bg": "string",
+  "toast-memo-text": "string",
+  "toast-memo-bg": "string",
   "toast-error-icon": "string",
   "toast-error-bg": "string",
   "toast-success-icon": "string",
diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
index e9a3c17a..296d69f7 100644
--- a/app/common/ThemePrefs.ts
+++ b/app/common/ThemePrefs.ts
@@ -69,6 +69,8 @@ export interface ThemeColors {
   'toast-text': string;
   'toast-text-light': string;
   'toast-bg': string;
+  'toast-memo-text': string;
+  'toast-memo-bg': string;
   'toast-error-icon': string;
   'toast-error-bg': string;
   'toast-success-icon': string;
diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
index ada133e3..1a074e8a 100644
--- a/app/common/themes/GristDark.ts
+++ b/app/common/themes/GristDark.ts
@@ -48,6 +48,8 @@ export const GristDark: ThemeColors = {
   'toast-text': '#FFFFFF',
   'toast-text-light': '#929299',
   'toast-bg': '#040404',
+  'toast-memo-text': '#EFEFEF',
+  'toast-memo-bg': '#555563',
   'toast-error-icon': '#D0021B',
   'toast-error-bg': '#D0021B',
   'toast-success-icon': '#009058',
diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
index 111b024d..46abb9f4 100644
--- a/app/common/themes/GristLight.ts
+++ b/app/common/themes/GristLight.ts
@@ -48,6 +48,8 @@ export const GristLight: ThemeColors = {
   'toast-text': '#FFFFFF',
   'toast-text-light': '#929299',
   'toast-bg': '#040404',
+  'toast-memo-text': '#FFFFFF',
+  'toast-memo-bg': '#262633',
   'toast-error-icon': '#D0021B',
   'toast-error-bg': '#D0021B',
   'toast-success-icon': '#009058',