customize scroll bar in snippets (#1053)

* custom styles for scrollbar

* style scrollbar for search suggest on home page

* change overflow for search suggest

* fix error screen when API error payload is string

e.g. "Internal server error"

* add resizer img and styles for FF

* update screenshots

* update icon for dark theme

lib/errors/getResourceErrorPayload.tsx

@@ -2,7 +2,8 @@ import type { ResourceError } from 'lib/api/resources';
 
 import getErrorCause from './getErrorCause';
 
-export default function getResourceErrorPayload<Payload = Record<string, unknown>>(error: Error | undefined): ResourceError<Payload>['payload'] | undefined {
+export default function getResourceErrorPayload<Payload = Record<string, unknown> | string>(error: Error | undefined):
+ResourceError<Payload>['payload'] | undefined {
   const cause = getErrorCause(error);
   return cause && 'payload' in cause ? cause.payload as ResourceError<Payload>['payload'] : undefined;
 }

theme/components/FormLabel.ts

@@ -58,10 +58,10 @@ const sizes = {
       return {
         fontSize: 'md',
         lineHeight: '24px',
-        padding: '28px 24px',
-        right: '26px',
+        padding: '28px 4px 28px 24px',
+        right: '22px',
         _focusWithin: {
-          padding: '16px 24px 2px 24px',
+          padding: '16px 0 2px 24px',
         },
         '&[data-fancy=true]': {
           right: '36px',
@@ -76,10 +76,10 @@ const sizes = {
       return {
         fontSize: 'md',
         lineHeight: '20px',
-        padding: '18px 16px',
-        right: '18px',
+        padding: '18px 4px 18px 16px',
+        right: '22px',
         _focusWithin: {
-          padding: '10px 16px 2px 16px',
+          padding: '10px 0 2px 16px',
         },
         '&[data-fancy=true]': {
           right: '36px',

theme/foundations/scrollbar.ts

@@ -0,0 +1,40 @@
+import { getCSSVar } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+
+const scrollbar = (props: StyleFunctionProps) => {
+  const bgColor = mode('blackAlpha.300', 'whiteAlpha.300')(props);
+  const resizerUrl = mode('url(/static/resizer_light.png)', 'url(/static/resizer_dark.png)')(props);
+
+  return {
+    'body *::-webkit-scrollbar': {
+      width: '20px',
+    },
+    'body *::-webkit-scrollbar-track': {
+      backgroundColor: 'transparent',
+    },
+    'body *::-webkit-scrollbar-thumb': {
+      backgroundColor: bgColor,
+      borderRadius: '20px',
+      border: `8px solid rgba(0,0,0,0)`,
+      backgroundClip: 'content-box',
+      minHeight: '32px',
+    },
+    'body *::-webkit-scrollbar-button': {
+      display: 'none',
+    },
+    'body *::-webkit-scrollbar-corner': {
+      backgroundColor: 'transparent',
+    },
+    'body *::-webkit-resizer': {
+      backgroundImage: resizerUrl,
+      backgroundSize: '20px',
+    },
+    'body *': {
+      scrollbarWidth: 'thin',
+      scrollbarColor: `${ getCSSVar(props.theme, 'colors', bgColor) } transparent`,
+    },
+  };
+};
+
+export default scrollbar;

theme/global.ts

@@ -1,6 +1,7 @@
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
+import scrollbar from './foundations/scrollbar';
 import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
 
 const global = (props: StyleFunctionProps) => ({
@@ -21,6 +22,7 @@ const global = (props: StyleFunctionProps) => ({
   form: {
     w: '100%',
   },
+  ...scrollbar(props),
 });
 
 export default global;

ui/shared/Page/Page.tsx

@@ -39,9 +39,13 @@ const Page = ({
   const renderErrorScreen = React.useCallback((error?: Error) => {
     const statusCode = getErrorCauseStatusCode(error) || 500;
     const resourceErrorPayload = getResourceErrorPayload(error);
-    const messageInPayload = resourceErrorPayload && 'message' in resourceErrorPayload && typeof resourceErrorPayload.message === 'string' ?
-      resourceErrorPayload.message :
-      undefined;
+    const messageInPayload =
+      resourceErrorPayload &&
+      typeof resourceErrorPayload === 'object' &&
+      'message' in resourceErrorPayload &&
+      typeof resourceErrorPayload.message === 'string' ?
+        resourceErrorPayload.message :
+        undefined;
 
     const isInvalidTxHash = error?.message?.includes('Invalid tx hash');
     const isBlockConsensus = messageInPayload?.includes('Block lost consensus');
@@ -51,9 +55,13 @@ const Page = ({
     }
 
     if (isBlockConsensus) {
-      const hash = resourceErrorPayload && 'hash' in resourceErrorPayload && typeof resourceErrorPayload.hash === 'string' ?
-        resourceErrorPayload.hash :
-        undefined;
+      const hash =
+        resourceErrorPayload &&
+        typeof resourceErrorPayload === 'object' &&
+        'hash' in resourceErrorPayload &&
+        typeof resourceErrorPayload.hash === 'string' ?
+          resourceErrorPayload.hash :
+          undefined;
       return <PageContent isHomePage={ isHomePage }><AppErrorBlockConsensus hash={ hash } mt="50px"/></PageContent>;
     }
 

ui/snippets/searchBar/SearchBar.tsx

@@ -128,14 +128,22 @@ const SearchBar = ({ isHomepage }: Props) => {
         w={ `${ menuWidth.current }px` }
         ref={ menuRef }
       >
-        <PopoverBody p={ 0 } color="chakra-body-text">
+        <PopoverBody
+          p={ 0 }
+          color="chakra-body-text"
+          sx={
+            isHomepage ? {
+              mark: { bgColor: 'green.100' },
+              '*::-webkit-scrollbar-thumb': { backgroundColor: 'blackAlpha.300' },
+            } : {}
+          }
+        >
           <Box
             maxH="50vh"
-            overflowY="scroll"
+            overflowY="auto"
             id={ SCROLL_CONTAINER_ID }
             ref={ scrollRef }
             as={ Element }
-            sx={ isHomepage ? { mark: { bgColor: 'green.100' } } : {} }
             px={ 4 }
           >
             { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (