From 9c3e9cd76dbbf3a67e245ba97046d748371723b8 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Tue, 8 Mar 2022 09:47:36 +0100 Subject: [PATCH] Introduce darkmode theme (#1969) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit introduces a new more relaxed theme, the dark theme! In addition, the theme can now be selected according to the system defaults. And the other themes, as well as the general structure were unified/simplified. Co-authored-by: Philipp Ahrendt Co-authored-by: Eduard Heimbuch Co-authored-by: René Pfeuffer Co-authored-by: Matthias Thieroff --- gradle/changelog/introduce_darkmode.yaml | 4 + scm-ui/ui-components/.storybook/preview.js | 3 +- scm-ui/ui-components/src/DangerZone.tsx | 3 +- .../ui-components/src/SyntaxHighlighter.tsx | 7 +- .../src/__snapshots__/storyshots.test.ts.snap | 405 ++++++++++-------- .../src/buttons/CreateButton.tsx | 2 +- .../src/buttons/OpenInFullscreenButton.tsx | 2 +- scm-ui/ui-components/src/popover/Popover.tsx | 4 +- scm-ui/ui-components/src/repos/DiffButton.tsx | 2 +- .../src/repos/JumpToFileButton.tsx | 2 +- .../src/repos/annotate/AnnotatePopover.tsx | 4 +- .../ui-components/src/table/Table.stories.tsx | 2 +- scm-ui/ui-styles/public/_styleguide.html | 60 +-- scm-ui/ui-styles/src/components/_main.scss | 137 ++++-- scm-ui/ui-styles/src/dark.scss | 308 +++++++++++++ scm-ui/ui-styles/src/highcontrast.scss | 155 +------ scm-ui/ui-styles/src/light.scss | 107 ++--- scm-ui/ui-styles/src/variables/_commons.scss | 18 +- scm-ui/ui-styles/src/variables/_derived.scss | 21 - .../images/blibSmallLightBackground.svg | 67 +++ scm-ui/ui-webapp/public/index.mustache | 12 +- .../ui-webapp/public/locales/de/commons.json | 12 +- .../ui-webapp/public/locales/en/commons.json | 8 + .../components/PluginBottomActions.tsx | 2 +- .../ui-webapp/src/components/HeaderButton.tsx | 3 +- .../src/components/HeaderButtonContent.tsx | 7 +- scm-ui/ui-webapp/src/components/InfoBox.tsx | 6 +- scm-ui/ui-webapp/src/components/LoginForm.tsx | 19 +- scm-ui/ui-webapp/src/containers/Alerts.tsx | 2 +- .../src/containers/NavigationBar.tsx | 18 +- .../src/containers/Notifications.tsx | 2 +- scm-ui/ui-webapp/src/containers/Theme.tsx | 27 +- .../codeSection/components/CodeActionBar.tsx | 2 +- .../form/RepositoryFormSwitcher.tsx | 2 +- .../src/repos/containers/ExportRepository.tsx | 2 +- .../src/repos/sources/containers/Content.tsx | 4 +- scm-ui/ui-webapp/src/search/Syntax.tsx | 34 +- 37 files changed, 922 insertions(+), 553 deletions(-) create mode 100644 gradle/changelog/introduce_darkmode.yaml create mode 100644 scm-ui/ui-styles/src/dark.scss create mode 100644 scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg diff --git a/gradle/changelog/introduce_darkmode.yaml b/gradle/changelog/introduce_darkmode.yaml new file mode 100644 index 0000000000..5f07fad7d9 --- /dev/null +++ b/gradle/changelog/introduce_darkmode.yaml @@ -0,0 +1,4 @@ +- type: added + description: Introduce darkmode theme ([#1969](https://github.com/scm-manager/scm-manager/pull/1969)) +- type: changed + description: Default theme is selected according to system defaults ([#1969](https://github.com/scm-manager/scm-manager/pull/1969)) diff --git a/scm-ui/ui-components/.storybook/preview.js b/scm-ui/ui-components/.storybook/preview.js index 34b830a079..a92350ca98 100644 --- a/scm-ui/ui-components/.storybook/preview.js +++ b/scm-ui/ui-components/.storybook/preview.js @@ -87,7 +87,8 @@ export const parameters = { default: "light", list: [ { name: "light", color: "#fff" }, - { name: "highcontrast", color: "#000" }, + { name: "highcontrast", color: "#050514" }, + { name: "dark", color: "#121212" }, ], }, options: { diff --git a/scm-ui/ui-components/src/DangerZone.tsx b/scm-ui/ui-components/src/DangerZone.tsx index c57dcb2697..55a65b112c 100644 --- a/scm-ui/ui-components/src/DangerZone.tsx +++ b/scm-ui/ui-components/src/DangerZone.tsx @@ -41,10 +41,9 @@ export const DangerZone = styled.div` } } - // TODO ersetzen? > *:not(:last-child) { padding-bottom: 1.5rem; - border-bottom: solid 2px whitesmoke; + border-bottom: solid 2px var(--scm-border-color); } @media screen and (max-width: ${devices.tablet.width}px) { .button { diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx index 7ee9f6026d..4068f08cee 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx +++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx @@ -34,10 +34,12 @@ import useScrollToElement from "./useScrollToElement"; import styled from "styled-components"; import { useTranslation } from "react-i18next"; import copyToClipboard from "./CopyToClipboard"; +import { Button } from "./buttons"; const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/; -const TopRightButton = styled.button` +const TopRightButton = styled(Button)` + height: inherit; position: absolute; display: none; top: 0; @@ -90,7 +92,6 @@ const SyntaxHighlighter: FC = ({ language = defaultLanguage, showLineNumb if (value && value.length > 1 && value.endsWith("\n")) { valueWithoutTrailingLineBreak = value.substr(0, value.length - 1); } - return ( = ({ language = defaultLanguage, showLineNumb > {valueWithoutTrailingLineBreak} - + diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index c13f279dbf..80fc739d54 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -891,7 +891,7 @@ exports[`Storyshots Buttons/CreateButton Default 1`] = ` className="indexstories__Spacing-bpoict-0 ieMGHp" >
@@ -1132,6 +1134,7 @@

Success

Warning

Danger

+

Default

@@ -1152,6 +1155,7 @@

Success

Warning

Danger

+

Default

@@ -1176,6 +1180,7 @@

Success

Warning

Danger

+

Default

@@ -1197,6 +1202,7 @@

Success

Warning

Danger

+

Default

@@ -1362,7 +1368,7 @@
-
+
@@ -1699,7 +1705,6 @@ @@ -1717,7 +1722,6 @@ @@ -1738,7 +1742,6 @@ @@ -1753,15 +1756,15 @@ -
+
-
+
- @@ -1781,7 +1784,6 @@ @@ -1812,7 +1814,7 @@
-
-
-
+
+
1.1.0-SNAPSHOT
-
-
+
+
2.6.0
  • mmuster
  • belefant
  • aschultz
  • zgummi
  • nobody
    • diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss index a795ebf7fd..fad58dbac5 100644 --- a/scm-ui/ui-styles/src/components/_main.scss +++ b/scm-ui/ui-styles/src/components/_main.scss @@ -21,6 +21,30 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ + +:root { + --scm-white-color: #{$white}; + --scm-light-color: #{$light}; + --scm-dark-color: #{$dark}; + --scm-primary-color: #{$primary}; + --scm-link-color: #{$link}; + --scm-info-color: #{$info}; + --scm-success-color: #{$success}; + --scm-warning-color: #{$warning}; + --scm-danger-color: #{$danger}; + + --scm-secondary-least-color: #{$secondary-least}; + --scm-secondary-less-color: #{$secondary-less}; + --scm-secondary-color: #{$secondary}; + --scm-secondary-more-color: #{$secondary-more}; + --scm-secondary-most-color: #{$secondary-most}; + + --scm-border-color: #{$border}; + --scm-border: #{$border-width} solid #{$border}; + + --scm-popover-border-color: #{$white}; +} + // TODO split into multiple files .is-ellipsis-overflow { @@ -84,15 +108,6 @@ hr.header-with-actions { } } -footer.footer { - background-color: $white-ter; - padding: inherit; - - a { - color: darken($info, 15%); - } -} - .has-hover-background-blue:hover { background-color: scale-color($blue, $alpha: -90%); } @@ -113,6 +128,61 @@ footer.footer { background-color: $blue-light; } +.has-text-secondary-least { + color: $secondary-least !important; +} +a.has-text-secondary-least:hover, +a.has-text-secondary-least:focus { + color: lighten($secondary-least, 10%) !important; +} +.has-background-secondary-least { + background-color: $secondary-least !important; +} + +.has-text-secondary-less { + color: $secondary-less !important; +} +a.has-text-secondary-less:hover, +a.has-text-secondary-less:focus { + color: lighten($secondary-less, 10%) !important; +} +.has-background-secondary-less { + background-color: $secondary-less !important; +} + +.has-text-secondary { + color: $secondary !important; +} +a.has-text-secondary:hover, +a.has-text-secondary:focus { + color: lighten($secondary, 10%) !important; +} +.has-background-secondary { + background-color: $secondary !important; +} + +.has-text-secondary-more { + color: $secondary-more !important; +} +a.has-text-secondary-more:hover, +a.has-text-secondary-more:focus { + color: lighten($secondary-more, 10%) !important; +} +.has-background-secondary-more { + background-color: $secondary-more !important; +} + +.has-text-secondary-most { + color: $secondary-most !important; +} +a.has-text-secondary-most:hover, +a.has-text-secondary-most:focus { + color: lighten($secondary-most, 10%) !important; +} +.has-background-secondary-most { + background-color: $secondary-most !important; +} + // border and background colors .has-background-dark-75 { background-color: $dark-75; @@ -181,7 +251,7 @@ footer.footer { // tags .tag:not(body) { border: 1px solid transparent; - background-color: $white; + background-color: $scheme-main; &.is-delete { background-color: $light; @@ -193,7 +263,7 @@ footer.footer { } &.is-outlined { - background-color: $white; + background-color: $scheme-main; } &.is-black.is-outlined { color: $black; @@ -237,6 +307,13 @@ footer.footer { } } +.popover { + &:before { + border-bottom-color: $popover-background-color; + border-left-color: $popover-background-color; + } +} + // buttons .button { padding-left: 1.5em; @@ -251,7 +328,7 @@ footer.footer { &.is-warning, &.is-danger { &.is-outlined { - background-color: $white; + background-color: inherit; } } @@ -347,8 +424,14 @@ footer.footer { } } -.notifications .dropdown-menu:before { - border: 0.4rem solid transparent; +.notifications .dropdown-menu { + border: 1px solid $border; + + &:before { + border: 0.4rem solid transparent; + border-bottom-color: $border; + border-left-color: $border; + } } @import "~@fortawesome/fontawesome-free/scss/fontawesome"; @@ -480,7 +563,7 @@ ul.is-separated { tr { a { - color: #363636; + color: $grey-darker; } &.border-is-green td:first-child { border-left-color: $green; @@ -510,7 +593,7 @@ ul.is-separated { &:hover { td { - background-color: whitesmoke; + background-color: $white-ter; &.is-darker { background-color: #e1e1e1; @@ -531,15 +614,15 @@ ul.is-separated { } td { padding: 1em 1.25em; - background-color: #fafafa; - border-bottom: 1px solid whitesmoke; + background-color: $white-bis; + border-bottom: 1px solid $white-ter; border-left-color: $grey; &:first-child { border-left: 3px solid; } &.is-darker { - background-color: whitesmoke; + background-color: $white-ter; } // Explicitly "remove" styles from td element to use it as an empty table column header, which is necessary for // a11y because an empty th element is not allowed. @@ -550,7 +633,7 @@ ul.is-separated { } } &.is-hoverable tbody tr:not(.is-selected):hover { - background-color: whitesmoke; + background-color: $white-ter; } thead th { background-color: transparent; @@ -579,8 +662,8 @@ ul.is-separated { } .panel-footer { - background-color: whitesmoke; - color: #363636; + background-color: $panel-heading-background-color; + color: $panel-heading-color; font-size: 1.25em; font-weight: 300; line-height: 1.25; @@ -667,7 +750,7 @@ form .field:not(.is-grouped) { .tabs.is-toggle li.is-active a:hover { background-color: #28b1e8; border-color: #28b1e8; - color: #fff; + color: $white; } } @@ -678,7 +761,7 @@ form .field:not(.is-grouped) { position: absolute; right: 0; top: 0; - background-color: whitesmoke; + background-color: $white-ter; } // menu @@ -692,7 +775,6 @@ form .field:not(.is-grouped) { display: flex; height: 3.2rem; align-items: center; - color: #fff; font-size: 1em; font-weight: 600; background-color: $blue; @@ -707,12 +789,11 @@ form .field:not(.is-grouped) { } .menu-list { a { - color: #333; padding: 1rem; &.is-active { - color: $info; - background-color: #fff; + color: $link; + background-color: $scheme-main; } } diff --git a/scm-ui/ui-styles/src/dark.scss b/scm-ui/ui-styles/src/dark.scss new file mode 100644 index 0000000000..561b505f53 --- /dev/null +++ b/scm-ui/ui-styles/src/dark.scss @@ -0,0 +1,308 @@ +/* + * MIT License + * + * Copyright (c) 2020-present Cloudogu GmbH and Contributors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +@import "utils/_pre.scss"; + +$turquoise: #55abad; +$blue: #599dad; +$cyan: $blue; +$green: #419374; +$yellow: #ccad5e; +$red: #ae4e6b; +$white: $grey-lighter; +$light: $grey-dark; + +$primary-invert: $white; +$link-invert: $white; +$info-invert: $white; +$success-invert: $white; +$warning-invert: #583708; +$danger-invert: $white; +$light-invert: $white; +$dark-invert: $white; + +$scheme-main: #121212; +$background: $grey-dark; + +$border: $grey-dark; +$border-width: 1px; + +$text: $grey-lighter; +$text-strong: $grey-lighter; + +$code: lighten($red, 10%); +$code-background: lighten($scheme-main, 10%); + +$link-hover: $grey; +$link-focus: $grey; +$link-active: $grey; + +$secondary-least: $scheme-main; +$secondary-less: $black-ter; +$secondary: $grey; +$secondary-more: $grey-light; +$secondary-most: $white-ter; + +// layout +$footer-background-color: $black-ter; +$footer-color: $text; + +// element +$box-background-color: lighten($scheme-main, 2.5%); + +$button-hover-color: lighten($text-strong, 2.5%); +$button-active-color: lighten($text-strong, 2.5%); + +// component +$card-background-color: $box-background-color; + +$menu-label-color: $text; +$menu-item-color: $text; +$menu-item-hover-background-color: $grey-dark; + +$modal-card-head-background-color: $black-ter; +$modal-card-body-background-color: #17181c; + +$navbar-item-color: $grey-lighter; +$navbar-item-hover-color: $navbar-item-color; +$navbar-item-active-color: $navbar-item-color; + +$panel-heading-background-color: $black-ter; + +// form +$input-placeholder-color: $grey-light; +$input-disabled-color: #7A7A7A; + +// extension +$popover-background-color: $grey-dark; +$popover-border-color: $grey-dark; + +$table-row-hover-background-color: $grey-darker; + +@import "utils/_post.scss"; + +:root { + --scm-popover-border-color: #{$popover-border-color}; +} + +$dark-75: scale-color($dark, $lightness: -25%); +$dark-50: scale-color($dark, $lightness: -50%); +$dark-25: scale-color($dark, $lightness: -75%); +$info-75: scale-color($info, $lightness: -25%); +$info-50: scale-color($info, $lightness: -50%); +$info-25: scale-color($info, $lightness: -75%); +$link-75: scale-color($link, $lightness: -25%); +$link-50: scale-color($link, $lightness: -50%); +$link-25: scale-color($link, $lightness: -75%); +$primary-75: scale-color($primary, $lightness: -25%); +$primary-50: scale-color($primary, $lightness: -50%); +$primary-25: scale-color($primary, $lightness: -75%); +$success-75: scale-color($success, $lightness: -25%); +$success-50: scale-color($success, $lightness: -50%); +$success-25: scale-color($success, $lightness: -75%); +$warning-75: scale-color($warning, $lightness: -25%); +$warning-50: scale-color($warning, $lightness: -50%); +$warning-25: scale-color($warning, $lightness: -75%); +$danger-75: scale-color($danger, $lightness: -25%); +$danger-50: scale-color($danger, $lightness: -50%); +$danger-25: scale-color($danger, $lightness: -75%); + +.has-background-dark-75 { + background-color: $dark-75; +} +.has-background-dark-50 { + background-color: $dark-50; +} +.has-background-dark-25 { + background-color: $dark-25; +} +.has-background-info-75 { + background-color: $info-75; +} +.has-background-info-50 { + background-color: $info-50; +} +.has-background-info-25 { + background-color: $info-25; +} +.has-background-link-75 { + background-color: $link-75; +} +.has-background-link-50 { + background-color: $link-50; +} +.has-background-link-25 { + background-color: $link-25; +} +.has-background-primary-75 { + background-color: $primary-75; +} +.has-background-primary-50 { + background-color: $primary-50; +} +.has-background-primary-25 { + background-color: $primary-25; +} +.has-background-success-75 { + background-color: $success-75; +} +.has-background-success-50 { + background-color: $success-50; +} +.has-background-success-25 { + background-color: $success-25; +} +.has-background-warning-75 { + background-color: $warning-75; +} +.has-background-warning-50 { + background-color: $warning-50; +} +.has-background-warning-25 { + background-color: $warning-25; +} +.has-background-danger-75 { + background-color: $danger-75; +} +.has-background-danger-50 { + background-color: $danger-50; +} +.has-background-danger-25 { + background-color: $danger-25; +} + +:root { + --scm-secondary-background: #{$scheme-main}; + --scm-secondary-text: #{$white}; + --scm-border: 2px solid #{$white-ter}; + --scm-hover-color: #{$grey}; + --scm-column-selection: #{$link-dark}; + + --sh-base-color: #{$white}; + --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + --sh-block-background: #{$scheme-main}; + --sh-inline-code-color: #ff3860; + --sh-inline-code-background: #fbe7eb; + --sh-comment-color: #9a9a9a; + --sh-punctuation-color: #999999; + --sh-property-color: #2c99c7; + --sh-selector-color: #009dff; + --sh-operator-color: #999999; + --sh-operator-bg: inherit; + --sh-variable-color: #c386ca; + --sh-function-color: #ff6181; + --sh-keyword-color: #00a984; + --sh-selected-color: #{$warning-dark}; + --sh-highlight-background: #f5f5f5; + --sh-highlight-accent: #99d8f3; + + --diff-background-color: #{$scheme-main}; + --diff-text-color: #{$white-bis}; + --diff-font-family: Consolas, Courier, monospace; + --diff-selection-background-color: #{desaturate(#b3d7ff, 20%)}; + --diff-gutter-insert-background-color: #{desaturate(#05c71d, 20%)}; + --diff-gutter-delete-background-color: #{desaturate(#eb7a85, 20%)}; + --diff-gutter-selected-background-color: #{desaturate(#fffce0, 20%)}; + --diff-code-insert-background-color: #{desaturate(#05240b, 20%)}; + --diff-code-delete-background-color: #{desaturate(#230608, 20%)}; + --diff-code-insert-edit-background-color: #{desaturate(#c0dc91, 20%)}; + --diff-code-delete-edit-background-color: #{desaturate(#000, 20%)}; + --diff-code-selected-background-color: #{desaturate(#fffce0, 20%)}; + --diff-omit-gutter-line-color: #cb2a1d; +} + +.menu-list { + a { + > li { + border-color: $grey-light; + } + li:last-child { + border-color: $grey-light; + } + } +} + +//popover +.popover { + border: 1px solid $popover-border-color; +} + +.modal-card { + border: 1px solid $border; + + & .modal-close, + & .delete { + background-color: $background; + } +} + +.card-table { + tr { + a { + color: $grey-light; + } + + &:hover { + td { + background-color: $grey-darker; + + &.is-darker { + background-color: $black-ter; + } + } + } + } + td { + background-color: $black-ter; + border-bottom: none; + + &.is-darker { + background-color: $grey-dark; + } + } + &.is-hoverable tbody tr:not(.is-selected):hover { + background-color: $grey-darker; + } +} + +.diff-code-conflict { + background-color: #332900; +} + +.diff-gutter-conflict { + background-color: #bc9f2a; +} + +.diff-decoration-content div { + color: $scheme-main; +} + +//Display darker version of background image +.has-scm-background { + background-image: url(images/scmManagerHeroDark.jpg) !important; +} + +.has-hover-visible:hover { + color: $grey !important; +} diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss index 88db29ca82..94fd4356c9 100644 --- a/scm-ui/ui-styles/src/highcontrast.scss +++ b/scm-ui/ui-styles/src/highcontrast.scss @@ -24,14 +24,20 @@ @import "utils/_pre.scss"; -// $text: $white; +$red: #e63453; + $scheme-main: #050514; $background: $grey-dark; $text: $white-ter; $text-strong: $white-bis; -$danger: #e63453; -$code: lighten($danger, 25%); +$secondary-least: $scheme-main; +$secondary-less: $black-ter; +$secondary: $white-bis; +$secondary-more: $white-ter; +$secondary-most: $white; + +$code: lighten($red, 25%); $primary-invert: #050514; $info-invert: #050514; $link-invert: #050514; @@ -41,7 +47,7 @@ $danger-invert: #050514; $light-gray: #f2f2f2; -$footer-background-color: $grey-dark; +$footer-background-color: $black-ter; $footer-color: $white-ter; //make horizontal lines pop more @@ -50,6 +56,11 @@ $hr-background-color: $white-bis; $box-background-color: scale-color($scheme-main, $lightness: 15%); $box-background-color: $grey-darker; +$menu-label-color: $scheme-main; +$menu-item-color: $white-ter; + +$panel-heading-background-color: $black-ter; + $modal-card-head-background-color: $black-ter; $modal-card-body-background-color: $scheme-main; @@ -64,13 +75,14 @@ $tooltip-background-color: $white-bis; $tooltip-background-opacity: 0.9 !default; $tooltip-color: $scheme-main; +$border-width: 2px; +$border: $white-ter; + @import "utils/_post.scss"; :root { --scm-secondary-background: #{$scheme-main}; --scm-secondary-text: #{$white}; - --scm-border: 2px solid #{$white-ter}; - --scm-info-color: #{$info}; --scm-hover-color: #{$grey}; --scm-column-selection: #{$link-dark}; @@ -108,17 +120,6 @@ $tooltip-color: $scheme-main; } .button { - &.is-primary, - &.is-info, - &.is-link, - &.is-success, - &.is-warning, - &.is-danger { - &.is-outlined { - background-color: inherit; - } - } - &.is-primary:hover, &.is-primary.is-hovered { background-color: scale-color($primary, $lightness: -5%); @@ -205,36 +206,21 @@ $tooltip-color: $scheme-main; } } -.menu-label { - color: $scheme-main; -} - -.menu-list { - a { - color: $white-ter; - - &.is-active { - background-color: $scheme-main; - } - } -} - //footer is overwritten in _main.scss footer.footer { - background-color: $black-ter; a { color: scale-color($link, $lightness: 25%); } } .card { - border: 1px solid $white-ter; + border: 1px solid $border; box-shadow: none; } //card .modal-card { - border: 1px solid $white-ter; + border: 1px solid $border; & .modal-close, & .delete { @@ -257,9 +243,6 @@ footer.footer { background-color: $grey-darker; } } - a { - color: $link; - } } } td { @@ -278,18 +261,8 @@ footer.footer { } } -// panels .panel { border-color: $white-bis; - - .panel-heading { - background-color: $black-ter; - } - - .panel-footer { - background-color: $black-ter; - color: $white-bis; - } } //diffs @@ -338,9 +311,6 @@ td:first-child.diff-gutter-conflict:before { //inline member tags .tag:not(body) { - border: 1px solid transparent; - background-color: $white; - &.is-delete { &::before, &::after { @@ -363,11 +333,6 @@ td:first-child.diff-gutter-conflict:before { &.is-light .has-text-link { color: scale-color($link, $lightness: -50%) !important; } - - //outline-tags - &.is-outlined { - background-color: $scheme-main; - } } //cards receive white border @@ -376,21 +341,7 @@ td:first-child.diff-gutter-conflict:before { } .popover { - border: 1px solid $white-ter; - - &:before { - border-bottom-color: $grey-dark; - border-left-color: $grey-dark; - } -} - -.notifications .dropdown-menu { - border: 1px solid $white-ter; - - &:before { - border-bottom-color: $white-ter; - border-left-color: $white-ter; - } + border: 1px solid $border; } //Display darker version of background image @@ -398,61 +349,6 @@ td:first-child.diff-gutter-conflict:before { background-image: url(images/scmManagerHeroDark.jpg) !important; } -.has-text-secondary-least { - color: $scheme-main !important; -} -a.has-text-secondary-least:hover, -a.has-text-secondary-least:focus { - color: lighten($scheme-main, 10%) !important; -} -.has-background-secondary-least { - background-color: $scheme-main !important; -} - -.has-text-secondary-less { - color: $black-ter !important; -} -a.has-text-secondary-less:hover, -a.has-text-secondary-less:focus { - color: lighten($black-ter, 10%) !important; -} -.has-background-secondary-less { - background-color: $black-ter !important; -} - -.has-text-secondary { - color: $white-bis !important; -} -a.has-text-secondary:hover, -a.has-text-secondary:focus { - color: lighten($white-bis, 10%) !important; -} -.has-background-secondary { - background-color: $white-bis !important; -} - -.has-text-secondary-more { - color: $white-ter !important; -} -a.has-text-secondary-more:hover, -a.has-text-secondary-more:focus { - color: lighten($white-ter, 10%) !important; -} -.has-background-secondary-more { - background-color: $white-ter !important; -} - -.has-text-secondary-most { - color: $white !important; -} -a.has-text-secondary-most:hover, -a.has-text-secondary-most:focus { - color: lighten($white, 10%) !important; -} -.has-background-secondary-most { - background-color: $white !important; -} - .has-background-light { color: $grey-dark; } @@ -461,15 +357,8 @@ a.has-text-secondary-most:focus { color: $white-bis !important; } -[disabled].textarea::placeholder, -[disabled].input::placeholder, -fieldset[disabled] .textarea::placeholder, -fieldset[disabled] .input::placeholder { - color: $white-bis; -} - .repository-export-info-box { - background-color: $high-contrast-info-25; + background-color: scale-color($info, $lightness: -75%); border: 0.2rem solid; } diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss index 68766ba5dd..84b79a14de 100644 --- a/scm-ui/ui-styles/src/light.scss +++ b/scm-ui/ui-styles/src/light.scss @@ -23,18 +23,38 @@ */ @import "utils/_pre.scss"; -// colors defined in variables/commons.scss -$subtitle-color: #666; + $warning-invert: #88550d; + +$border: $grey-lighter; +$border-width: 1px; + +$secondary-least: $white; +$secondary-less: $white-ter; +$secondary: $grey-light; +$secondary-more: $grey-darker; +$secondary-most: $black; + +// layout +$footer-background-color: $white-ter; + +// element $button-disabled-opacity: 0.25; +$subtitle-color: #666; + +// component +$menu-label-color: $white; +$menu-item-color: #333; + +// extension +$popover-background-color: $grey-light; + @import "utils/_post.scss"; :root { --scm-secondary-background: #{$white}; --scm-secondary-text: #{$black}; - --scm-border: 1px solid #dbdbdb; - --scm-info-color: #{$info}; --scm-hover-color: #{$black-ter}; --scm-column-selection: #{$link-25}; @@ -57,72 +77,31 @@ $button-disabled-opacity: 0.25; --sh-highlight-accent: #99d8f3; } +.button { + &.is-primary, + &.is-info, + &.is-link, + &.is-success, + &.is-warning, + &.is-danger { + &.is-outlined { + background-color: $white; + } + } +} + +footer.footer { + a { + color: darken($info, 15%); + } +} + .popover:before { border-bottom-color: white; border-left-color: white; box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2); } -.notifications .dropdown-menu:before { - border-bottom-color: white; - border-left-color: white; -} - -.has-text-secondary-least { - color: $white !important; -} -a.has-text-secondary-least:hover, -a.has-text-secondary-least:focus { - color: lighten($white, 10%) !important; -} -.has-background-secondary-least { - background-color: $white !important; -} - -.has-text-secondary-less { - color: $white-ter !important; -} -a.has-text-secondary-less:hover, -a.has-text-secondary-less:focus { - color: lighten($white-ter, 10%) !important; -} -.has-background-secondary-less { - background-color: $white-ter !important; -} - -.has-text-secondary { - color: $grey-light !important; -} -a.has-text-secondary:hover, -a.has-text-secondary:focus { - color: lighten($grey-light, 10%) !important; -} -.has-background-secondary { - background-color: $grey-light !important; -} - -.has-text-secondary-more { - color: $grey-darker !important; -} -a.has-text-secondary-more:hover, -a.has-text-secondary-more:focus { - color: lighten($grey-darker, 10%) !important; -} -.has-background-secondary-more { - background-color: $grey-darker !important; -} - -.has-text-secondary-most { - color: $black !important; -} -a.has-text-secondary-most:hover, -a.has-text-secondary-most:focus { - color: lighten($black, 10%) !important; -} -.has-background-secondary-most { - background-color: $black !important; -} - .has-hover-visible:hover { color: $grey-darker !important; } diff --git a/scm-ui/ui-styles/src/variables/_commons.scss b/scm-ui/ui-styles/src/variables/_commons.scss index 8b4f156d4b..74c2d8b48f 100644 --- a/scm-ui/ui-styles/src/variables/_commons.scss +++ b/scm-ui/ui-styles/src/variables/_commons.scss @@ -21,16 +21,26 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -//$link: #007EB0; -$info: #33b2e8; + $turquoise: #00d1df; $blue: #33b2e8; $cyan: $blue; $green: #00c79b; -$warning: #ffdd57; +$yellow: #ffdd57; +$red: #ff3860; + $blue-light: #98d8f3; -$danger: #ff3860; $family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; $input-border-color: $blue-light; + +$navbar-background-color: transparent; +$navbar-item-color: $white; +$navbar-item-hover-color: $navbar-item-color; +$navbar-item-active-color: $navbar-item-color; +$navbar-item-hover-background-color: rgba(10, 10, 10, 0.1); + +$footer-padding: inherit; + +$popover-border-color: $white; diff --git a/scm-ui/ui-styles/src/variables/_derived.scss b/scm-ui/ui-styles/src/variables/_derived.scss index d730e9d3b5..cc7d66d8a1 100644 --- a/scm-ui/ui-styles/src/variables/_derived.scss +++ b/scm-ui/ui-styles/src/variables/_derived.scss @@ -43,24 +43,3 @@ $danger-75: scale-color($danger, $lightness: 25%); $danger-50: scale-color($danger, $lightness: 50%); $danger-25: scale-color($danger, $lightness: 75%); -$high-contrast-dark-75: scale-color($dark, $lightness: -25%); -$high-contrast-dark-50: scale-color($dark, $lightness: -50%); -$high-contrast-dark-25: scale-color($dark, $lightness: -75%); -$high-contrast-info-75: scale-color($info, $lightness: -25%); -$high-contrast-info-50: scale-color($info, $lightness: -50%); -$high-contrast-info-25: scale-color($info, $lightness: -75%); -$high-contrast-link-75: scale-color($link, $lightness: -25%); -$high-contrast-link-50: scale-color($link, $lightness: -50%); -$high-contrast-link-25: scale-color($link, $lightness: -75%); -$high-contrast-primary-75: scale-color($primary, $lightness: -25%); -$high-contrast-primary-25: scale-color($primary, $lightness: -75%); -$high-contrast-primary-50: scale-color($primary, $lightness: -50%); -$high-contrast-success-75: scale-color($success, $lightness: -25%); -$high-contrast-success-50: scale-color($success, $lightness: -50%); -$high-contrast-success-25: scale-color($success, $lightness: -75%); -$high-contrast-warning-75: scale-color($warning, $lightness: -25%); -$high-contrast-warning-50: scale-color($warning, $lightness: -50%); -$high-contrast-warning-25: scale-color($warning, $lightness: -75%); -$high-contrast-danger-75: scale-color($danger, $lightness: -25%); -$high-contrast-danger-50: scale-color($danger, $lightness: -50%); -$high-contrast-danger-25: scale-color($danger, $lightness: -75%); diff --git a/scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg b/scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg new file mode 100644 index 0000000000..35b8e4dfb8 --- /dev/null +++ b/scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scm-ui/ui-webapp/public/index.mustache b/scm-ui/ui-webapp/public/index.mustache index 6926c8c4ce..6733576363 100644 --- a/scm-ui/ui-webapp/public/index.mustache +++ b/scm-ui/ui-webapp/public/index.mustache @@ -29,10 +29,18 @@ linkElement.rel = 'stylesheet'; linkElement.type = 'text/css'; var theme = localStorage.getItem('scm.theme'); - if (theme === 'highcontrast') { + if (theme === 'light') { + linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css" + } else if (theme === 'dark') { + linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css" + } else if (theme === 'highcontrast') { linkElement.href = "{{ contextPath }}/assets/ui-theme-highcontrast.css" } else { - linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css" + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css" + } else { + linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css" + } } document.head.appendChild(linkElement); diff --git a/scm-ui/ui-webapp/public/locales/de/commons.json b/scm-ui/ui-webapp/public/locales/de/commons.json index 7cdda9eb94..22588cf11d 100644 --- a/scm-ui/ui-webapp/public/locales/de/commons.json +++ b/scm-ui/ui-webapp/public/locales/de/commons.json @@ -105,11 +105,19 @@ "submit": "Anwenden", "light": { "displayName": "Hell", - "description": "'Hell' is das Standard-Design des SCM-Managers" + "description": "„Hell“ is das Standard-Design des SCM-Managers" }, "highcontrast": { "displayName": "Hoher Kontrast", - "description": "'Hoher Kontrast' ist ein dunkles Design mit einem hohen Kontrast" + "description": "„Hoher Kontrast“ ist ein dunkles Design mit einem hohen Kontrast" + }, + "dark": { + "displayName": "Dunkel", + "description": "„Dunkel“ ist ein entspannteres, dunkles Design" + }, + "systemdefault": { + "displayName": "Systemstandard", + "description": "Verwendet die Standardeinstellung des Systems" } } }, diff --git a/scm-ui/ui-webapp/public/locales/en/commons.json b/scm-ui/ui-webapp/public/locales/en/commons.json index b9913f14c2..df449379be 100644 --- a/scm-ui/ui-webapp/public/locales/en/commons.json +++ b/scm-ui/ui-webapp/public/locales/en/commons.json @@ -111,6 +111,14 @@ "highcontrast": { "displayName": "High contrast", "description": "The high contrast mode is a dark theme with a high contrast between the colors" + }, + "dark": { + "displayName": "Dark", + "description": "The dark mode is a more relaxed, dark theme" + }, + "systemdefault": { + "displayName": "System default", + "description": "Use the default setting of the system" } } }, diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx index 2882af543a..41ec4e8225 100644 --- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx +++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx @@ -30,7 +30,7 @@ type Props = { }; const ActionWrapper = styled.div` - border: 2px solid #e9f7fd; + border: 2px solid var(--scm-border-color); `; export default class PluginBottomActions extends React.Component { diff --git a/scm-ui/ui-webapp/src/components/HeaderButton.tsx b/scm-ui/ui-webapp/src/components/HeaderButton.tsx index b68bfc7928..b4641439aa 100644 --- a/scm-ui/ui-webapp/src/components/HeaderButton.tsx +++ b/scm-ui/ui-webapp/src/components/HeaderButton.tsx @@ -26,9 +26,8 @@ import styled from "styled-components"; import { devices } from "@scm-manager/ui-components"; const HeaderButton = styled.div` - // TODO: ersetzen? @media screen and (max-width: ${devices.desktop.width - 1}px) { - border-top: 1px solid white; + border-top: 1px solid var(--scm-white-color); margin-top: 1rem; padding-top: 1rem; padding-bottom: 1rem; diff --git a/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx b/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx index 430680d62c..43bef6d319 100644 --- a/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx +++ b/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx @@ -30,12 +30,13 @@ type Props = { icon: string; }; -export const headerButtonContentClassName = "is-flex is-align-items-center is-justify-content-flex-start"; +export const headerButtonContentClassName = + "is-flex is-align-items-center is-justify-content-flex-start has-text-inherit"; const HeaderButtonContent: FC = ({ burgerMode, icon, label }) => ( <> - - {" " + label} + + {" " + label} ); diff --git a/scm-ui/ui-webapp/src/components/InfoBox.tsx b/scm-ui/ui-webapp/src/components/InfoBox.tsx index 426b20d217..e77b6213c3 100644 --- a/scm-ui/ui-webapp/src/components/InfoBox.tsx +++ b/scm-ui/ui-webapp/src/components/InfoBox.tsx @@ -86,9 +86,9 @@ class InfoBox extends React.Component { "is-align-items-center" )} > - -
    {t("login." + type)}
    -
    {t("login.tip")}
    + +
    {t("login." + type)}
    +
    {t("login.tip")}
    {this.renderBody()} diff --git a/scm-ui/ui-webapp/src/components/LoginForm.tsx b/scm-ui/ui-webapp/src/components/LoginForm.tsx index 0455702bb7..419937fec8 100644 --- a/scm-ui/ui-webapp/src/components/LoginForm.tsx +++ b/scm-ui/ui-webapp/src/components/LoginForm.tsx @@ -42,17 +42,20 @@ const TopMarginBox = styled.div` `; const AvatarWrapper = styled.figure` - margin-top: -70px; - padding-bottom: 20px; + display: flex; + justify-content: center; + margin: -70px auto 20px; + width: 128px; + height: 128px; + background: var(--scm-white-color); + border: 1px solid lightgray; + border-radius: 50%; `; const AvatarImage = styled(Image)` - width: 128px; - height: 128px; + width: 75%; + margin-left: 0.25rem; padding: 5px; - background: white; - border: 1px solid lightgray; - border-radius: 50%; `; class LoginForm extends React.Component { @@ -104,7 +107,7 @@ class LoginForm extends React.Component {

    {t("login.subtitle")}

    - + diff --git a/scm-ui/ui-webapp/src/containers/Alerts.tsx b/scm-ui/ui-webapp/src/containers/Alerts.tsx index 7046d02b4f..f079e5f3d1 100644 --- a/scm-ui/ui-webapp/src/containers/Alerts.tsx +++ b/scm-ui/ui-webapp/src/containers/Alerts.tsx @@ -86,7 +86,7 @@ const AlertsList: FC = ({ data }) => ( const ShieldNotificationIcon: FC = () => { const [t] = useTranslation("commons"); - return ; + return ; }; type ComponentAlert = Alert & { diff --git a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx index 9ab844b13f..4209568130 100644 --- a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx +++ b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx @@ -87,31 +87,15 @@ const StyledNavBar = styled.nav` padding: 0; } - //TODO Ersetzen? .navbar-brand { @media screen and (max-width: ${devices.desktop.width - 1}px) { - border-bottom: 1px solid white; + border-bottom: 1px solid var(--scm-white-color); } } .navbar-menu.is-active .navbar-end .navbar-item { border-left: solid 5px transparent; } - - .navbar-burger { - color: #fff !important; - } - - .navbar-item { - :hover:not(.logo) { - background-color: rgba(10, 10, 10, 0.1) !important; - color: #fff; - } - color: #fff !important; - background-color: transparent !important; - } - color: #fff; - background-color: transparent !important; `; type Props = { diff --git a/scm-ui/ui-webapp/src/containers/Notifications.tsx b/scm-ui/ui-webapp/src/containers/Notifications.tsx index 43cf713fb2..4f31481f03 100644 --- a/scm-ui/ui-webapp/src/containers/Notifications.tsx +++ b/scm-ui/ui-webapp/src/containers/Notifications.tsx @@ -222,7 +222,7 @@ const BellNotificationIcon: FC = ({ data }) => { className="is-size-4" iconStyle={counter === 0 ? "far" : "fas"} name="bell" - color="white" + color="inherit" alt={t("notifications.bellTitle")} /> ); diff --git a/scm-ui/ui-webapp/src/containers/Theme.tsx b/scm-ui/ui-webapp/src/containers/Theme.tsx index 7407cc2d8d..d393033526 100644 --- a/scm-ui/ui-webapp/src/containers/Theme.tsx +++ b/scm-ui/ui-webapp/src/containers/Theme.tsx @@ -23,15 +23,16 @@ */ import React, { FC, useState } from "react"; -import { createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components"; +import { ButtonGroup, createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components"; import { useForm } from "react-hook-form"; import styled from "styled-components"; import { useTranslation } from "react-i18next"; +import classNames from "classnames"; const LS_KEY = "scm.theme"; const useThemeState = () => { - const [theme] = useState(localStorage.getItem(LS_KEY) || "light"); + const [theme] = useState(localStorage.getItem(LS_KEY) || "systemdefault"); const [isLoading, setLoading] = useState(false); const setTheme = (name: string) => { @@ -47,7 +48,7 @@ type ThemeForm = { theme: string; }; -const themes = ["light", "highcontrast"]; +const themes = ["light", "dark", "highcontrast", "systemdefault"]; const RadioColumn = styled.div` flex: none; @@ -60,7 +61,8 @@ const Theme: FC = () => { register, setValue, handleSubmit, - formState: { isDirty } + formState: { isDirty }, + watch } = useForm({ mode: "onChange", defaultValues: { @@ -76,14 +78,23 @@ const Theme: FC = () => { return ( <> {t("profile.theme.subtitle")} - + {themes.map(theme => { const a11yId = createA11yId("theme"); return (
    setValue("theme", theme, { shouldDirty: true })} - className="card ml-1 mb-5 control columns is-vcentered has-cursor-pointer" + className={classNames( + "card", + "ml-1", + "mb-5", + "control", + "columns", + "is-vcentered", + "has-cursor-pointer", + { "has-background-secondary-less": theme === watch().theme } + )} > @@ -95,7 +106,9 @@ const Theme: FC = () => {
    ); })} - + + + ); diff --git a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx index d0361861b5..682083d6bc 100644 --- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx +++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx @@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next"; import { Branch } from "@scm-manager/ui-types"; const ActionBar = styled.div` - border: 1px solid #dbdbdb; + border: 1px solid var(--scm-border-color); border-radius: 4px; font-size: 1.25em; font-weight: 300; diff --git a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx index f57bd735b1..cbe9417d78 100644 --- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx +++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx @@ -45,7 +45,7 @@ const RepositoryFormButton: FC = ({ path, icon, label }) => { color={isSelected ? "link is-selected" : undefined} link={!isSelected ? href : undefined} > - +

    {t(`plugins:${label}`, label)}

    ); diff --git a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx index f147d11366..72b48923f4 100644 --- a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx +++ b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx @@ -43,7 +43,7 @@ const InfoBox = styled.div` white-space: pre-line; border-radius: 2px; border-left: 0.2rem solid; - border-color: #33b2e8; + border-color: var(--scm-info-color); `; type Props = { diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx index cfa6c7f555..05364c9074 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx @@ -42,7 +42,7 @@ type Props = { }; const HeaderWrapper = styled.div` - border-bottom: solid 1px #dbdbdb; + border-bottom: 1px solid var(--scm-border-color); font-size: 1.25em; font-weight: 300; line-height: 1.25; @@ -50,7 +50,7 @@ const HeaderWrapper = styled.div` `; const BorderBottom = styled.div` - border-bottom: solid 1px #dbdbdb; + border-bottom: 1px solid var(--scm-border-color); `; const FullWidthTitleHeader = styled.div` diff --git a/scm-ui/ui-webapp/src/search/Syntax.tsx b/scm-ui/ui-webapp/src/search/Syntax.tsx index 1de57ecc4f..c13ed62e1c 100644 --- a/scm-ui/ui-webapp/src/search/Syntax.tsx +++ b/scm-ui/ui-webapp/src/search/Syntax.tsx @@ -184,6 +184,7 @@ const TimestampConverter: FC = () => {
    { - - {copying ? ( - - ) : ( - - )} - +
    + + {copying ? ( + + ) : ( + + )} + +
    );