Tweak design of notices

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};
     }

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,
 };