From b127af7bb63597903ebe43175c57646fe2163151 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 27 Dec 2021 13:21:14 +0200 Subject: [PATCH] DRY: light theme sass mixin (#4606) Signed-off-by: Roman --- .../+add-cluster/add-cluster.module.scss | 2 +- .../+namespaces/namespace-select-filter.scss | 14 ++++++----- .../components/checkbox/checkbox.scss | 23 ++++++++++--------- src/renderer/components/checkbox/checkbox.tsx | 4 +--- .../delete-cluster-dialog.tsx | 1 - .../kube-object-details.scss | 6 +++++ .../kubeconfig-dialog.module.scss | 2 +- src/renderer/components/menu/menu.scss | 2 +- src/renderer/components/mixins.scss | 11 +++++++++ .../port-forward/port-forward-dialog.tsx | 2 -- 10 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/renderer/components/+add-cluster/add-cluster.module.scss b/src/renderer/components/+add-cluster/add-cluster.module.scss index f80ed3bdea..e4dba3519b 100644 --- a/src/renderer/components/+add-cluster/add-cluster.module.scss +++ b/src/renderer/components/+add-cluster/add-cluster.module.scss @@ -38,7 +38,7 @@ border-radius: var(--border-radius); } -:global(.theme-light) { +@include theme-light { .editor { border-color: var(--borderFaintColor); } diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss index 69aa0bff9a..00e067ddf5 100644 --- a/src/renderer/components/+namespaces/namespace-select-filter.scss +++ b/src/renderer/components/+namespaces/namespace-select-filter.scss @@ -1,11 +1,13 @@ +@include theme-light { + .NamespaceSelectFilter { + --gradientColor: white; + } +} + .NamespaceSelectFilter { --gradientColor: var(--select-menu-bgc); .Select { - &.theme-light { - --gradientColor: white; - } - &__placeholder { width: 100%; white-space: nowrap; @@ -34,12 +36,12 @@ } &::before { - left: 0px; + left: 0; background: linear-gradient(to right, var(--gradientColor) 0px, transparent); } &::after { - right: 0px; + right: 0; background: linear-gradient(to left, var(--gradientColor) 0px, transparent); } } diff --git a/src/renderer/components/checkbox/checkbox.scss b/src/renderer/components/checkbox/checkbox.scss index edc605c925..b5088bc47f 100644 --- a/src/renderer/components/checkbox/checkbox.scss +++ b/src/renderer/components/checkbox/checkbox.scss @@ -19,6 +19,12 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +@include theme-light { + .Checkbox { + --checkbox-color-active: var(--blue); + --checkbox-bgc-active: none; + } +} .Checkbox { --checkbox-color: var(--textColorPrimary); // tick color [√] @@ -27,16 +33,6 @@ flex-shrink: 0; - &.theme { - &-dark { - // default - } - &-light { - --checkbox-color-active: var(--blue); - --checkbox-bgc-active: none; - } - } - &:hover { input:not(:checked):not(:disabled) { ~ .tick:after { @@ -47,25 +43,30 @@ input[type="checkbox"] { display: none; + &:checked { ~ .box { color: var(--checkbox-color-active); background: var(--checkbox-bgc-active); border-color: var(--checkbox-bgc-active); + &:after { opacity: 1; } } } + &:disabled { ~ .box { color: var(--checkbox-color); } + ~ * { opacity: .5; pointer-events: none; } } + &:not(:disabled) ~ * { cursor: pointer; } @@ -104,4 +105,4 @@ margin-left: .5em; } } -} \ No newline at end of file +} diff --git a/src/renderer/components/checkbox/checkbox.tsx b/src/renderer/components/checkbox/checkbox.tsx index a6669a0ca7..14bf9816b1 100644 --- a/src/renderer/components/checkbox/checkbox.tsx +++ b/src/renderer/components/checkbox/checkbox.tsx @@ -24,7 +24,6 @@ import React from "react"; import { boundMethod, cssNames } from "../../utils"; export interface CheckboxProps { - theme?: "dark" | "light"; className?: string; label?: React.ReactNode; inline?: boolean; @@ -50,12 +49,11 @@ export class Checkbox extends React.PureComponent { } render() { - const { label, inline, className, value, theme, children, ...inputProps } = this.props; + const { label, inline, className, value, children, ...inputProps } = this.props; const componentClass = cssNames("Checkbox flex align-center", className, { inline, checked: value, disabled: this.props.disabled, - [`theme-${theme}`]: theme, }); return ( diff --git a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx index 1a2fbb0506..e6a03444b6 100644 --- a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx +++ b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx @@ -244,7 +244,6 @@ export class DeleteClusterDialog extends React.Component {
Select current-context{" "} diff --git a/src/renderer/components/kube-object-details/kube-object-details.scss b/src/renderer/components/kube-object-details/kube-object-details.scss index 6e9232616d..b7e2b0c6a0 100644 --- a/src/renderer/components/kube-object-details/kube-object-details.scss +++ b/src/renderer/components/kube-object-details/kube-object-details.scss @@ -21,4 +21,10 @@ .KubeObjectDetails { z-index: $zIndex-drawer + 1 !important; + + .drawer-title { + .Menu { + border: none; + } + } } \ No newline at end of file diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss index 364d10ad01..23eff78a6f 100644 --- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss +++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss @@ -33,7 +33,7 @@ } } -:global(.theme-light) { +@include theme-light { .editor { border: 1px solid gainsboro; border-radius: var(--border-radius); diff --git a/src/renderer/components/menu/menu.scss b/src/renderer/components/menu/menu.scss index b9403436d5..103dd90172 100644 --- a/src/renderer/components/menu/menu.scss +++ b/src/renderer/components/menu/menu.scss @@ -119,7 +119,7 @@ } } -.theme-light { +@include theme-light { .Menu { border: 1px solid var(--borderColor); } diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss index a3bff39a6b..5cf7458ae0 100755 --- a/src/renderer/components/mixins.scss +++ b/src/renderer/components/mixins.scss @@ -64,3 +64,14 @@ -webkit-app-region: no-drag; } } + +@mixin theme-light() { + $selector: "theme-light"; // keep in sync with class in `theme.store.ts` + + body.#{$selector} { + @content; + } + :global(body.#{$selector}) { + @content; // css-modules (*.module.scss) + } +} diff --git a/src/renderer/port-forward/port-forward-dialog.tsx b/src/renderer/port-forward/port-forward-dialog.tsx index bacfff9fa0..c306b0aaf3 100644 --- a/src/renderer/port-forward/port-forward-dialog.tsx +++ b/src/renderer/port-forward/port-forward-dialog.tsx @@ -145,14 +145,12 @@ export class PortForwardDialog extends Component {
dialogState.useHttps = value} /> dialogState.openInBrowser = value}