Merge branch 'use-styled-components-for-custom-scrollbars'

4 files changed, 57 insertions, 83 deletions

diff --git a/gui/assets/css/style.css b/gui/assets/css/style.css
index 7cebbdfdf4..1a5a94da05 100644
--- a/gui/assets/css/style.css
+++ b/gui/assets/css/style.css
@@ -2,6 +2,3 @@
 @import 'reset.css';
 @import 'fonts.css';
 @import 'global.css';
-
-/* app */
-@import '../../src/renderer/components/CustomScrollbars.css';
diff --git a/gui/src/renderer/components/CustomScrollbars.css b/gui/src/renderer/components/CustomScrollbars.css
deleted file mode 100644
index 0078cea857..0000000000
--- a/gui/src/renderer/components/CustomScrollbars.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.custom-scrollbars {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-}
-
-.custom-scrollbars__scrollable {
-  width: 100%;
-}
-
-.custom-scrollbars__scrollable::-webkit-scrollbar {
-  display: none;
-}
-
-.custom-scrollbars__track {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 16px;
-  background-color: rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  transition: width 0.1s ease-in-out, opacity 0.25s ease-in-out;
-  z-index: 98;
-  pointer-events: none;
-}
-
-.custom-scrollbars__track--visible {
-  opacity: 1;
-  pointer-events: all;
-}
-
-.custom-scrollbars__thumb {
-  background-color: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  width: 8px;
-  transition: width 0.25s ease-in-out, border-radius 0.25s ease-in-out, height 0.25s ease-in-out,
-    opacity 0.25s ease-in-out;
-  opacity: 0;
-  z-index: 99;
-  pointer-events: none;
-}
-
-.custom-scrollbars__thumb--wide {
-  width: 12px;
-  border-radius: 6px;
-}
-
-.custom-scrollbars__thumb--active {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-
-.custom-scrollbars__thumb--visible {
-  /* thumb appears without animation */
-  transition: width 0.25s ease-in-out, border-radius 0.25s ease-in-out, height 0.25s ease-in-out,
-    background-color 0.1s ease-in-out;
-  opacity: 1;
-}
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index 139c4381de..ec38edde84 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -4,13 +4,56 @@ import { MacOsScrollbarVisibility } from '../../shared/ipc-schema';
 import { Scheduler } from '../../shared/scheduler';
 import { useSelector } from '../redux/store';
 
-const ScrollableContent = styled.div({
+const StyledScrollableContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
   minHeight: '100%',
   height: 'max-content',
 });
 
+const StyledCustomScrollbars = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  overflow: 'hidden',
+});
+
+const StyledScrollable = styled.div((props: { fillContainer?: boolean }) => ({
+  flex: props.fillContainer ? '1' : undefined,
+  width: '100%',
+  overflow: 'auto',
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+}));
+
+const StyledTrack = styled.div({}, (props: { show: boolean }) => ({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  width: '16px',
+  backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  opacity: props.show ? 1 : 0,
+  transition: 'width 0.1s ease-in-out, opacity 0.25s ease-in-out',
+  zIndex: 98,
+  pointerEvents: props.show ? 'all' : 'none',
+}));
+
+const StyledThumb = styled.div({}, (props: { show: boolean; active: boolean; wide: boolean }) => ({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  backgroundColor: props.active ? 'rgba(255, 255, 255, 0.4)' : 'rgba(255, 255, 255, 0.2)',
+  borderRadius: props.wide ? '6px' : '4px',
+  width: props.wide ? '12px' : '8px',
+  transition:
+    'width 0.25s ease-in-out, border-radius 0.25s ease-in-out, height 0.25s ease-in-out, opacity 0.25s ease-in-out, background-color 0.1s ease-in-out',
+  opacity: props.show ? 1 : 0,
+  zIndex: 99,
+  pointerEvents: 'none',
+}));
+
 const AUTOHIDE_TIMEOUT = 1000;
 
 interface IProps {
@@ -216,34 +259,28 @@ class CustomScrollbars extends React.Component<IProps, IState> {
       onScroll: _onScroll,
       fillContainer,
       children,
-      className,
       ...otherProps
     } = this.props;
     const showScrollbars = this.state.canScroll && this.state.showScrollIndicators;
-    const thumbAnimationClass = showScrollbars ? ' custom-scrollbars__thumb--visible' : '';
-    const thumbActiveClass =
-      this.state.isTrackHovered || this.state.isDragging ? ' custom-scrollbars__thumb--active' : '';
-    const thumbWideClass = this.state.isWide ? ' custom-scrollbars__thumb--wide' : '';
-    const trackClass =
-      showScrollbars && this.state.showTrack ? ' custom-scrollbars__track--visible' : '';
-    const classNames = className ? `${className} custom-scrollbars` : 'custom-scrollbars';
 
     return (
-      <div {...otherProps} className={classNames}>
-        <div className={`custom-scrollbars__track ${trackClass}`} ref={this.trackRef} />
-        <div
-          className={`custom-scrollbars__thumb ${thumbWideClass} ${thumbActiveClass} ${thumbAnimationClass}`}
-          style={{ position: 'absolute', top: 0, right: 0 }}
+      <StyledCustomScrollbars {...otherProps}>
+        <StyledTrack ref={this.trackRef} show={showScrollbars && this.state.showTrack} />
+        <StyledThumb
           ref={this.thumbRef}
+          show={showScrollbars}
+          active={this.state.isTrackHovered || this.state.isDragging}
+          wide={this.state.isWide}
         />
-        <div
-          className="custom-scrollbars__scrollable"
-          style={{ overflow: 'auto', flex: fillContainer ? '1' : undefined }}
+        <StyledScrollable
+          fillContainer={fillContainer}
           onScroll={this.onScroll}
           ref={this.scrollableRef}>
-          <ScrollableContent ref={this.scrollableContentRef}>{children}</ScrollableContent>
-        </div>
-      </div>
+          <StyledScrollableContent ref={this.scrollableContentRef}>
+            {children}
+          </StyledScrollableContent>
+        </StyledScrollable>
+      </StyledCustomScrollbars>
     );
   }
 
diff --git a/gui/tasks/distribution.js b/gui/tasks/distribution.js
index d4932b4a44..452baad71f 100644
--- a/gui/tasks/distribution.js
+++ b/gui/tasks/distribution.js
@@ -41,7 +41,6 @@ const config = {
     'build/src/renderer/index.html',
     'build/src/renderer/bundle.js',
     'build/src/renderer/preloadBundle.js',
-    'build/src/renderer/components/CustomScrollbars.css',
     'node_modules/',
     '!**/*.tsbuildinfo',
   ],