diff --git a/cypress/e2e/intro.spec.ts b/cypress/e2e/intro.spec.ts index f9e9bae0b..d46caa9a6 100644 --- a/cypress/e2e/intro.spec.ts +++ b/cypress/e2e/intro.spec.ts @@ -53,7 +53,7 @@ describe('Intro page', () => { cy.getByCypressId('version-modal').should('not.exist') cy.getByCypressId('show-version-modal').click() cy.getByCypressId('version-modal').should('be.visible') - cy.getByCypressId('version-modal').find('.modal-header .close').click() + cy.getByCypressId('version-modal').find('.modal-header .btn-close').click() cy.getByCypressId('version-modal').should('not.exist') }) }) diff --git a/cypress/e2e/linkEmbedder.spec.ts b/cypress/e2e/linkEmbedder.spec.ts index 632c8cdea..ee134a2e9 100644 --- a/cypress/e2e/linkEmbedder.spec.ts +++ b/cypress/e2e/linkEmbedder.spec.ts @@ -13,7 +13,7 @@ describe('Link gets replaced with embedding: ', () => { it('GitHub Gist', () => { cy.setCodemirrorContent('https://gist.github.com/schacon/1') - cy.getMarkdownBody().findByCypressId('click-shield-gist').find('.preview-background').parent().click() + cy.getMarkdownBody().findByCypressId('click-shield-gist').findByCypressId('preview-background').parent().click() cy.getMarkdownBody().findByCypressId('gh-gist').should('be.visible') }) }) diff --git a/global-styles/bootstrap-color-theme/_alert.scss b/global-styles/bootstrap-color-theme/_alert.scss deleted file mode 100644 index 28c0fdccc..000000000 --- a/global-styles/bootstrap-color-theme/_alert.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); - } -} diff --git a/global-styles/bootstrap-color-theme/_badge.scss b/global-styles/bootstrap-color-theme/_badge.scss deleted file mode 100644 index ec677a729..000000000 --- a/global-styles/bootstrap-color-theme/_badge.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// Colors -// -// Contextual variations (linked badges get darker on :hover). - -@each $color, $value in $theme-colors { - .badge-#{$color} { - @include badge-variant($value); - } -} diff --git a/global-styles/bootstrap-color-theme/_breadcrumb.scss b/global-styles/bootstrap-color-theme/_breadcrumb.scss deleted file mode 100644 index 4bfaab640..000000000 --- a/global-styles/bootstrap-color-theme/_breadcrumb.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -.breadcrumb { - background-color: $breadcrumb-bg; -} - -.breadcrumb-item { - + .breadcrumb-item { - &::before { - color: $breadcrumb-divider-color; - } - } - - &.active { - color: $breadcrumb-active-color; - } -} diff --git a/global-styles/bootstrap-color-theme/_buttons.scss b/global-styles/bootstrap-color-theme/_buttons.scss deleted file mode 100644 index d0843cffb..000000000 --- a/global-styles/bootstrap-color-theme/_buttons.scss +++ /dev/null @@ -1,72 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// stylelint-disable selector-no-qualifying-type - -// -// Base styles -// - -.btn { - color: $body-color; - - @include hover() { - color: $body-color; - } - - &:focus, - &.focus { - box-shadow: $btn-focus-box-shadow; - } - - &:not(:disabled):not(.disabled) { - &:active, - &.active { - @include box-shadow($btn-active-box-shadow); - - &:focus { - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); - } - } - } -} - - -// -// Alternate buttons -// - -@each $color, $value in $theme-colors { - .btn-#{$color} { - @include button-variant($value, $value); - } -} - -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - @include button-outline-variant($value); - } -} - -// -// Link buttons -// - -// Make a button look and behave like a link -.btn-link { - color: $link-color; - - @include hover() { - color: $link-hover-color; - } - - &:disabled, - &.disabled { - color: $btn-link-disabled-color; - } - - // No need for an active state here -} diff --git a/global-styles/bootstrap-color-theme/_card.scss b/global-styles/bootstrap-color-theme/_card.scss deleted file mode 100644 index 6e2292dd9..000000000 --- a/global-styles/bootstrap-color-theme/_card.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// -// Base styles -// - -.card { - background-color: $card-bg; - border-color: $card-border-color; -} - -.card-body { - color: $card-color; -} - - -// -// Optional textual caps -// - -.card-header { - color: $card-cap-color; - background-color: $card-cap-bg; - border-bottom-color: $card-border-color; -} - -.card-footer { - color: $card-cap-color; - background-color: $card-cap-bg; - border-top-color: $card-border-color; -} diff --git a/global-styles/bootstrap-color-theme/_carousel.scss b/global-styles/bootstrap-color-theme/_carousel.scss deleted file mode 100644 index 27b87dd95..000000000 --- a/global-styles/bootstrap-color-theme/_carousel.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -.carousel-control-prev, -.carousel-control-next { - color: $carousel-control-color; - - // Hover/focus state - @include hover-focus() { - color: $carousel-control-color; - } -} - -.carousel-indicators { - li { - background-color: $carousel-indicator-active-bg; - } -} - - -// Optional captions -// -// - -.carousel-caption { - color: $carousel-caption-color; -} diff --git a/global-styles/bootstrap-color-theme/_close.scss b/global-styles/bootstrap-color-theme/_close.scss deleted file mode 100644 index 53a17466f..000000000 --- a/global-styles/bootstrap-color-theme/_close.scss +++ /dev/null @@ -1,18 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -.close { - color: $close-color; - text-shadow: $close-text-shadow; - - @include hover() { - color: $close-color; - } -} - -button.close { - background-color: transparent; -} diff --git a/global-styles/bootstrap-color-theme/_code.scss b/global-styles/bootstrap-color-theme/_code.scss deleted file mode 100644 index 02de9dfb2..000000000 --- a/global-styles/bootstrap-color-theme/_code.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// Inline code -code { - color: $code-color; -} - -kbd { - color: $kbd-color; - background-color: $kbd-bg; - @include box-shadow($kbd-box-shadow); -} - -// Blocks of code -pre { - color: $pre-color; - - code { - color: inherit; - } -} diff --git a/global-styles/bootstrap-color-theme/_dropdown.scss b/global-styles/bootstrap-color-theme/_dropdown.scss deleted file mode 100644 index b47839ee2..000000000 --- a/global-styles/bootstrap-color-theme/_dropdown.scss +++ /dev/null @@ -1,49 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -.dropdown-menu { - color: $dropdown-color; - background-color: $dropdown-bg; - border-color: $dropdown-border-color; - - @include box-shadow($dropdown-box-shadow); -} - -// Dividers (basically an `
`) within the dropdown -.dropdown-divider { - @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); -} - -.dropdown-item { - color: $dropdown-link-color; - - @include hover-focus() { - color: $dropdown-link-hover-color; - @include gradient-bg($dropdown-link-hover-bg); - } - - &.active, - &:active { - color: $dropdown-link-active-color; - @include gradient-bg($dropdown-link-active-bg); - } - - &.disabled, - &:disabled { - color: $dropdown-link-disabled-color; - background-color: transparent; - } -} - -// Dropdown section headers -.dropdown-header { - color: $dropdown-header-color; -} - -// Dropdown text -.dropdown-item-text { - color: $dropdown-link-color; -} diff --git a/global-styles/bootstrap-color-theme/_forms.scss b/global-styles/bootstrap-color-theme/_forms.scss deleted file mode 100644 index de6e080e7..000000000 --- a/global-styles/bootstrap-color-theme/_forms.scss +++ /dev/null @@ -1,65 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -// stylelint-disable selector-no-qualifying-type - -// -// Textual form controls -// - -.form-control { - color: $input-color; - background-color: $input-bg; - border-color: $input-border-color; - - @include box-shadow($input-box-shadow); - - &:-moz-focusring { - text-shadow: 0 0 0 $input-color; - } - - // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus($ignore-warning: true); - - // Placeholder - &::placeholder { - color: $input-placeholder-color; - } - - &:disabled, - &[readonly] { - background-color: $input-disabled-bg; - } -} - -select.form-control { - &:focus::-ms-value { - // Suppress the nested default white text on blue background highlight given to - // the selected option text when the (still closed) diff --git a/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx b/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx index 0825285d2..480266652 100644 --- a/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx +++ b/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx @@ -4,7 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import React, { useMemo } from 'react' -import { Button, ToggleButton, ToggleButtonGroup } from 'react-bootstrap' +import { Button, ToggleButtonGroup } from 'react-bootstrap' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { AccessLevel } from './types' import { useTranslation } from 'react-i18next' @@ -68,26 +68,22 @@ export const PermissionEntryButtons: React.FC = ({ return (
- - - - +
) diff --git a/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx b/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx index b46d634a1..00d6c5682 100644 --- a/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx +++ b/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx @@ -6,7 +6,7 @@ import React, { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { AccessLevel, SpecialGroup } from './types' -import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' +import { Button, ToggleButtonGroup } from 'react-bootstrap' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { removeGroupPermission, setGroupPermission } from '../../../../api/permissions' import { useApplicationState } from '../../../../hooks/common/use-application-state' @@ -66,31 +66,25 @@ export const PermissionEntrySpecialGroup: React.FC {name}
- - +
diff --git a/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx b/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx index d43376597..1f83e6540 100644 --- a/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx +++ b/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx @@ -33,7 +33,7 @@ export const PermissionOwnerChange: React.FC = ({ on }, [ownerFieldValue]) return ( - + = ({ on variant='light' title={t('common.save')} onClick={onClickConfirm} - className={'ml-2'} + className={'ms-2'} disabled={confirmButtonDisabled}> diff --git a/src/components/editor-page/editor-pane/status-bar/status-bar.tsx b/src/components/editor-page/editor-pane/status-bar/status-bar.tsx index bac989d91..1065861cc 100644 --- a/src/components/editor-page/editor-pane/status-bar/status-bar.tsx +++ b/src/components/editor-page/editor-pane/status-bar/status-bar.tsx @@ -24,7 +24,7 @@ export const StatusBar: React.FC = () => { -
+
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss index 1e0490f63..1058fd32d 100644 --- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss +++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss @@ -6,12 +6,9 @@ .table-picker-container { - @import "../../../../../../global-styles/variables.light"; - z-index: 1111; .table-cell { - border: 1px solid $gray-700; margin: 1px; border-radius: 2px; } diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx index 2f3e8e9c3..ee0708555 100644 --- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx +++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx @@ -85,10 +85,10 @@ export const TableSizePickerPopover: React.FC = ({ id={'table-picker'} {...cypressId('table-size-picker-popover')} className={`${styles['table-picker-container']} bg-light`}> - + - - + +
{tableContainer}
@@ -99,7 +99,7 @@ export const TableSizePickerPopover: React.FC = ({
- + ) } diff --git a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss index 591c48a99..9364c0c95 100644 --- a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss +++ b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss @@ -58,34 +58,27 @@ } @mixin colors { - color: $dark; + color: black; &.sidebar-button-primary { - background: $primary; - color: $white; + color: var(--bs-light); + background: var(--bs-primary); &:hover { - color: $primary; - background: $entry-hover-bg; + color: var(--bs-primary); + background: var(--bs-light); } } &:hover { - background: $entry-hover-bg; - color: $dark; + color: var(--bs-light); + background: var(--bs-primary); } } - @import "../../../../../global-styles/variables.light"; - $entry-hover-bg: darken($body-bg, 10%); + $entry-hover-bg: darken(black, 10%); @include colors; - - :global(body.dark) & { - @import "../../../../../global-styles/variables.dark"; - $entry-hover-bg: darken($body-bg, 10%); - @include colors; - } } diff --git a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx index d6788a44c..747d7a013 100644 --- a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx +++ b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx @@ -5,17 +5,13 @@ */ import type { PropsWithChildren } from 'react' -import React, { useMemo } from 'react' +import React from 'react' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import type { IconName } from '../../../common/fork-awesome/types' import { ShowIf } from '../../../common/show-if/show-if' import type { SidebarEntryProps } from '../types' import styles from './sidebar-button.module.scss' -export interface SidebarButton extends SidebarEntryProps { - variant?: 'primary' -} - /** * A button that should be rendered in the sidebar. * @@ -28,24 +24,19 @@ export interface SidebarButton extends SidebarEntryProps { * @param disabled If the button should be disabled * @param props Other button props */ -export const SidebarButton: React.FC> = ({ +export const SidebarButton: React.FC> = ({ children, icon, className, buttonRef, hide, - variant, disabled, ...props }) => { - const variantClass = useMemo(() => { - return variant !== undefined ? styles['sidebar-button-' + variant] : '' - }, [variant]) - return ( - +
- +
- - +
+ ) } diff --git a/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx b/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx index 78035c813..fb32245f5 100644 --- a/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx +++ b/src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx @@ -5,7 +5,7 @@ */ import React, { useCallback } from 'react' -import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' +import { Button, ToggleButtonGroup } from 'react-bootstrap' import { cypressId } from '../../../utils/cypress-attribute' import { ViewStateEnum } from './history-toolbar' import { useTranslation } from 'react-i18next' @@ -30,23 +30,20 @@ export const HistoryViewModeToggleButton: React.FC = () => { ) return ( - - + + ) } diff --git a/src/components/landing-layout/footer/footer.tsx b/src/components/landing-layout/footer/footer.tsx index 285890752..59c4d835a 100644 --- a/src/components/landing-layout/footer/footer.tsx +++ b/src/components/landing-layout/footer/footer.tsx @@ -14,7 +14,7 @@ import { SocialLink } from './social-links' */ export const Footer: React.FC = () => { return ( -