update scrollbars globally

app/client/src/comments/AppComments/AppCommentThreads.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
@@ -24,13 +24,16 @@ import { setShouldShowResolvedComments } from "actions/commentActions";
 import { useSelectCommentThreadUsingQuery } from "../inlineComments/Comments";
 import { Toaster } from "components/ads/Toast";
 import { Variant } from "components/ads/common";
+import ScrollIndicator from "components/ads/ScrollIndicator";
 import { COMMENT_HAS_BEEN_DELETED, createMessage } from "constants/messages";
+import { hideScrollbar } from "constants/DefaultTheme";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: auto;
+  ${hideScrollbar};
 `;
 
 export const useSortedCommentThreadIds = (commentThreadIds: string[]) => {
@@ -72,6 +75,7 @@ function AppCommentThreads() {
     applicationCommentsSelector(applicationId),
   );
   const appCommentThreadIds = getAppCommentThreads(appCommentThreadsByRefMap);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const commentThreadIds = useSortedCommentThreadIds(appCommentThreadIds);
 
@@ -100,7 +104,7 @@ function AppCommentThreads() {
   }, [commentThreadIdFromUrl, appCommentThreadsFetched]);
 
   return (
-    <Container>
+    <Container ref={containerRef}>
       {commentThreadIds.length > 0 && (
         <Virtuoso
           data={commentThreadIds}
@@ -121,6 +125,7 @@ function AppCommentThreads() {
         />
       )}
       {commentThreadIds.length === 0 && <AppCommentsPlaceholder />}
+      <ScrollIndicator containerRef={containerRef} />
     </Container>
   );
 }

app/client/src/index.css

@@ -107,3 +107,24 @@ div.bp3-popover-arrow {
 .bp3-modal-widget .bp3-portal {
   z-index: 21 !important;
 }
+
+/* To hide vertical scrollbar on deployed page */
+body::-webkit-scrollbar {
+  width: 0px;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(75,72,72,0.5);
+  border-radius: 10px;
+  visibility: hidden;
+}
+:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
+}

app/client/src/pages/Editor/PropertyPane/index.tsx

@@ -1,4 +1,10 @@
-import React, { Component, ReactElement, useCallback, useMemo } from "react";
+import React, {
+  Component,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { AppState } from "reducers";
 import {
@@ -10,7 +16,7 @@ import { PanelStack, IPanel, Classes, IPanelProps } from "@blueprintjs/core";
 import Popper from "pages/Editor/Popper";
 import { generateClassName } from "utils/generators";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
-import styled from "constants/DefaultTheme";
+import styled, { hideScrollbar } from "constants/DefaultTheme";
 import { WidgetProps } from "widgets/BaseWidget";
 import PropertyPaneTitle from "pages/Editor/PropertyPaneTitle";
 import AnalyticsUtil from "utils/AnalyticsUtil";
@@ -33,6 +39,7 @@ import { Layers } from "constants/Layers";
 import ConnectDataCTA, { actionsExist } from "./ConnectDataCTA";
 import PropertyPaneConnections from "./PropertyPaneConnections";
 import { WidgetType } from "constants/WidgetConstants";
+import ScrollIndicator from "components/ads/ScrollIndicator";
 
 const PropertyPaneWrapper = styled(PaneWrapper)<{
   themeMode?: EditorTheme;
@@ -90,6 +97,7 @@ export const PropertyPaneBodyWrapper = styled.div`
     (props.theme.propertyPane.titleHeight +
       props.theme.propertyPane.connectionsHeight)}px;
   overflow: auto;
+  ${hideScrollbar};
 `;
 
 // TODO(abhinav): The widget should add a flag in their configuration if they donot subscribe to data
@@ -131,6 +139,7 @@ function PropertyPaneView(
     dispatch(deleteSelectedWidget(false));
   }, [dispatch]);
   const handleCopy = useCallback(() => dispatch(copyWidget(false)), [dispatch]);
+  const propertyPaneBodyRef = useRef<HTMLDivElement>(null);
 
   const actions = useMemo((): Array<{
     tooltipContent: any;
@@ -191,7 +200,7 @@ function PropertyPaneView(
         widgetId={widgetProperties.widgetId}
         widgetType={widgetProperties?.type}
       />
-      <PropertyPaneBodyWrapper>
+      <PropertyPaneBodyWrapper ref={propertyPaneBodyRef}>
         {!doActionsExist && !hideConnectDataCTA && (
           <ConnectDataCTA
             widgetId={widgetProperties.widgetId}
@@ -207,6 +216,7 @@ function PropertyPaneView(
             type={widgetProperties.type}
           />
         </PropertyControlsWrapper>
+        <ScrollIndicator containerRef={propertyPaneBodyRef} top="65px" />
       </PropertyPaneBodyWrapper>
     </>
   );

app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx

@@ -32,10 +32,16 @@ export const TableWrapper = styled.div<{
       height: 4px !important;
       border-radius: ${(props) => props.theme.radii[3]}px;
       background: ${(props) => props.theme.colors.scrollbarLight} !important;
+      visibility: hidden;
       &:hover {
         height: 6px !important;
       }
     }
+    &:hover {
+      .thumb-horizontal {
+        visibility: visible;
+      }
+    }
   }
   .table {
     border-spacing: 0;
@@ -487,10 +493,16 @@ export const TableHeaderWrapper = styled.div<{
     height: 4px !important;
     border-radius: ${(props) => props.theme.radii[3]}px;
     background: ${(props) => props.theme.colors.scrollbarLight};
+    visibility: hidden;
     &:hover {
       height: 6px !important;
     }
   }
+  &:hover {
+    .thumb-horizontal {
+      visibility: visible;
+    }
+  }
 `;
 
 export const TableHeaderInnerWrapper = styled.div<{