Add success notice style (#5242

* Add success notice style

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

app/editor/menus/block.tsx

@@ -19,6 +19,7 @@ import {
   ClockIcon,
   CalendarIcon,
   MathIcon,
+  DoneIcon,
 } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
@@ -116,6 +117,7 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "blockquote",
       title: dictionary.quote,
       icon: <BlockQuoteIcon />,
+      keywords: "blockquote pullquote",
       shortcut: `${metaDisplay} ]`,
     },
     {
@@ -173,6 +175,13 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       keywords: "notice card information",
       attrs: { style: "info" },
     },
+    {
+      name: "container_notice",
+      title: dictionary.successNotice,
+      icon: <DoneIcon />,
+      keywords: "notice card success",
+      attrs: { style: "success" },
+    },
     {
       name: "container_notice",
       title: dictionary.warningNotice,

app/hooks/useDictionary.ts

@@ -76,6 +76,8 @@ export default function useDictionary() {
       showSource: t("Show source"),
       warning: t("Warning"),
       warningNotice: t("Warning notice"),
+      success: t("Success"),
+      successNotice: t("Success notice"),
       insertDate: t("Current date"),
       insertTime: t("Current time"),
       insertDateTime: t("Current date and time"),

app/typings/styled-components.d.ts

@@ -53,6 +53,8 @@ declare module "styled-components" {
     noticeTipText: string;
     noticeWarningBackground: string;
     noticeWarningText: string;
+    noticeSuccessBackground: string;
+    noticeSuccessText: string;
   }
 
   interface Colors {