feat(web): custom-scrollbar

Author: tractorss

web/src/components/FileViewer/index.tsx

@@ -2,19 +2,20 @@ import React from "react";
 import styled from "styled-components";
 
 import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
+
 import "@cyntler/react-doc-viewer/dist/index.css";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import { customScrollbar } from "styles/customScrollbar";
 
 import MarkdownRenderer from "./Viewers/MarkdownViewer";
 
-import "overlayscrollbars/styles/overlayscrollbars.css";
-
 const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.whiteBackground};
   border-radius: 3px;
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
   max-height: 750px;
   overflow: scroll;
+
+  ${customScrollbar}
 `;
 
 const StyledDocViewer = styled(DocViewer)`
@@ -29,25 +30,23 @@ const StyledDocViewer = styled(DocViewer)`
 const FileViewer: React.FC<{ url: string }> = ({ url }) => {
   const docs = [{ uri: url }];
   return (
-    <OverlayScrollbarsComponent options={{ showNativeOverlaidScrollbars: true }}>
-      <Wrapper className="file-viewer-wrapper">
-        <StyledDocViewer
-          documents={docs}
-          pluginRenderers={[...DocViewerRenderers, MarkdownRenderer]}
-          config={{
-            header: {
-              disableHeader: true,
-              disableFileName: true,
-            },
-            pdfZoom: {
-              defaultZoom: 0.8,
-              zoomJump: 0.1,
-            },
-            pdfVerticalScrollByDefault: true, // false as default
-          }}
-        />
-      </Wrapper>
-    </OverlayScrollbarsComponent>
+    <Wrapper className="file-viewer-wrapper">
+      <StyledDocViewer
+        documents={docs}
+        pluginRenderers={[...DocViewerRenderers, MarkdownRenderer]}
+        config={{
+          header: {
+            disableHeader: true,
+            disableFileName: true,
+          },
+          pdfZoom: {
+            defaultZoom: 0.8,
+            zoomJump: 0.1,
+          },
+          pdfVerticalScrollByDefault: true, // false as default
+        }}
+      />
+    </Wrapper>
   );
 };
 

web/src/styles/customScrollbar.ts

@@ -0,0 +1,26 @@
+import { css } from "styled-components";
+
+export const customScrollbar = css`
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.violetPurple};
+    border-radius: 10px;
+    transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: ${({ theme }) => theme.secondaryPurple};
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background-color: ${({ theme }) => theme.lavenderPurple};
+  }
+
+  // firefox
+  scrollbar-width: thin;
+  scrollbar-color: ${({ theme }) => theme.violetPurple} transparent;
+`;