Add success notice style (#5242

* Add success notice style

* Move quote styling closer to notices
Improving parsing of notices when pasting from other tools

shared/editor/components/Styles.ts

@@ -651,9 +651,23 @@ h6 {
   }
 }
 
+.notice-block.success {
+  background: ${transparentize(0.9, props.theme.noticeSuccessBackground)};
+  border-left: 4px solid ${props.theme.noticeSuccessBackground};
+  color: ${props.theme.noticeSuccessText};
+
+  .icon {
+    color: ${props.theme.noticeSuccessBackground};
+  }
+
+  a {
+    color: ${props.theme.noticeSuccessText};
+  }
+}
+
 blockquote {
   margin: 0;
-  padding-left: 1.5em;
+  padding: 8px 10px 8px 1.5em;
   font-style: italic;
   overflow: hidden;
   position: relative;

shared/editor/nodes/Notice.tsx

@@ -1,5 +1,5 @@
 import Token from "markdown-it/lib/token";
-import { WarningIcon, InfoIcon, StarredIcon } from "outline-icons";
+import { WarningIcon, InfoIcon, StarredIcon, DoneIcon } from "outline-icons";
 import { wrappingInputRule } from "prosemirror-inputrules";
 import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
 import * as React from "react";
@@ -14,6 +14,7 @@ export default class Notice extends Node {
     return Object.entries({
       info: this.options.dictionary.info,
       warning: this.options.dictionary.warning,
+      success: this.options.dictionary.success,
       tip: this.options.dictionary.tip,
     });
   }
@@ -47,6 +48,28 @@ export default class Notice extends Node {
               ? "tip"
               : dom.className.includes("warning")
               ? "warning"
+              : dom.className.includes("success")
+              ? "success"
+              : undefined,
+          }),
+        },
+        // Quill editor parsing
+        {
+          tag: "div.ql-hint",
+          preserveWhitespace: "full",
+          getAttrs: (dom: HTMLDivElement) => ({
+            style: dom.dataset.hint,
+          }),
+        },
+        // GitBook parsing
+        {
+          tag: "div.alert.theme-admonition",
+          preserveWhitespace: "full",
+          getAttrs: (dom: HTMLDivElement) => ({
+            style: dom.className.includes("warning")
+              ? "warning"
+              : dom.className.includes("success")
+              ? "success"
               : undefined,
           }),
         },
@@ -75,6 +98,8 @@ export default class Notice extends Node {
             component = <StarredIcon />;
           } else if (node.attrs.style === "warning") {
             component = <WarningIcon />;
+          } else if (node.attrs.style === "success") {
+            component = <DoneIcon />;
           } else {
             component = <InfoIcon />;
           }

shared/i18n/locales/en_US/translation.json

@@ -299,6 +299,8 @@
   "Show source": "Show source",
   "Warning": "Warning",
   "Warning notice": "Warning notice",
+  "Success": "Success",
+  "Success notice": "Success notice",
   "Current date": "Current date",
   "Current time": "Current time",
   "Current date and time": "Current date and time",

shared/styles/theme.ts

@@ -38,7 +38,7 @@ const defaultColors: Colors = {
     purple: "#9E5CF7",
     blue: "#3633FF",
     marine: "#2BC2FF",
-    green: "#42DED1",
+    green: "#3ad984",
     yellow: "#F5BE31",
   },
 };
@@ -90,6 +90,8 @@ const buildBaseTheme = (input: Partial<Colors>) => {
     noticeTipText: colors.almostBlack,
     noticeWarningBackground: "#d73a49",
     noticeWarningText: colors.almostBlack,
+    noticeSuccessBackground: colors.brand.green,
+    noticeSuccessText: colors.almostBlack,
     tableSelectedBackground: transparentize(0.8, colors.accent),
     breakpoints,
     ...colors,
@@ -230,6 +232,7 @@ export const buildDarkTheme = (input: Partial<Colors>): DefaultTheme => {
     noticeInfoText: colors.white,
     noticeTipText: colors.white,
     noticeWarningText: colors.white,
+    noticeSuccessText: colors.white,
     progressBarBackground: colors.slate,
     scrollbarBackground: colors.black,
     scrollbarThumb: colors.lightBlack,