Removing usage of custom-scrollbar mixin

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

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

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/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,7 +65,7 @@
   }
 
   .drawer-content {
-    @include custom-scrollbar;
+    overflow: auto;
 
     > *:not(.Spinner) {
       padding: var(--spacing);

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 {
-    pre, table {
+    overflow: auto;
-      @include custom-scrollbar(dark);
-    }
   }
 
   .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/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,13 +1,4 @@
 .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;

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,10 +15,14 @@
   }
 
   @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);
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #bbbbbb; // Always light scrollbar in dialogs
+    }
   }
 
   > .header {

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"
   }
 }