From ef668c2fa034304fd7bd1dc7154c8aa297320835 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 21 May 2022 11:06:35 +0100
Subject: [PATCH] Tweak design of notices

---
 app/editor/components/Styles.ts | 25 ++++++++++++++++++++-----
 shared/styles/theme.ts          |  6 +++---
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/editor/components/Styles.ts b/app/editor/components/Styles.ts
index 4e39917ddd..154870311f 100644
--- a/app/editor/components/Styles.ts
+++ b/app/editor/components/Styles.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-irregular-whitespace */
-import { lighten } from "polished";
+import { lighten, transparentize } from "polished";
 import styled from "styled-components";
 
 const EditorStyles = styled.div<{
@@ -431,10 +431,12 @@ const EditorStyles = styled.div<{
   .notice-block {
     display: flex;
     align-items: center;
-    background: ${(props) => props.theme.noticeInfoBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeInfoBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeInfoBackground};
     color: ${(props) => props.theme.noticeInfoText};
     border-radius: 4px;
-    padding: 8px 16px;
+    padding: 8px 10px 8px 8px;
     margin: 8px 0;
 
     a {
@@ -464,21 +466,34 @@ const EditorStyles = styled.div<{
     height: 24px;
     align-self: flex-start;
     margin-${(props) => (props.rtl ? "left" : "right")}: 4px;
+    color: ${(props) => props.theme.noticeInfoBackground};
   }
 
   .notice-block.tip {
-    background: ${(props) => props.theme.noticeTipBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeTipBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeTipBackground};
     color: ${(props) => props.theme.noticeTipText};
 
+    .icon {
+      color: ${(props) => props.theme.noticeTipBackground};
+    }
+
     a {
       color: ${(props) => props.theme.noticeTipText};
     }
   }
 
   .notice-block.warning {
-    background: ${(props) => props.theme.noticeWarningBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeWarningBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeWarningBackground};
     color: ${(props) => props.theme.noticeWarningText};
 
+    .icon {
+      color: ${(props) => props.theme.noticeWarningBackground};
+    }
+
     a {
       color: ${(props) => props.theme.noticeWarningText};
     }
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
index c936dd95a4..a521933c64 100644
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -81,11 +81,11 @@ export const base = {
   codePlaceholder: "#3d8fd1",
   codeInserted: "#202746",
   codeImportant: "#c94922",
-  noticeInfoBackground: colors.warmGrey,
+  noticeInfoBackground: colors.primary,
   noticeInfoText: colors.almostBlack,
-  noticeTipBackground: "#fce5bb",
+  noticeTipBackground: "#F5BE31",
   noticeTipText: colors.almostBlack,
-  noticeWarningBackground: "#ffadbf",
+  noticeWarningBackground: "#d73a49",
   noticeWarningText: colors.almostBlack,
   breakpoints,
 };