diff --git a/package.json b/package.json index 176b7bc08..2e0394235 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "fast-deep-equal": "3.1.3", "flowchart.js": "1.14.1", "fork-awesome": "1.1.7", - "github-markdown-css": "4.0.0", "highlight.js": "10.2.0", "i18next": "19.7.0", "i18next-browser-languagedetector": "6.0.1", diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx index 9552c2666..ca9d600d3 100644 --- a/src/components/application-loader/loading-screen.tsx +++ b/src/components/application-loader/loading-screen.tsx @@ -9,8 +9,8 @@ export interface LoadingScreenProps { export const LoadingScreen: React.FC = ({ failedTitle }) => { return ( -
-
+
+
diff --git a/src/components/common/apply-dark-mode/apply-dark-mode.tsx b/src/components/common/apply-dark-mode/apply-dark-mode.tsx new file mode 100644 index 000000000..e198b2070 --- /dev/null +++ b/src/components/common/apply-dark-mode/apply-dark-mode.tsx @@ -0,0 +1,20 @@ +import React, { useEffect } from 'react' +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../../redux' + +export const ApplyDarkMode: React.FC = () => { + const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode) + + useEffect(() => { + if (darkModeActivated) { + window.document.body.classList.add('dark') + } else { + window.document.body.classList.remove('dark') + } + return () => { + window.document.body.classList.remove('dark') + } + }, [darkModeActivated]) + + return null +} diff --git a/src/components/common/motd-banner/motd-banner.tsx b/src/components/common/motd-banner/motd-banner.tsx index 210c96ff9..21f4fddd0 100644 --- a/src/components/common/motd-banner/motd-banner.tsx +++ b/src/components/common/motd-banner/motd-banner.tsx @@ -19,7 +19,7 @@ export const MotdBanner: React.FC = () => { return ( - + {bannerState.text} - -
  • - -
    • -
  • - -
    • - + + {tabContent()} diff --git a/src/components/editor/app-bar/help-button/shortcuts.tsx b/src/components/editor/app-bar/help-button/shortcuts.tsx index 2be0cd888..199256bd5 100644 --- a/src/components/editor/app-bar/help-button/shortcuts.tsx +++ b/src/components/editor/app-bar/help-button/shortcuts.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Fragment } from 'react' import { Card, ListGroup, Row } from 'react-bootstrap' import { Trans } from 'react-i18next' import { isMac } from '../../utils' @@ -25,14 +25,19 @@ export const Shortcut: React.FC = () => { {Object.keys(shortcutMap).map(category => { return ( - + {category} - {Object.entries(shortcutMap[category]).map(([functionName, shortcut]) => { + {Object.entries(shortcutMap[category]).map(([functionName, shortcuts]) => { return ( - {shortcut} + + { + shortcuts.map((shortcut, shortcutIndex) => + {shortcut}) + } + ) })} diff --git a/src/components/editor/app-bar/sync-scroll-button/sync-scroll-button.tsx b/src/components/editor/app-bar/sync-scroll-button/sync-scroll-button.tsx deleted file mode 100644 index 6bf1315df..000000000 --- a/src/components/editor/app-bar/sync-scroll-button/sync-scroll-button.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useCallback } from 'react' -import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' -import { useTranslation } from 'react-i18next' -import { useSelector } from 'react-redux' -import { ApplicationState } from '../../../../redux' -import { setEditorSyncScroll } from '../../../../redux/editor/methods' -import disabledScroll from './disabledScroll.svg' -import enabledScroll from './enabledScroll.svg' - -export const SyncScrollButton: React.FC = () => { - const syncScroll: boolean = useSelector((state: ApplicationState) => state.editorConfig.syncScroll) - const translation = syncScroll ? 'editor.appBar.syncScroll.enable' : 'editor.appBar.syncScroll.disable' - const onClick = useCallback(() => { - setEditorSyncScroll(!syncScroll) - }, [syncScroll]) - - const { t } = useTranslation() - - return ( - - - {t(translation)}/ - - - ) -} diff --git a/src/components/editor/app-bar/sync-scroll-button/buttonIcon.svg b/src/components/editor/app-bar/sync-scroll-buttons/buttonIcon.svg similarity index 100% rename from src/components/editor/app-bar/sync-scroll-button/buttonIcon.svg rename to src/components/editor/app-bar/sync-scroll-buttons/buttonIcon.svg diff --git a/src/components/editor/app-bar/sync-scroll-button/disabledScroll.svg b/src/components/editor/app-bar/sync-scroll-buttons/disabledScroll.svg similarity index 100% rename from src/components/editor/app-bar/sync-scroll-button/disabledScroll.svg rename to src/components/editor/app-bar/sync-scroll-buttons/disabledScroll.svg diff --git a/src/components/editor/app-bar/sync-scroll-button/enabledScroll.svg b/src/components/editor/app-bar/sync-scroll-buttons/enabledScroll.svg similarity index 100% rename from src/components/editor/app-bar/sync-scroll-button/enabledScroll.svg rename to src/components/editor/app-bar/sync-scroll-buttons/enabledScroll.svg diff --git a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss new file mode 100644 index 000000000..c62bce3d9 --- /dev/null +++ b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss @@ -0,0 +1,33 @@ +.sync-scroll-buttons { + svg { + width: 20px; + height: 20px; + } + .btn { + svg g { + @import "../../../../style/light.scss"; + fill: $secondary; + } + + &.active, &:hover { + svg g { + @import "../../../../style/light.scss"; + fill: $light; + } + } + + body.dark & { + svg g { + @import "../../../../style/dark.scss"; + fill: $secondary; + } + + &.active, &:hover { + svg g { + @import "../../../../style/dark.scss"; + fill: $light; + } + } + } + } +} diff --git a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx new file mode 100644 index 000000000..0e1b29791 --- /dev/null +++ b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' +import { useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../../../redux' +import { setEditorSyncScroll } from '../../../../redux/editor/methods' +import { ReactComponent as DisabledScrollIcon } from './disabledScroll.svg' +import { ReactComponent as EnabledScrollIcon } from './enabledScroll.svg' +import './sync-scroll-buttons.scss' + +export const SyncScrollButtons: React.FC = () => { + const syncScroll: boolean = useSelector((state: ApplicationState) => state.editorConfig.syncScroll) + const { t } = useTranslation() + + return ( + + setEditorSyncScroll(true)} value={true} + > + + + setEditorSyncScroll(false)} value={false} + > + + + + ) +} diff --git a/src/components/editor/document-bar/connection-indicator/connection-indicator.scss b/src/components/editor/document-bar/connection-indicator/connection-indicator.scss deleted file mode 100644 index ab38ea1f5..000000000 --- a/src/components/editor/document-bar/connection-indicator/connection-indicator.scss +++ /dev/null @@ -1,3 +0,0 @@ -.upper-case { - text-transform: uppercase; -} diff --git a/src/components/editor/document-bar/connection-indicator/connection-indicator.tsx b/src/components/editor/document-bar/connection-indicator/connection-indicator.tsx index b9be3a3b0..8304b5290 100644 --- a/src/components/editor/document-bar/connection-indicator/connection-indicator.tsx +++ b/src/components/editor/document-bar/connection-indicator/connection-indicator.tsx @@ -2,14 +2,13 @@ import React from 'react' import { Dropdown } from 'react-bootstrap' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { ActiveIndicatorStatus } from './active-indicator' -import './connection-indicator.scss' import { UserLine } from './user-line' const ConnectionIndicator: React.FC = () => { const userOnline = 2 return ( - + {userOnline} Online diff --git a/src/components/editor/document-bar/revisions/revision-modal.tsx b/src/components/editor/document-bar/revisions/revision-modal.tsx index 8c9031ba4..f4586b864 100644 --- a/src/components/editor/document-bar/revisions/revision-modal.tsx +++ b/src/components/editor/document-bar/revisions/revision-modal.tsx @@ -2,9 +2,11 @@ import React, { useEffect, useRef, useState } from 'react' import { Alert, Col, ListGroup, Modal, Row, Button } from 'react-bootstrap' import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer' import { Trans, useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' import { useParams } from 'react-router' import { getAllRevisions, getRevision, Revision, RevisionListEntry } from '../../../../api/revisions' import { UserResponse } from '../../../../api/users/types' +import { ApplicationState } from '../../../../redux' import { CommonModal, CommonModalProps } from '../../../common/modals/common-modal' import { ShowIf } from '../../../common/show-if/show-if' import { RevisionButtonProps } from './revision-button' @@ -20,6 +22,7 @@ export const RevisionModal: React.FC = ( const [error, setError] = useState(false) const revisionAuthorListMap = useRef(new Map()) const revisionCacheMap = useRef(new Map()) + const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode) const { id } = useParams<{ id: string }>() useEffect(() => { @@ -81,7 +84,7 @@ export const RevisionModal: React.FC = ( newValue={noteContent} splitView={false} compareMethod={DiffMethod.WORDS} - useDarkTheme={false} + useDarkTheme={darkModeEnabled} />     diff --git a/src/components/editor/editor-pane/editor-pane.scss b/src/components/editor/editor-pane/editor-pane.scss index c9a928476..efafde729 100644 --- a/src/components/editor/editor-pane/editor-pane.scss +++ b/src/components/editor/editor-pane/editor-pane.scss @@ -12,8 +12,3 @@ font-size: 18px; height: 100%; } - -.btn-toolbar .btn { - padding: 0.1875rem 0.5rem; - min-width: 30px; -} diff --git a/src/components/editor/editor-pane/tool-bar/tool-bar.scss b/src/components/editor/editor-pane/tool-bar/tool-bar.scss index f9914ebcf..bc6f9f845 100644 --- a/src/components/editor/editor-pane/tool-bar/tool-bar.scss +++ b/src/components/editor/editor-pane/tool-bar/tool-bar.scss @@ -1,5 +1,11 @@ .btn-toolbar { - border: 1px solid #ededed; + border-bottom: 1px solid #ededed; + border-top: 1px solid #ededed; + + .btn { + padding: 0.1875rem 0.5rem; + min-width: 30px; + } .btn-group:not(:last-of-type)::after { background-color: #e2e6ea; diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 6d5bbc6e0..e0aa107ed 100644 --- a/src/components/editor/editor.tsx +++ b/src/components/editor/editor.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux' import useMedia from 'use-media' import { ApplicationState } from '../../redux' import { setEditorMode } from '../../redux/editor/methods' +import { ApplyDarkMode } from '../common/apply-dark-mode/apply-dark-mode' import { DocumentTitle } from '../common/document-title/document-title' import { MotdBanner } from '../common/motd-banner/motd-banner' import { AppBar } from './app-bar/app-bar' @@ -109,6 +110,7 @@ export const Editor: React.FC = () => { return ( +
    diff --git a/src/components/editor/editorTestContent.ts b/src/components/editor/editorTestContent.ts index ee973ee14..f9801a9f0 100644 --- a/src/components/editor/editorTestContent.ts +++ b/src/components/editor/editorTestContent.ts @@ -119,8 +119,21 @@ https://asciinema.org/a/117928 ## Code highlighting \`\`\`javascript= - -let a = 1 +var s = "JavaScript syntax highlighting"; +alert(s); +function $initHighlight(block, cls) { + try { + if (cls.search(/\\bno\\-highlight\\b/) != -1) + return process(block, true, 0x0F) + + ' class=""'; + } catch (e) { + /* handle exception */ + } + for (var i = 0 / 2; i < classes.length; i++) { + if (checkCondition(classes[i]) === undefined) + return /\\d+[\\s/]/g; + } +} \`\`\` ## PlantUML diff --git a/src/components/editor/splitter/split-divider/split-divider.scss b/src/components/editor/splitter/split-divider/split-divider.scss index eea29308c..a0b9e4324 100644 --- a/src/components/editor/splitter/split-divider/split-divider.scss +++ b/src/components/editor/splitter/split-divider/split-divider.scss @@ -4,4 +4,9 @@ z-index: 1; cursor: col-resize; box-shadow: 3px 0 6px #e7e7e7; + + body.dark & { + box-shadow: 3px 0 6px #7b7b7b; + } } + diff --git a/src/components/editor/table-of-contents/table-of-contents.scss b/src/components/editor/table-of-contents/table-of-contents.scss index 561789529..f239fc101 100644 --- a/src/components/editor/table-of-contents/table-of-contents.scss +++ b/src/components/editor/table-of-contents/table-of-contents.scss @@ -3,19 +3,22 @@ max-width: 200px; overflow-y: auto; overflow-x: hidden; + &.sticky { position: fixed; } - >ul>li { - >a { + > ul > li { + > a { padding: 4px 20px; } - >ul>li { + + > ul > li { > a { padding: 1px 0 1px 30px; } - >ul>li { + + > ul > li { > a { padding: 1px 0 1px 38px; } @@ -49,14 +52,15 @@ } } } -.markdown-toc-sidebar-button { - position: fixed; - right: 40px; - bottom: 30px; - &>.dropup { - position: sticky; - bottom: 20px; - right: 0; - } +.markdown-toc-sidebar-button { + position: fixed; + right: 40px; + bottom: 30px; + + & > .dropup { + position: sticky; + bottom: 20px; + right: 0; + } } diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx index b8b5d4124..dff361599 100644 --- a/src/components/error-boundary/error-boundary.tsx +++ b/src/components/error-boundary/error-boundary.tsx @@ -32,8 +32,8 @@ export class ErrorBoundary extends Component { render (): ReactElement | undefined | null | string | number | boolean | Record | ReactNodeArray { if (this.state.hasError) { return ( - -
    + +

    An unknown error occurred

    Don't worry, this happens sometimes. If this is the first time you see this page then try reloading the app.

    If you can reproduce this error, then we would be glad if you diff --git a/src/components/history-page/entry-menu/entry-menu.scss b/src/components/history-page/entry-menu/entry-menu.scss index d48993a19..f94e809e5 100644 --- a/src/components/history-page/entry-menu/entry-menu.scss +++ b/src/components/history-page/entry-menu/entry-menu.scss @@ -14,8 +14,7 @@ } .dropup .dropdown-toggle, .dropdown-toggle { - &.no-arrow::after { - content: initial; - } + &.no-arrow::after { + content: initial; + } } - diff --git a/src/components/landing-layout/footer/footer.tsx b/src/components/landing-layout/footer/footer.tsx index 079155ec2..b427aa3fe 100644 --- a/src/components/landing-layout/footer/footer.tsx +++ b/src/components/landing-layout/footer/footer.tsx @@ -5,7 +5,7 @@ import { SocialLink } from './social-links' export const Footer: React.FC = () => { return ( -