Set scrollbar colors as global styles (#1484)

* Setting global webkit-scrollbar styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing usage of custom-scrollbar mixin

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set overflow:auto on .Table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing .drawer-content paddings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+apps-releases/release-details.scss

@@ -32,7 +32,6 @@
       border: 1px solid var(--drawerSubtitleBackground);
       border-radius: $radius;
       overflow: auto;
-      @include custom-scrollbar();
 
       .TableHead {
         border-bottom: none;

src/renderer/components/+preferences/preferences.scss

@@ -6,7 +6,6 @@
 
     .Badge {
       display: flex;
-      margin: 0;
       margin-bottom: 1px;
       padding: $padding $spacing;
     }

src/renderer/components/+preferences/preferences.tsx

@@ -137,7 +137,7 @@ export class Preferences extends React.Component {
           formatOptionLabel={this.formatHelmOptionLabel}
           controlShouldRenderValue={false}
         />
-        <div className="repos flex gaps column">
+        <div className="repos flex column">
           {Array.from(this.helmAddedRepos).map(([name, repo]) => {
             const tooltipId = `message-${name}`;
             return (

src/renderer/components/+whats-new/whats-new.scss

@@ -26,7 +26,7 @@
   }
 
   > .content {
-    @include custom-scrollbar;
+    overflow: auto;
     margin-top: $spacing;
     padding: $spacing * 2;
 

src/renderer/components/ace-editor/ace-editor.scss

@@ -7,10 +7,6 @@
 
   .theme-light & {
     border: 1px solid gainsboro;
-
-    .ace_scrollbar {
-      @include custom-scrollbar(dark);
-    }
   }
 
   > .editor {
@@ -51,8 +47,4 @@
   .ace_comment {
     color: #808080;
   }
-
-  .ace_scrollbar {
-    @include custom-scrollbar;
-  }
 }

src/renderer/components/app.scss

@@ -1,15 +1,6 @@
 @import "~flex.box";
 @import "fonts";
 
-*, *:before, *:after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  outline: none;
-  -webkit-font-smoothing: antialiased;
-}
-
 :root {
   --unit: 8px;
   --padding: var(--unit);
@@ -27,6 +18,33 @@
   --drag-region-height: 22px
 }
 
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+  height: 15px; // Align sizes visually
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollBarColor);
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  border-right-width: 5px;
+  border-radius: 16px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
 ::selection {
   background: $primary;
   color: white;

src/renderer/components/dialog/dialog.scss

@@ -1,7 +1,5 @@
 
 .Dialog {
-  @include custom-scrollbar;
-
   position: fixed;
   overflow: auto;
   left: 0;
@@ -11,6 +9,7 @@
   padding: $unit * 5;
   z-index: $zIndex-dialog;
   overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
+  overflow: auto;
 
   &.modal {
     background: transparentize(#222, .5);

src/renderer/components/dock/pod-logs.scss

@@ -3,12 +3,7 @@
   --overlay-active-bg: orange;
 
   .logs {
-    @include custom-scrollbar;
-
-    // fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight`
-    // `overflow: overlay` don't allow scroll to the last line
     overflow: auto;
-
     position: relative;
     color: $textColorAccent;
     background: $logsBackground;

src/renderer/components/dock/terminal-window.scss

@@ -5,17 +5,7 @@
   margin-left: $padding * 2;
   margin-top: $padding * 2;
 
-  .theme-light & {
-    .xterm-viewport {
-      @include custom-scrollbar(dark);
-    }
-  }
-
   > .xterm {
     overflow: hidden;
   }
-
-  .xterm-viewport {
-    @include custom-scrollbar;
-  }
 }

src/renderer/components/drawer/drawer.scss

@@ -10,12 +10,6 @@
   box-shadow: 0 0 $unit * 2 $boxShadow;
   z-index: $zIndex-drawer;
 
-  .theme-light & {
-    .drawer-content {
-      @include custom-scrollbar(dark);
-    }
-  }
-
   &.left {
     left: 0;
   }
@@ -71,11 +65,8 @@
   }
 
   .drawer-content {
-    @include custom-scrollbar;
+    overflow: auto;
-
-    > *:not(.Spinner) {
     padding: var(--spacing);
-    }
 
     .Table .TableHead {
       background-color: $contentColor;

src/renderer/components/layout/page-layout.scss

@@ -33,7 +33,7 @@
   }
 
   > .content-wrapper {
-    @include custom-scrollbar-themed;
+    overflow: auto;
     padding: $spacing * 2;
     display: flex;
     flex-direction: column;

src/renderer/components/layout/sidebar.scss

@@ -19,11 +19,7 @@
 
   &.pinned {
     .sidebar-nav {
-      @include custom-scrollbar;
+      overflow: auto;
-
-      .theme-light & {
-        @include custom-scrollbar(dark);
-      }
     }
   }
 
@@ -63,8 +59,6 @@
   }
 
   .sidebar-nav {
-    @include hidden-scrollbar;
-
     padding: $padding / 1.5 0;
 
     .Icon {

src/renderer/components/layout/tab-layout.scss

@@ -9,13 +9,8 @@
 
 
   main {
-    @include custom-scrollbar;
     $spacing: $margin * 2;
 
-    .theme-light & {
-      @include custom-scrollbar(dark);
-    }
-
     grid-area: main;
     overflow-y: scroll; // always reserve space for scrollbar (17px)
     overflow-x: auto;

src/renderer/components/layout/wizard-layout.scss

@@ -9,8 +9,8 @@
   grid-template-columns: 1fr 40%;
 
   > * {
-    @include custom-scrollbar-themed;
     --flex-gap: #{$spacing};
+    overflow: auto;
     padding: $spacing;
   }
 

src/renderer/components/markdown-viewer/markdown-viewer.scss

@@ -4,10 +4,8 @@
   line-height: 1.5;
   word-wrap: break-word;
 
-  &.light {
   pre, table {
-      @include custom-scrollbar(dark);
+    overflow: auto;
-    }
   }
 
   .pl-c {
@@ -513,7 +511,6 @@
   }
 
   table {
-    @include custom-scrollbar;
     border-collapse: collapse;
     display: table;
     width: 100%;
@@ -581,13 +578,12 @@
 
   .highlight pre,
   pre {
-    @include custom-scrollbar;
     padding: 16px;
     font-size: 85%;
     line-height: 1.45;
     background-color: $helmDescriptionPreBackground;
     border-radius: 3px;
-    overflow: auto !important;
+    overflow: auto;
   }
 
   pre code {

src/renderer/components/markdown-viewer/markdown-viewer.tsx

@@ -6,7 +6,6 @@ import React, { Component } from "react";
 import marked from "marked";
 import DOMPurify from "dompurify";
 import { cssNames } from "../../utils";
-import { themeStore } from "../../theme.store";
 
 DOMPurify.addHook('afterSanitizeAttributes', function (node) {
   // Set all elements owning target to target=_blank
@@ -29,7 +28,7 @@ export class MarkdownViewer extends Component<Props> {
     const html = DOMPurify.sanitize(marked(markdown));
     return (
       <div
-        className={cssNames("MarkDownViewer", className, themeStore.activeTheme.type)}
+        className={cssNames("MarkDownViewer", className)}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     );

src/renderer/components/mixins.scss

@@ -6,52 +6,6 @@
 @import "table/table.mixins";
 @import "+network/network-mixins";
 
-// todo: re-use in other places with theming
-@mixin custom-scrollbar-themed($invert: false) {
-  @if ($invert) {
-    @include custom-scrollbar(dark);
-    .theme-light & {
-      @include custom-scrollbar(light);
-    }
-  } @else {
-    // fits better with dark background
-    @include custom-scrollbar(light);
-    .theme-light & {
-      @include custom-scrollbar(dark);
-    }
-  }
-}
-
-@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
-  $themes: (
-    light: #5f6064,
-    dark: #bbb,
-  );
-
-  $scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
-  $scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);
-
-  overflow: auto; // allow scrolling for container
-
-  // Webkit
-  &::-webkit-scrollbar {
-    width: $scrollBarSize;
-    height: $scrollBarSize;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: $scrollBarColor;
-    background-clip: padding-box;
-    border: $borderSpacing solid transparent;
-    border-radius: $scrollBarSize;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
 // Hide scrollbar but keep the element scrollable
 @mixin hidden-scrollbar {
   overflow: auto;

src/renderer/components/select/select.scss

@@ -75,7 +75,6 @@ html {
       min-width: 100%;
 
       &-list {
-        @include custom-scrollbar;
         padding-right: 1px;
         padding-left: 1px;
         width: max-content;
@@ -152,10 +151,6 @@ html {
       --select-option-selected-bgc: $textColorSecondary;
 
       .Select {
-        &__menu-list {
-          @include custom-scrollbar($theme: dark);
-        }
-
         &__multi-value {
           background: none;
           box-shadow: 0 0 0 1px $textColorSecondary;

src/renderer/components/table/table.scss

@@ -1,19 +1,14 @@
 .Table {
-  &.scrollable {
-    .theme-light & {
-      @include custom-scrollbar(dark);
-    }
-
-    @include custom-scrollbar();
-    flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox
-  }
-
   &.autoSize {
     .TableCell {
       flex: 1 0;
     }
   }
 
+  &.scrollable {
+    overflow: auto;
+  }
+
   &.selectable {
     .TableHead, .TableRow {
       padding: 0 $padding;

src/renderer/components/virtual-list/virtual-list.scss

@@ -2,12 +2,6 @@
   overflow: hidden;
 
   > .list {
-    @include custom-scrollbar;
+    overflow-y: overlay!important;
-
-    .theme-light & {
-      @include custom-scrollbar(dark);
-    }
-
-    overflow-y: overlay !important;
   }
 }

src/renderer/components/wizard/wizard.scss

@@ -15,7 +15,7 @@
   }
 
   @mixin scrollableContent() {
-    @include custom-scrollbar($theme: dark);
+    overflow: auto;
     padding: var(--wizard-spacing);
     height: var(--wizard-content-height);
     max-height: var(--wizard-content-max-height);

src/renderer/themes/lens-dark.json

@@ -107,6 +107,7 @@
     "selectOptionHoveredColor": "#87909c",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
-    "menuActiveBackground": "#36393e"
+    "menuActiveBackground": "#36393e",
+    "scrollBarColor": "#5f6064"
   }
 }

src/renderer/themes/lens-light.json

@@ -39,13 +39,13 @@
     "helmImgBackground": "#e8e8e8",
     "helmStableRepo": "#3d90ce",
     "helmIncubatorRepo": "#ff7043",
-    "helmDescriptionHr": "#41474a",
+    "helmDescriptionHr": "#dddddd",
     "helmDescriptionBlockqouteColor": "#555555",
     "helmDescriptionBlockqouteBorder": "#8a8f93",
     "helmDescriptionBlockquoteBackground": "#eeeeee",
     "helmDescriptionHeaders": "#3e4147",
     "helmDescriptionH6": "#6a737d",
-    "helmDescriptionTdBorder": "#47494a",
+    "helmDescriptionTdBorder": "#c6c6c6",
     "helmDescriptionTrBackground": "#1c2125",
     "helmDescriptionCodeBackground": "#ffffff1a",
     "helmDescriptionPreBackground": "#eeeeee",
@@ -108,6 +108,7 @@
     "selectOptionHoveredColor": "#ffffff",
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
-    "menuActiveBackground": "#e8e8e8"
+    "menuActiveBackground": "#e8e8e8",
+    "scrollBarColor": "#bbbbbb"
   }
 }