From 0993372290d373d5e49a71f78503e37eb1ce8ff8 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Wed, 31 May 2023 18:36:47 +0200 Subject: [PATCH] fix: replace dark mode hack with bootstrap's own dark mode Signed-off-by: Tilman Vatteroth --- frontend/global-styles/dark.scss | 30 ---- frontend/global-styles/highlight-js.scss | 2 +- frontend/global-styles/index.scss | 4 - frontend/global-styles/variables.dark.scss | 134 ------------------ frontend/global-styles/variables.light.scss | 7 - .../loading-screen/loading-screen.tsx | 2 +- .../common/fields/display-name-field.tsx | 1 - .../common/fields/new-password-field.tsx | 1 - .../common/fields/password-again-field.tsx | 1 - .../common/fields/username-field.tsx | 1 - .../highlighted-code/highlighted-code.tsx | 4 +- .../__snapshots__/external-link.spec.tsx.snap | 8 +- .../__snapshots__/internal-link.spec.tsx.snap | 8 +- .../translated-external-link.spec.tsx.snap | 2 +- .../translated-internal-link.spec.tsx.snap | 2 +- .../components/common/links/external-link.tsx | 9 +- .../components/common/links/internal-link.tsx | 9 +- .../__snapshots__/common-modal.spec.tsx.snap | 16 +-- .../deletion-moadal.spec.tsx.snap | 8 +- .../components/common/modals/common-modal.tsx | 2 +- .../common/modals/deletion-modal.tsx | 2 +- .../__snapshots__/motd-modal.spec.tsx.snap | 2 +- .../common/motd-modal/motd-modal.tsx | 2 +- ...nd-additional-configuration-to-renderer.ts | 15 +- .../renderer-iframe/renderer-iframe.tsx | 9 +- .../common/renderer-iframe/style.module.scss | 9 ++ .../editor-page/app-bar/app-bar.tsx | 6 +- .../app-bar/cheatsheet/cheatsheet-button.tsx | 4 +- .../cheatsheet-in-new-tab-button.tsx | 5 +- .../cheatsheet/read-more-link-item.tsx | 2 +- .../app-bar/help-button/help-button.tsx | 4 +- .../app-bar/read-only-mode-button.tsx | 8 +- .../editor-page/app-bar/slide-mode-button.tsx | 4 +- .../editor-pane/status-bar/status-bar.tsx | 2 +- .../emoji-picker/emoji-picker.module.scss | 8 +- .../editor-pane/tool-bar/tool-bar.module.scss | 3 - .../editor-pane/tool-bar/tool-bar.tsx | 3 +- .../editor-pane/tool-bar/toolbar-button.tsx | 3 +- .../sidebar-button/sidebar-button.module.scss | 2 +- .../sidebar/style/sidebar.module.scss | 4 +- .../__snapshots__/splitter.spec.tsx.snap | 44 +++--- .../split-divider/split-divider.module.scss | 13 +- .../splitter/split-divider/split-divider.tsx | 16 ++- .../history-page/entry-menu/entry-menu.tsx | 2 +- .../history-card/history-card.tsx | 22 +-- .../history-table/history-table-row.tsx | 4 +- .../history-table/history-table.tsx | 5 +- .../history-toolbar/clear-history-button.tsx | 2 +- .../history-toolbar/export-history-button.tsx | 2 +- .../history-refresh-button.tsx | 2 +- .../history-toolbar/history-toolbar.tsx | 2 +- .../history-view-mode-toggle-button.tsx | 4 +- .../history-toolbar/import-history-button.tsx | 2 +- .../history-page/pin-button/pin-button.tsx | 2 +- .../history-page/sort-button/sort-button.tsx | 2 +- .../intro-page/intro-custom-content.tsx | 2 - .../landing-layout/footer/footer.tsx | 2 +- .../footer/version-info/version-info-link.tsx | 7 +- .../landing-layout/landing-layout.tsx | 15 +- .../navigation/header-bar/header-bar.tsx | 2 +- .../header-bar/header-nav-link.module.scss | 6 +- .../navigation/header-bar/header-nav-link.tsx | 17 ++- .../settings-dialog/settings-button.tsx | 11 +- .../login-page/auth/fields/password-field.tsx | 1 - .../login-page/auth/fields/username-field.tsx | 1 - .../components/login-page/auth/via-local.tsx | 2 +- .../image-placeholder.module.scss | 2 +- .../image-placeholder/image-placeholder.tsx | 2 +- .../dark-mode/use-apply-dark-mode-style.ts | 11 +- .../use-outline-button-variant.spec.tsx | 29 ++++ .../dark-mode/use-outline-button-variant.ts | 10 ++ frontend/src/pages/_app.tsx | 1 - frontend/src/pages/login.tsx | 2 +- frontend/src/pages/n/[noteId].tsx | 3 + frontend/src/pages/register.tsx | 2 +- frontend/src/pages/render.tsx | 7 +- frontend/src/pages/s/[noteId].tsx | 2 +- 77 files changed, 244 insertions(+), 365 deletions(-) delete mode 100644 frontend/global-styles/dark.scss delete mode 100644 frontend/global-styles/variables.dark.scss create mode 100644 frontend/src/components/common/renderer-iframe/style.module.scss create mode 100644 frontend/src/hooks/dark-mode/use-outline-button-variant.spec.tsx create mode 100644 frontend/src/hooks/dark-mode/use-outline-button-variant.ts diff --git a/frontend/global-styles/dark.scss b/frontend/global-styles/dark.scss deleted file mode 100644 index b698c31fa..000000000 --- a/frontend/global-styles/dark.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - - -body.dark { - @import "variables.dark"; - - /* redefine theme color variables */ - @each $color, $value in $theme-colors { - --#{$prefix}#{$color}: #{$value}; - } - - $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); - - @each $color, $value in $theme-colors-rgb { - --#{$prefix}#{$color}-rgb: #{$value}; - } - - --#{$prefix}body-color: #{$body-color}; - --#{$prefix}body-bg: #{$body-bg}; - - @import "colors-only-bootstrap/bootstrap"; - - .btn-close { - filter: invert(1); - } -} diff --git a/frontend/global-styles/highlight-js.scss b/frontend/global-styles/highlight-js.scss index 6f5fd2868..db699a0a4 100644 --- a/frontend/global-styles/highlight-js.scss +++ b/frontend/global-styles/highlight-js.scss @@ -6,6 +6,6 @@ @import '~highlight.js/styles/github'; -body.dark { +[data-bs-theme="dark"] { @import '~highlight.js/styles/github-dark'; } diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss index fd7a97863..038d62a13 100644 --- a/frontend/global-styles/index.scss +++ b/frontend/global-styles/index.scss @@ -26,10 +26,6 @@ cursor: pointer; } -body { - background-color: $dark; -} - *:focus { outline: 0 !important; } diff --git a/frontend/global-styles/variables.dark.scss b/frontend/global-styles/variables.dark.scss deleted file mode 100644 index 01d757818..000000000 --- a/frontend/global-styles/variables.dark.scss +++ /dev/null @@ -1,134 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -$white: #fff; -$gray-100: #f8f9fa; -$gray-200: #ebebeb; -$gray-300: #dee2e6; -$gray-400: #ced4da; -$gray-500: #adb5bd; -$gray-600: #888; -$gray-700: #444; -$gray-800: #303030; -$gray-900: #222; -$black: #000; - -$blue: #337ab7; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #e83e8c; -$red: #e74c3c; -$orange: #fd7e14; -$yellow: #f39c12; -$green: #00bc8c; -$teal: #20c997; -$cyan: #5EB7E0; - -$primary: $blue; -$secondary: $white; -$success: $green; -$info: $cyan; -$warning: $yellow; -$danger: $red; -$light: $gray-900; -$dark: $white; - -$yiq-contrasted-threshold: 175; - -// Body -$body-bg: $light; -$body-color: $dark; - -// Links -$link-color: $cyan; - -// Fonts -$text-muted: $gray-400; - -// Tables -$table-accent-bg: $gray-800; -$table-border-color: $gray-700; - -// Forms -$input-border-color: $body-bg; -$input-group-addon-color: $gray-500; -$input-group-addon-bg: $gray-700; -$input-bg: $gray-700; -$input-placeholder-color: $gray-500; -$input-color: $white; -$input-disabled-bg: $gray-900; - -$custom-file-color: $gray-500; -$custom-file-border-color: $body-bg; - -// Dropdowns -$dropdown-bg: $gray-900; -$dropdown-border-color: $gray-700; -$dropdown-divider-bg: $gray-700; -$dropdown-link-color: $white; -$dropdown-link-hover-color: $white; -$dropdown-link-hover-bg: $primary; - -// Navs -$nav-link-disabled-color: $gray-500; -$nav-tabs-border-color: $gray-700; -$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent; -$nav-tabs-link-active-color: $white; -$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent; - -// Navbar -$navbar-dark-color: rgba($white, .6); -$navbar-dark-hover-color: $white; -$navbar-light-color: rgba($gray-900, .7); -$navbar-light-hover-color: $gray-900; -$navbar-light-active-color: $gray-900; -$navbar-light-toggler-border-color: rgba($gray-900, .1); - -// Jumbotron -$jumbotron-bg: $gray-800; - -// Cards -$card-cap-bg: $gray-700; -$card-bg: $gray-800; - -// Popovers -$popover-bg: $gray-800; -$popover-header-bg: $gray-700; - -// Toasts -$toast-background-color: $gray-700; -$toast-header-background-color: $gray-800; - -// Modals -$modal-content-color: $dark; -$modal-content-bg: $gray-800; -$modal-content-border-color: $gray-700; -$modal-header-border-color: $gray-700; - -// Progress bars -$progress-bg: $gray-700; - -// List group -$list-group-bg: $gray-800; -$list-group-border-color: $gray-700; -$list-group-hover-bg: $gray-700; -$list-group-action-hover-color: $white; - -// Breadcrumbs -$breadcrumb-bg: $gray-700; - -// Close -$close-color: $white; -$close-text-shadow: none; - -// Code -$pre-color: $dark; - -$list-group-color: $dark; - -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/variables"; diff --git a/frontend/global-styles/variables.light.scss b/frontend/global-styles/variables.light.scss index 253fde3a3..d734051f3 100644 --- a/frontend/global-styles/variables.light.scss +++ b/frontend/global-styles/variables.light.scss @@ -7,10 +7,3 @@ $blue: #337ab7 !default; $cyan: #5EB7E0 !default; $dark: #222222 !default; - -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/variables"; - -$toast-background-color: $white; - diff --git a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx index 732129230..fb274dc93 100644 --- a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx +++ b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx @@ -21,7 +21,7 @@ export interface LoadingScreenProps { */ export const LoadingScreen: React.FC = ({ errorMessage }) => { return ( -
+
diff --git a/frontend/src/components/common/fields/display-name-field.tsx b/frontend/src/components/common/fields/display-name-field.tsx index 1f8357614..79b3cbebf 100644 --- a/frontend/src/components/common/fields/display-name-field.tsx +++ b/frontend/src/components/common/fields/display-name-field.tsx @@ -38,7 +38,6 @@ export const DisplayNameField: React.FC = ({ onChange, va isValid={isValid} onChange={onChange} placeholder={t('profile.displayName') ?? undefined} - className='bg-dark text-light' autoComplete='name' required /> diff --git a/frontend/src/components/common/fields/new-password-field.tsx b/frontend/src/components/common/fields/new-password-field.tsx index c182e787e..f5eb03d16 100644 --- a/frontend/src/components/common/fields/new-password-field.tsx +++ b/frontend/src/components/common/fields/new-password-field.tsx @@ -33,7 +33,6 @@ export const NewPasswordField: React.FC = ({ onChange, value, isInvalid={hasError} onChange={onChange} placeholder={t('login.auth.password') ?? undefined} - className='bg-dark text-light' autoComplete='new-password' required /> diff --git a/frontend/src/components/common/fields/password-again-field.tsx b/frontend/src/components/common/fields/password-again-field.tsx index 40202f752..092a61e11 100644 --- a/frontend/src/components/common/fields/password-again-field.tsx +++ b/frontend/src/components/common/fields/password-again-field.tsx @@ -47,7 +47,6 @@ export const PasswordAgainField: React.FC = ({ isValid={isValid} onChange={onChange} placeholder={t('login.register.passwordAgain') ?? undefined} - className='bg-dark text-light' autoComplete='new-password' required /> diff --git a/frontend/src/components/common/fields/username-field.tsx b/frontend/src/components/common/fields/username-field.tsx index 4edf0b548..917b909fb 100644 --- a/frontend/src/components/common/fields/username-field.tsx +++ b/frontend/src/components/common/fields/username-field.tsx @@ -33,7 +33,6 @@ export const UsernameField: React.FC = ({ onChange, value }) = isValid={isValid} onChange={onChange} placeholder={t('login.auth.username') ?? undefined} - className='bg-dark text-light' autoComplete='username' autoFocus={true} required diff --git a/frontend/src/components/common/highlighted-code/highlighted-code.tsx b/frontend/src/components/common/highlighted-code/highlighted-code.tsx index 9333e93a3..561a9eb07 100644 --- a/frontend/src/components/common/highlighted-code/highlighted-code.tsx +++ b/frontend/src/components/common/highlighted-code/highlighted-code.tsx @@ -3,11 +3,11 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary' -import { CopyToClipboardButton } from '../../../components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button' import { concatCssClasses } from '../../../utils/concat-css-classes' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute' import { testId } from '../../../utils/test-id' +import { AsyncLoadingBoundary } from '../async-loading-boundary/async-loading-boundary' +import { CopyToClipboardButton } from '../copyable/copy-to-clipboard-button/copy-to-clipboard-button' import styles from './highlighted-code.module.scss' import { useAsyncHighlightJsImport } from './hooks/use-async-highlight-js-import' import { useAttachLineNumbers } from './hooks/use-attach-line-numbers' diff --git a/frontend/src/components/common/links/__snapshots__/external-link.spec.tsx.snap b/frontend/src/components/common/links/__snapshots__/external-link.spec.tsx.snap index 191a471cd..f605a4bea 100644 --- a/frontend/src/components/common/links/__snapshots__/external-link.spec.tsx.snap +++ b/frontend/src/components/common/links/__snapshots__/external-link.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`ExternalLink renders an external link correctly 1`] = `
testText @@ -14,7 +14,7 @@ exports[`InternalLink renders an internal link correctly 1`] = ` exports[`InternalLink renders an internal link with a title 1`] = `
@@ -37,7 +37,7 @@ exports[`InternalLink renders an internal link with additional className 1`] = ` exports[`InternalLink renders an internal link with an icon 1`] = `
BootstrapIconMock_Heart @@ -50,7 +50,7 @@ exports[`InternalLink renders an internal link with an icon 1`] = ` exports[`InternalLink renders an internal link with an id 1`] = `
diff --git a/frontend/src/components/common/links/__snapshots__/translated-external-link.spec.tsx.snap b/frontend/src/components/common/links/__snapshots__/translated-external-link.spec.tsx.snap index baaebbd31..5f46c1dc7 100644 --- a/frontend/src/components/common/links/__snapshots__/translated-external-link.spec.tsx.snap +++ b/frontend/src/components/common/links/__snapshots__/translated-external-link.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`TranslatedExternalLink renders with i18nKey 1`] = `
testi18nKey diff --git a/frontend/src/components/common/links/external-link.tsx b/frontend/src/components/common/links/external-link.tsx index 8cd6e4927..8a1cb2fb8 100644 --- a/frontend/src/components/common/links/external-link.tsx +++ b/frontend/src/components/common/links/external-link.tsx @@ -19,14 +19,7 @@ import React from 'react' * @param className Additional class names added to the link object * @param title The title of the link */ -export const ExternalLink: React.FC = ({ - href, - text, - icon, - id, - className = 'text-light', - title -}) => { +export const ExternalLink: React.FC = ({ href, text, icon, id, className = '', title }) => { return ( diff --git a/frontend/src/components/common/links/internal-link.tsx b/frontend/src/components/common/links/internal-link.tsx index b6bffc2c5..4475c8d0c 100644 --- a/frontend/src/components/common/links/internal-link.tsx +++ b/frontend/src/components/common/links/internal-link.tsx @@ -19,14 +19,7 @@ import React from 'react' * @param className Additional class names added to the link object * @param title The title of the link */ -export const InternalLink: React.FC = ({ - href, - text, - icon, - id, - className = 'text-light', - title -}) => { +export const InternalLink: React.FC = ({ href, text, icon, id, className = '', title }) => { return ( diff --git a/frontend/src/components/common/modals/__snapshots__/common-modal.spec.tsx.snap b/frontend/src/components/common/modals/__snapshots__/common-modal.spec.tsx.snap index a796c2ac8..2f3a11e8e 100644 --- a/frontend/src/components/common/modals/__snapshots__/common-modal.spec.tsx.snap +++ b/frontend/src/components/common/modals/__snapshots__/common-modal.spec.tsx.snap @@ -4,7 +4,7 @@ exports[`CommonModal does not render if show is false 1`] = `
`; exports[`CommonModal render correctly in size lg 1`] = `
testText
@@ -44,7 +44,7 @@ exports[`DeletionModal disables deletion when user is not owner 1`] = ` exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
testText
diff --git a/frontend/src/components/common/modals/common-modal.tsx b/frontend/src/components/common/modals/common-modal.tsx index af936801a..9bab6992e 100644 --- a/frontend/src/components/common/modals/common-modal.tsx +++ b/frontend/src/components/common/modals/common-modal.tsx @@ -74,7 +74,7 @@ export const CommonModal: React.FC> = ({ onHide={onHide} animation={true} {...testId('commonModal')} - dialogClassName={concatCssClasses('text-dark', additionalClasses)} + dialogClassName={concatCssClasses(additionalClasses)} size={modalSize}> diff --git a/frontend/src/components/common/modals/deletion-modal.tsx b/frontend/src/components/common/modals/deletion-modal.tsx index 6da54f863..5cd5a9386 100644 --- a/frontend/src/components/common/modals/deletion-modal.tsx +++ b/frontend/src/components/common/modals/deletion-modal.tsx @@ -51,7 +51,7 @@ export const DeletionModal: React.FC> = ({ titleIcon={titleIcon} showCloseButton={true} {...props}> - {children} + {children} diff --git a/frontend/src/components/editor-page/app-bar/slide-mode-button.tsx b/frontend/src/components/editor-page/app-bar/slide-mode-button.tsx index 4e5d43291..68933dabe 100644 --- a/frontend/src/components/editor-page/app-bar/slide-mode-button.tsx +++ b/frontend/src/components/editor-page/app-bar/slide-mode-button.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { useApplicationState } from '../../../hooks/common/use-application-state' +import { useOutlineButtonVariant } from '../../../hooks/dark-mode/use-outline-button-variant' import { UiIcon } from '../../common/icons/ui-icon' import Link from 'next/link' import React from 'react' @@ -17,6 +18,7 @@ import { useTranslation } from 'react-i18next' export const SlideModeButton: React.FC = () => { const { t } = useTranslation() const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress) + const buttonVariant = useOutlineButtonVariant() return ( @@ -24,7 +26,7 @@ export const SlideModeButton: React.FC = () => { title={t('editor.documentBar.slideMode') ?? undefined} className='ms-2 text-secondary' size='sm' - variant='outline-light'> + variant={buttonVariant}> diff --git a/frontend/src/components/editor-page/editor-pane/status-bar/status-bar.tsx b/frontend/src/components/editor-page/editor-pane/status-bar/status-bar.tsx index eeb821c47..43331e8de 100644 --- a/frontend/src/components/editor-page/editor-pane/status-bar/status-bar.tsx +++ b/frontend/src/components/editor-page/editor-pane/status-bar/status-bar.tsx @@ -16,7 +16,7 @@ import React from 'react' */ export const StatusBar: React.FC = () => { return ( -
+
diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.module.scss b/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.module.scss index a184d81d7..53f91fa79 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.module.scss +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.module.scss @@ -5,9 +5,7 @@ */ .tooltip { - &, :global(body.dark) & { - --bs-popover-max-width: 100%; - --bs-popover-body-padding-y: 0; - --bs-popover-body-padding-x: 0; - } + --bs-popover-max-width: 100%; + --bs-popover-body-padding-y: 0; + --bs-popover-body-padding-x: 0; } diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.module.scss b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.module.scss index 94805ba20..80a7ce3b8 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.module.scss +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.module.scss @@ -5,9 +5,6 @@ */ :global(.btn-toolbar).toolbar { - border-bottom: 1px solid #ededed; - border-top: 1px solid #ededed; - :global(.btn) { padding: 0.1875rem 0.5rem; min-width: 30px; diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx index ac98b3e52..4f1fa254d 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { useMayEdit } from '../../../../hooks/common/use-may-edit' +import { concatCssClasses } from '../../../../utils/concat-css-classes' import { ShowIf } from '../../../common/show-if/show-if' import { BoldButton } from './buttons/bold-button' import { CheckListButton } from './buttons/check-list-button' @@ -39,7 +40,7 @@ export const ToolBar: React.FC = () => { return ( - + diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx index 4f908c51f..d7398419e 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx @@ -41,7 +41,8 @@ export const ToolbarButton: React.FC> = ({ return (
= ({ focusRight, forceOpen }) => { - const shiftClass = dividerButtonsShift == '' ? '' : styles[dividerButtonsShift] + const className = useMemo(() => { + return concatCssClasses(styles.middle, { + [styles.open]: forceOpen, + [styles[dividerButtonsShift]]: dividerButtonsShift !== '' + }) + }, [dividerButtonsShift, forceOpen]) return ( -
-
-
+
+
+
diff --git a/frontend/src/components/history-page/entry-menu/entry-menu.tsx b/frontend/src/components/history-page/entry-menu/entry-menu.tsx index 8bdf8557c..c3f2db7e6 100644 --- a/frontend/src/components/history-page/entry-menu/entry-menu.tsx +++ b/frontend/src/components/history-page/entry-menu/entry-menu.tsx @@ -51,7 +51,7 @@ export const EntryMenu: React.FC = ({ return ( diff --git a/frontend/src/components/history-page/history-card/history-card.tsx b/frontend/src/components/history-page/history-card/history-card.tsx index 6932678f4..e8569ed13 100644 --- a/frontend/src/components/history-page/history-card/history-card.tsx +++ b/frontend/src/components/history-page/history-card/history-card.tsx @@ -3,6 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute' import { UiIcon } from '../../common/icons/ui-icon' import { EntryMenu } from '../entry-menu/entry-menu' @@ -45,16 +46,19 @@ export const HistoryCard: React.FC = ( const entryTitle = useHistoryEntryTitle(entry) + const darkModeState = useDarkModeState() + const tags = useMemo( () => - entry.tags.map((tag) => ( - - {tag} - - )), + entry.tags.map((tag) => { + return ( + + {tag} + + ) + }), [entry.tags] ) - const lastVisited = useMemo(() => formatHistoryDate(entry.lastVisitedAt), [entry.lastVisitedAt]) return ( @@ -62,18 +66,18 @@ export const HistoryCard: React.FC = ( className='p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4' {...cypressId('history-card')} {...cypressAttribute('card-title', entryTitle)}> - +
- +
{entryTitle}
-
+
{DateTime.fromISO(entry.lastVisitedAt).toRelative()}
{lastVisited} diff --git a/frontend/src/components/history-page/history-table/history-table-row.tsx b/frontend/src/components/history-page/history-table/history-table-row.tsx index a7f07ecc5..1d08455c1 100644 --- a/frontend/src/components/history-page/history-table/history-table-row.tsx +++ b/frontend/src/components/history-page/history-table/history-table-row.tsx @@ -44,14 +44,14 @@ export const HistoryTableRow: React.FC return ( - + {entryTitle} {formatHistoryDate(entry.lastVisitedAt)} {entry.tags.map((tag) => ( - + {tag} ))} diff --git a/frontend/src/components/history-page/history-table/history-table.tsx b/frontend/src/components/history-page/history-table/history-table.tsx index e55f3f6c4..897023a2c 100644 --- a/frontend/src/components/history-page/history-table/history-table.tsx +++ b/frontend/src/components/history-page/history-table/history-table.tsx @@ -3,6 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state' import { cypressId } from '../../../utils/cypress-attribute' import { Pager } from '../../common/pagination/pager' import type { HistoryEntriesProps, HistoryEventHandlers } from '../history-content/history-content' @@ -44,13 +45,15 @@ export const HistoryTable: React.FC )) }, [entries, onPinClick, onRemoveEntryClick, onDeleteNoteClick]) + const darkModeState = useDarkModeState() + return ( diff --git a/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx b/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx index 26f6d8121..22c85d3b4 100644 --- a/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx +++ b/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx @@ -36,7 +36,7 @@ export const ClearHistoryButton: React.FC = () => { return ( ) diff --git a/frontend/src/components/history-page/history-toolbar/history-refresh-button.tsx b/frontend/src/components/history-page/history-toolbar/history-refresh-button.tsx index 3f009d415..1b6d53759 100644 --- a/frontend/src/components/history-page/history-toolbar/history-refresh-button.tsx +++ b/frontend/src/components/history-page/history-toolbar/history-refresh-button.tsx @@ -19,7 +19,7 @@ export const HistoryRefreshButton: React.FC = () => { const refreshHistory = useSafeRefreshHistoryStateCallback() return ( - ) diff --git a/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx b/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx index 24177e4c4..906e67b90 100644 --- a/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx +++ b/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx @@ -90,7 +90,7 @@ export const HistoryToolbar: React.FC = () => {
diff --git a/frontend/src/components/landing-layout/landing-layout.tsx b/frontend/src/components/landing-layout/landing-layout.tsx index 42eeacd34..c2c877489 100644 --- a/frontend/src/components/landing-layout/landing-layout.tsx +++ b/frontend/src/components/landing-layout/landing-layout.tsx @@ -3,11 +3,13 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style' +import { useSaveDarkModePreferenceToLocalStorage } from '../../hooks/dark-mode/use-save-dark-mode-preference-to-local-storage' import { MotdModal } from '../common/motd-modal/motd-modal' import { Footer } from './footer/footer' import { HeaderBar } from './navigation/header-bar/header-bar' import type { PropsWithChildren } from 'react' -import React, { Fragment } from 'react' +import React from 'react' import { Container } from 'react-bootstrap' /** @@ -15,17 +17,20 @@ import { Container } from 'react-bootstrap' * * @param children The children that should be rendered on the page. */ -export const LandingLayout: React.FC> = ({ children }) => { +export const LandingLayout: React.FC = ({ children }) => { + useApplyDarkModeStyle() + useSaveDarkModePreferenceToLocalStorage() + return ( - +
- +
{children}
 - +
) } diff --git a/frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx b/frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx index eacc41fdc..11cff3441 100644 --- a/frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx +++ b/frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx @@ -32,7 +32,7 @@ const HeaderBar: React.FC = () => {
- + {!userExists ? : }
diff --git a/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.module.scss b/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.module.scss index b5d036bd3..634ccc304 100644 --- a/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.module.scss +++ b/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.module.scss @@ -4,10 +4,10 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -.nav-link { +.link { border-bottom: 2px solid transparent } -.nav-link-active { - border-bottom-color: #fff; +.active { + border-bottom-color: var(--bs-primary); } diff --git a/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx b/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx index 626e1e80c..3c405864e 100644 --- a/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx +++ b/frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx @@ -3,6 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import { concatCssClasses } from '../../../../utils/concat-css-classes' import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute' import { cypressId } from '../../../../utils/cypress-attribute' import styles from './header-nav-link.module.scss' @@ -26,17 +27,19 @@ export interface HeaderNavLinkProps extends PropsWithDataCypressId { export const HeaderNavLink: React.FC> = ({ to, children, ...props }) => { const { route } = useRouter() - const activeClass = useMemo(() => { - return route === to ? styles['nav-link-active'] : '' + const className = useMemo(() => { + return concatCssClasses( + { + [styles.active]: route === to + }, + 'nav-link', + styles.link + ) }, [route, to]) return ( - + {children} diff --git a/frontend/src/components/layout/settings-dialog/settings-button.tsx b/frontend/src/components/layout/settings-dialog/settings-button.tsx index 381070270..255a5da75 100644 --- a/frontend/src/components/layout/settings-dialog/settings-button.tsx +++ b/frontend/src/components/layout/settings-dialog/settings-button.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { useBooleanState } from '../../../hooks/common/use-boolean-state' +import { useOutlineButtonVariant } from '../../../hooks/dark-mode/use-outline-button-variant' import { cypressId } from '../../../utils/cypress-attribute' import { IconButton } from '../../common/icon-button/icon-button' import { SettingsModal } from './settings-modal' @@ -17,9 +18,17 @@ export type SettingsButtonProps = Omit */ export const SettingsButton: React.FC = (props) => { const [show, showModal, hideModal] = useBooleanState(false) + const buttonVariant = useOutlineButtonVariant() + return ( - + ) diff --git a/frontend/src/components/login-page/auth/fields/password-field.tsx b/frontend/src/components/login-page/auth/fields/password-field.tsx index 663daba62..1fb7e7490 100644 --- a/frontend/src/components/login-page/auth/fields/password-field.tsx +++ b/frontend/src/components/login-page/auth/fields/password-field.tsx @@ -25,7 +25,6 @@ export const PasswordField: React.FC = ({ onChange, invalid }) = size='sm' placeholder={t('login.auth.password') ?? undefined} onChange={onChange} - className='bg-dark text-light' autoComplete='current-password' /> diff --git a/frontend/src/components/login-page/auth/fields/username-field.tsx b/frontend/src/components/login-page/auth/fields/username-field.tsx index def9a1472..0179e1362 100644 --- a/frontend/src/components/login-page/auth/fields/username-field.tsx +++ b/frontend/src/components/login-page/auth/fields/username-field.tsx @@ -32,7 +32,6 @@ export const UsernameField: React.FC = ({ onChange, invalid, size='sm' placeholder={t('login.auth.username') ?? undefined} onChange={onChange} - className='bg-dark text-light' autoComplete='username' /> diff --git a/frontend/src/components/login-page/auth/via-local.tsx b/frontend/src/components/login-page/auth/via-local.tsx index 214fa2ea4..29aef0ffa 100644 --- a/frontend/src/components/login-page/auth/via-local.tsx +++ b/frontend/src/components/login-page/auth/via-local.tsx @@ -49,7 +49,7 @@ export const ViaLocal: React.FC = () => { const onPasswordChange = useOnInputChange(setPassword) return ( - + diff --git a/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.module.scss b/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.module.scss index 689d1082e..dd9c94a45 100644 --- a/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.module.scss +++ b/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.module.scss @@ -5,7 +5,7 @@ */ .image-drop { - border: 3px dashed var(--bs-dark); + border: 3px dashed var(--bs-primary); border-radius: 3px; transition: background-color 50ms, color 50ms; diff --git a/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.tsx b/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.tsx index 9c380e795..84e99505c 100644 --- a/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.tsx +++ b/frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.tsx @@ -97,7 +97,7 @@ export const ImagePlaceholder: React.FC = ({ onChange={onChangeHandler} ref={fileInputReference} /> -
+
diff --git a/frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts b/frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts index 4b678a427..ec5861e24 100644 --- a/frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts +++ b/frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts @@ -13,11 +13,16 @@ export const useApplyDarkModeStyle = (): void => { const darkMode = useDarkModeState() useEffect(() => { if (darkMode) { - window.document.body.classList.add('dark') + window.document.body.dataset.bsTheme = 'dark' } else { - window.document.body.classList.remove('dark') + window.document.body.dataset.bsTheme = 'light' } }, [darkMode]) - useEffect(() => () => window.document.body.classList.remove('dark'), []) + useEffect( + () => () => { + window.document.body.dataset.bsTheme = 'light' + }, + [] + ) } diff --git a/frontend/src/hooks/dark-mode/use-outline-button-variant.spec.tsx b/frontend/src/hooks/dark-mode/use-outline-button-variant.spec.tsx new file mode 100644 index 000000000..8a6419c01 --- /dev/null +++ b/frontend/src/hooks/dark-mode/use-outline-button-variant.spec.tsx @@ -0,0 +1,29 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import * as UseDarkModeStateModule from './use-dark-mode-state' +import { useOutlineButtonVariant } from './use-outline-button-variant' +import { render, screen } from '@testing-library/react' +import React from 'react' + +jest.mock('./use-dark-mode-state') + +describe('useOutlineButtonVariant', () => { + const TestComponent: React.FC = () => { + return useOutlineButtonVariant() + } + + it('returns the correct variant for dark mode', async () => { + jest.spyOn(UseDarkModeStateModule, 'useDarkModeState').mockReturnValue(true) + render() + await screen.findByText('outline-light') + }) + + it('returns the correct variant for light mode', async () => { + jest.spyOn(UseDarkModeStateModule, 'useDarkModeState').mockReturnValue(false) + render() + await screen.findByText('outline-dark') + }) +}) diff --git a/frontend/src/hooks/dark-mode/use-outline-button-variant.ts b/frontend/src/hooks/dark-mode/use-outline-button-variant.ts new file mode 100644 index 000000000..52bf50e80 --- /dev/null +++ b/frontend/src/hooks/dark-mode/use-outline-button-variant.ts @@ -0,0 +1,10 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { useDarkModeState } from './use-dark-mode-state' + +export const useOutlineButtonVariant = (): 'outline-light' | 'outline-dark' => { + return useDarkModeState() ? 'outline-light' : 'outline-dark' +} diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index d5a3e208f..97b5b32f7 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -3,7 +3,6 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import '../../global-styles/dark.scss' import '../../global-styles/index.scss' import type { FrontendConfig } from '../api/config/types' import { ApplicationLoader } from '../components/application-loader/application-loader' diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx index 1f035f4c3..3fa24b062 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/pages/login.tsx @@ -72,7 +72,7 @@ export const LoginPage: React.FC = () => { 0}>
- + diff --git a/frontend/src/pages/n/[noteId].tsx b/frontend/src/pages/n/[noteId].tsx index cf39ebc0c..680cb1e38 100644 --- a/frontend/src/pages/n/[noteId].tsx +++ b/frontend/src/pages/n/[noteId].tsx @@ -7,6 +7,7 @@ import { NoteLoadingBoundary } from '../../components/common/note-loading-bounda import { EditorPageContent } from '../../components/editor-page/editor-page-content' import { EditorToRendererCommunicatorContextProvider } from '../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider' import { ResetRealtimeStateBoundary } from '../../components/editor-page/reset-realtime-state-boundary' +import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style' import type { NextPage } from 'next' import React from 'react' @@ -14,6 +15,8 @@ import React from 'react' * Renders a page that is used by the user to edit markdown notes. It contains the editor and a renderer. */ export const EditorPage: NextPage = () => { + useApplyDarkModeStyle() + return ( diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx index 2d58f1562..a95080d55 100644 --- a/frontend/src/pages/register.tsx +++ b/frontend/src/pages/register.tsx @@ -84,7 +84,7 @@ export const RegisterPage: NextPage = () => { - +
diff --git a/frontend/src/pages/render.tsx b/frontend/src/pages/render.tsx index 75de9cd0e..d6036feb5 100644 --- a/frontend/src/pages/render.tsx +++ b/frontend/src/pages/render.tsx @@ -7,12 +7,17 @@ import { RendererToEditorCommunicatorContextProvider } from '../components/edito import { RenderPageContent } from '../components/render-page/render-page-content' import { useApplyDarkModeStyle } from '../hooks/dark-mode/use-apply-dark-mode-style' import type { NextPage } from 'next' -import React from 'react' +import React, { useEffect } from 'react' /** * Renders the actual markdown renderer that receives the content and metadata via iframe communication. */ export const RenderPage: NextPage = () => { + useEffect(() => { + document.body.classList.add('bg-transparent') + return () => document.body.classList.remove('bg-transparent') + }, []) + useApplyDarkModeStyle() return ( diff --git a/frontend/src/pages/s/[noteId].tsx b/frontend/src/pages/s/[noteId].tsx index 255475b93..5543964db 100644 --- a/frontend/src/pages/s/[noteId].tsx +++ b/frontend/src/pages/s/[noteId].tsx @@ -25,7 +25,7 @@ export const DocumentReadOnlyPage: React.FC = () => { -
+