diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index 917c3b42..00ae796c 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -82,6 +82,7 @@ const Heading = styled.h3` margin-bottom: 0.25em; overflow: hidden; white-space: nowrap; + color: ${props => props.theme.text}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; `; diff --git a/app/components/Editor.js b/app/components/Editor.js index de042ebe..4495d54b 100644 --- a/app/components/Editor.js +++ b/app/components/Editor.js @@ -88,10 +88,16 @@ const StyledEditor = styled(RichMarkdownEditor)` transition: ${props => props.theme.backgroundTransition}; } + .notice-block.tip, + .notice-block.warning { + font-weight: 500; + } + p { a { color: ${props => props.theme.link}; border-bottom: 1px solid ${props => lighten(0.5, props.theme.link)}; + text-decoration: none !important; font-weight: 500; &:hover { diff --git a/app/scenes/KeyboardShortcuts.js b/app/scenes/KeyboardShortcuts.js index ca853ec8..86e008c4 100644 --- a/app/scenes/KeyboardShortcuts.js +++ b/app/scenes/KeyboardShortcuts.js @@ -139,6 +139,10 @@ function KeyboardShortcuts() { {"```"} + + {":::"} + + _italic_ diff --git a/package.json b/package.json index 55e727d1..0ddc2dc6 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "mobx-react": "^5.4.2", "natural-sort": "^1.0.0", "nodemailer": "^4.4.0", - "outline-icons": "^1.18.0", + "outline-icons": "^1.19.0", "oy-vey": "^0.10.0", "pg": "^6.1.5", "pg-hstore": "2.3.2", @@ -141,7 +141,7 @@ "react-portal": "^4.0.0", "react-router-dom": "^5.1.2", "react-waypoint": "^9.0.2", - "rich-markdown-editor": "^10.4.0-1", + "rich-markdown-editor": "^10.4.0", "semver": "^7.3.2", "sequelize": "^5.21.1", "sequelize-cli": "^5.5.0", @@ -191,4 +191,4 @@ "js-yaml": "^3.13.1" }, "version": "0.45.0" -} +} \ No newline at end of file diff --git a/server/onboarding/πŸ“ Our Editor.md b/server/onboarding/πŸ“ Our Editor.md index 7fe98ff6..f397b9a1 100644 --- a/server/onboarding/πŸ“ Our Editor.md +++ b/server/onboarding/πŸ“ Our Editor.md @@ -6,7 +6,10 @@ If you’re comfortable writing markdown then all of the shortcuts you are used ![The formatting toolbar](/images/screenshots/formatting-toolbar.png) -*Tip:* You can also paste markdown or html from elsewhere directly into a document. +:::info +You can also paste markdown or html from elsewhere directly into a document. +::: + ## Rich documents diff --git a/server/onboarding/πŸš€ Integrations & API.md b/server/onboarding/πŸš€ Integrations & API.md index 7855d133..142fcf13 100644 --- a/server/onboarding/πŸš€ Integrations & API.md +++ b/server/onboarding/πŸš€ Integrations & API.md @@ -4,7 +4,10 @@ Outline supports many of the most popular tools on the market without any additi Our integration code is also [open-source](https://github.com/outline/outline) and we encourage third party developers and the community to build support for additional tools! -*Tip:* Most integrations work by simply pasting a link from a supported service into a document. +:::info +Most integrations work by simply pasting a link from a supported service into a document. +::: + ## Slack diff --git a/shared/styles/globals.js b/shared/styles/globals.js index 70cbd8e5..fd43cfa7 100644 --- a/shared/styles/globals.js +++ b/shared/styles/globals.js @@ -53,7 +53,6 @@ export default createGlobalStyle` line-height: 1.25; margin-top: 1em; margin-bottom: 0.5em; - color: ${props => props.theme.text}; } h1 { font-size: 2.25em; } h2 { font-size: 1.5em; } diff --git a/shared/styles/theme.js b/shared/styles/theme.js index 305a0053..a253e080 100644 --- a/shared/styles/theme.js +++ b/shared/styles/theme.js @@ -26,10 +26,19 @@ const colors = { yellow: "#FBCA04", warmGrey: "#EDF2F7", - danger: "#D0021B", + danger: "#ff476f", warning: "#f08a24", success: "#2f3336", info: "#a0d3e8", + + brand: { + red: "#FF5C80", + pink: "#FF4DFA", + purple: "#9E5CF7", + blue: "#3633FF", + marine: "#2BC2FF", + green: "#42DED1", + }, }; const spacing = { @@ -81,6 +90,11 @@ export const base = { blockToolbarHoverBackground: colors.slateLight, blockToolbarDivider: colors.slateLight, + noticeTipBackground: colors.brand.purple, + noticeTipText: colors.white, + noticeWarningBackground: colors.danger, + noticeWarningText: colors.white, + breakpoints: { mobile: 0, // targeting all devices tablet: 737, // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode) @@ -137,6 +151,9 @@ export const light = { codeBorder: colors.smokeDark, embedBorder: "#DDD #DDD #CCC", horizontalRule: colors.smokeDark, + + noticeInfoBackground: colors.warmGrey, + noticeInfoText: colors.almostBlack, }; export const dark = { @@ -189,6 +206,9 @@ export const dark = { codeString: "#3d8fd1", embedBorder: colors.black50, horizontalRule: darken(0.2, colors.slate), + + noticeInfoBackground: colors.white10, + noticeInfoText: colors.almostWhite, }; export default light; diff --git a/yarn.lock b/yarn.lock index 7373bfae..4323beb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6432,6 +6432,11 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +markdown-it-container@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b" + integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw== + markdown-it-mark@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/markdown-it-mark/-/markdown-it-mark-3.0.0.tgz#27c3e39ef3cc310b2dde5375082c9fa912983cda" @@ -7166,10 +7171,10 @@ osenv@^0.1.4: os-homedir "^1.0.0" os-tmpdir "^1.0.0" -outline-icons@^1.15.0, outline-icons@^1.18.0: - version "1.18.0" - resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.18.0.tgz#2f128d668b0874725b5c0656a04fd73a7f8fe418" - integrity sha512-odEYBLN+zFcTDhfs4af2RHUGneQBYbVgaBuI/I30BLaJQsKT2jBw2Shjie/HR8MYpZtgMwixP51XPPlGBSIqgw== +outline-icons@^1.19.0, outline-icons@^1.19.1: + version "1.19.1" + resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.19.1.tgz#5251b966ae9987b18f060b58ce469d248c2313aa" + integrity sha512-YeGLDG7KgBvrDy+WOQUqN8rD3qO5u524E0Wj6ejaWNQ8/1ou6kkUrx65mk8LtESfKLMWZHuQG/u6onurY9rKIw== oy-vey@^0.10.0: version "0.10.0" @@ -8599,15 +8604,16 @@ retry-as-promised@^3.2.0: dependencies: any-promise "^1.3.0" -rich-markdown-editor@^10.4.0-1: - version "10.4.0-1" - resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0-1.tgz#1f5dc63262b0bcae4d94e83ec9076dd229a8e199" - integrity sha512-donV4yFbS9fCdWhWYI70xo+hbkxdBbYGJKEg3NcnhkdZ7NbE6Cn4R3JmSdg7BpBgIM/7H+UMWqUV5M9vJHaLHQ== +rich-markdown-editor@^10.4.0: + version "10.4.0" + resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0.tgz#0a31401cf3f3356c0f365607fba0fd28a8b05da4" + integrity sha512-vLghzLnat13TE7xbY2vOENoH3iifO8Z+J8FQ0W2SP4wcL6pqwgMvDSsmVKuEEbh5E9zRwAcsqFybH985Zqg1tQ== dependencies: copy-to-clipboard "^3.0.8" lodash "^4.17.11" + markdown-it-container "^3.0.0" markdown-it-mark "^3.0.0" - outline-icons "^1.15.0" + outline-icons "^1.19.1" prismjs "^1.19.0" prosemirror-commands "^1.1.4" prosemirror-dropcursor "^1.3.2"