DRY: light theme sass mixin (#4606)

Signed-off-by: Roman <ixrock@gmail.com>

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);
   }

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);
       }
     }

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;
     }
   }
-}
+}

src/renderer/components/checkbox/checkbox.tsx

@@ -24,7 +24,6 @@ import React from "react";
 import { boundMethod, cssNames } from "../../utils";
 
 export interface CheckboxProps<T = boolean> {
-  theme?: "dark" | "light";
   className?: string;
   label?: React.ReactNode;
   inline?: boolean;
@@ -50,12 +49,11 @@ export class Checkbox extends React.PureComponent<CheckboxProps> {
   }
 
   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 (

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx

@@ -244,7 +244,6 @@ export class DeleteClusterDialog extends React.Component {
               <div className="mt-4">
                 <Checkbox
                   data-testid="context-switch"
-                  theme="light"
                   label={(
                     <>
                       <span className="font-semibold">Select current-context</span>{" "}

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;
+    }
+  }
 }

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);

src/renderer/components/menu/menu.scss

@@ -119,7 +119,7 @@
   }
 }
 
-.theme-light {
+@include theme-light {
   .Menu {
     border: 1px solid var(--borderColor);
   }

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)
+  }
+}

src/renderer/port-forward/port-forward-dialog.tsx

@@ -145,14 +145,12 @@ export class PortForwardDialog extends Component<Props> {
           </div>
           <Checkbox
             data-testid="port-forward-https"
-            theme="light"
             label="https"
             value={dialogState.useHttps}
             onChange={value => dialogState.useHttps = value}
           />
           <Checkbox
             data-testid="port-forward-open"
-            theme="light"
             label="Open in Browser"
             value={dialogState.openInBrowser}
             onChange={value => dialogState.openInBrowser = value}