diff --git a/src/components/modals/ReleaseNotes.js b/src/components/modals/ReleaseNotes.js index e77cf74f..a694af32 100644 --- a/src/components/modals/ReleaseNotes.js +++ b/src/components/modals/ReleaseNotes.js @@ -14,7 +14,121 @@ const Notes = styled(Box).attrs({ fontSize: 4, color: 'smoke', flow: 4, -})`` +})` + ul, + ol { + padding-left: 20px; + } + + p { + margin: 1em 0; + } + + code, + pre { + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + } + + code { + padding: 0.2em 0.4em; + font-size: 0.9em; + background-color: ${p => p.theme.colors.lightGrey}; + border-radius: 3px; + } + + pre { + word-wrap: normal; + + code { + word-break: normal; + white-space: pre; + background: transparent; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: ${p => p.theme.colors.dark}; + font-weight: bold; + } + + h1 { + margin: 0.67em 0; + font-size: 1.17em; + } + + h2 { + margin: 0.83em 0; + } + + h3 { + margin: 1em 0; + font-size: 0.83em; + } + + h4 { + margin: 1.33em 0; + font-size: 0.67em; + } + + h5 { + margin: 1.67em 0; + font-size: 0.67em; + } + + h6 { + margin: 2.33em 0; + font-size: 0.67em; + } + + img { + max-width: 100%; + } + + hr { + height: 1px; + border: none; + background-color: ${p => p.theme.colors.fog}; + } + + blockquote { + padding: 0 1em; + border-left: 0.25em solid #dfe2e5; + } + + table { + width: 100%; + overflow: auto; + border-collapse: collapse; + + th { + font-weight: bold; + } + + th, + td { + padding: 6px 13px; + border: 1px solid #dfe2e5; + } + + tr { + background-color: #fff; + border-top: 1px solid #c6cbd1; + } + + tr:nth-child(2n) { + background-color: #f6f8fa; + } + } + + input[type='checkbox'] { + margin-right: 0.5em; + } +` const Title = styled(Text).attrs({ ff: 'Museo Sans',