From dcee41a994108acfd1f2e88302ca67f6d8aea776 Mon Sep 17 00:00:00 2001
From: David Echelberger <eberger727@gmail.com>
Date: Wed, 27 Apr 2022 11:35:52 -0400
Subject: [PATCH] [timeline-btn-bug] alt scrollbar

Signed-off-by: David Echelberger <eberger727@gmail.com>
---
 src/components/Cards/FireFlyCard.tsx  |  3 ++-
 src/pages/Activity/views/Timeline.tsx |  3 ++-
 src/theme.tsx                         | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/FireFlyCard.tsx b/src/components/Cards/FireFlyCard.tsx
index 29154d3..7b54372 100644
--- a/src/components/Cards/FireFlyCard.tsx
+++ b/src/components/Cards/FireFlyCard.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@mui/material';
 import { IFireFlyCard } from '../../interfaces';
-import { DEFAULT_BORDER_RADIUS } from '../../theme';
+import { altScrollbarStyle, DEFAULT_BORDER_RADIUS } from '../../theme';
 import { FFArrowButton } from '../Buttons/FFArrowButton';
 
 type Props = {
@@ -19,6 +19,7 @@ export const FireFlyCard: React.FC<Props> = ({ cardData, size }) => {
       item
       md={12}
       lg={size === 'medium' ? 4 : 6}
+      sx={altScrollbarStyle}
     >
       <Box
         p={2}
diff --git a/src/pages/Activity/views/Timeline.tsx b/src/pages/Activity/views/Timeline.tsx
index 484bf41..c3d5d09 100644
--- a/src/pages/Activity/views/Timeline.tsx
+++ b/src/pages/Activity/views/Timeline.tsx
@@ -39,7 +39,7 @@ import {
   IPagedEventResponse,
   ITransaction,
 } from '../../../interfaces';
-import { DEFAULT_PADDING } from '../../../theme';
+import { altScrollbarStyle, DEFAULT_PADDING } from '../../../theme';
 import { fetchCatcher, fetchWithCredentials } from '../../../utils';
 import { isOppositeTimelineEvent } from '../../../utils/timeline';
 import { hasAnyEvent } from '../../../utils/wsEvents';
@@ -183,6 +183,7 @@ export const ActivityTimeline: () => JSX.Element = () => {
           direction="column"
           item
           pt={DEFAULT_PADDING}
+          sx={altScrollbarStyle}
         >
           <FFTimelineHeader
             leftHeader={t('submittedByMe')}
diff --git a/src/theme.tsx b/src/theme.tsx
index fe52805..ceeb5b3 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -87,3 +87,17 @@ export const themeOptions: ThemeOptions = {
     },
   },
 };
+
+export const altScrollbarStyle = {
+  overflow: 'overlay',
+  scrollbarColor: '#1e242a',
+  '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+    cursor: 'pointer',
+    backgroundColor: '#1e242a',
+  },
+  '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+    borderRadius: 8,
+    backgroundColor: '#12171d',
+    border: '3px solid #1e242a',
+  },
+};