[timeline-btn-bug] alt scrollbar

Signed-off-by: David Echelberger <[email protected]>
hyperledger · Apr 27, 2022 · dcee41a · dcee41a
1 parent 390e003
commit dcee41a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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',
+  },
+};