Improve 'Scroll to see more' text note for tx actions

public/static/css/jquery.mCustomScrollbar.min.css

@@ -17,3 +17,15 @@
 .mCustomScrollbar.mCS_no_scrollbar .lastItem {
   margin-bottom: 0!important;
 }
+
+.mCSB_scrollTools .mCSB_draggerRail {
+  display: none;
+}
+
+.mCSB_scrollTools .mCSB_draggerContainer {
+  bottom: 1.3rem;
+}
+
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+  background-color: #cbd5e0!important;
+}

ui/shared/DetailsInfoItem.tsx

@@ -10,11 +10,11 @@ interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
   children: React.ReactNode;
 }
 
-const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
+const DetailsInfoItem = ({ title, hint, note, noteDisplay, children, ...styles }: Props) => {
   return (
     <>
       <GridItem py={{ base: 1, lg: 2 }} lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
-        <Flex columnGap={ 2 } alignItems="center">
+        <Flex columnGap={ 2 } alignItems="flex-start">
           <Tooltip
             label={ hint }
             placement="top"
@@ -24,7 +24,10 @@ const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
               <Icon as={ infoIcon } boxSize={ 5 }/>
             </Box>
           </Tooltip>
-          <Text fontWeight={{ base: 700, lg: 500 }}>{ title }</Text>
+          <Text fontWeight={{ base: 700, lg: 500 }}>
+            { title }
+            { note && <Text fontWeight={ 500 } color="gray.500" fontSize="xs" className="note" display={ noteDisplay } align="right">{ note }</Text> }
+          </Text>
         </Flex>
       </GridItem>
       <GridItem

ui/tx/TxDetails.tsx

-import { Grid, GridItem, Text, Box, Icon, Link, Spinner, Tag, Flex, Tooltip, chakra } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Box, Icon, Link, Spinner, Tag, Flex, Tooltip, Divider, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -126,9 +126,10 @@ const TxDetails = () => {
           <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
         </DetailsInfoItem>
       ) }
-      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/> }
+      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 3 }}><Divider /></GridItem> }
       { data.actions && <TxDetailsActions actions={ data.actions }/> }
-      <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
+      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mb={{ base: 0, lg: 3 }}><Divider /></GridItem> }
+      { !data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/> }
       <DetailsInfoItem
         title="From"
         hint="Address (external or contract) sending the transaction."

ui/tx/details/TxDetailsActions.tsx

 import { Box, Flex, Text } from '@chakra-ui/react';
 import React from 'react';
-import { space } from 'lib/html-entities';
+import Script from 'next/script'
 
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
@@ -11,10 +11,12 @@ const TxDetailsActions = ({ actions }) => {
     <DetailsInfoItem
       title="Transaction Action"
       hint="Highlighted events of the transaction"
+      note="Scroll to see more"
+      noteDisplay="none"
       position="relative"
+      id="txActionsTitle"
     >
-      <Box w="100%">
-        <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 36 }>
+      <Box className="mCustomScrollbar" maxH={ 36 } w="90%">
         <Flex
           flexDirection="column"
           alignItems="flex-start"
@@ -25,12 +27,20 @@ const TxDetailsActions = ({ actions }) => {
           { actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length-1 }/>) }
         </Flex>
       </Box>
-        <Text fontWeight={ 500 } color="gray.500" fontSize="sm" id="txActionsScrollForMore" display="none" marginTop={ 5 }>
-          Scroll for more
-          { space }
-          <Text color="gray.500" transform="rotate(90deg)" display="inline-block" as="span">&raquo;</Text>
-        </Text>
-      </Box>
+      <Script src="/static/js/jquery.mCustomScrollbar.concat.min.js" strategy="afterInteractive" onLoad={() => {
+        $(".mCustomScrollbar").mCustomScrollbar({callbacks:{
+          onOverflowY: () => {
+            $("#txActionsTitle .note").css("display", "block");
+          },
+          onOverflowYNone: () => {
+            $("#txActionsTitle .note").css("display", "none");
+          }
+        },
+        theme: "dark",
+        autoHideScrollbar: true,
+        scrollButtons: {enable: false},
+        scrollbarPosition: "outside"});
+      }} />
     </DetailsInfoItem>
   );
 };