feat(neuron-ui): add basic style on the list header of transaction list

Author: Keith-CY

packages/neuron-ui/src/components/TransactionList/index.tsx

@@ -1,13 +1,15 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  Stack,
   Text,
   DetailsList,
   TextField,
   IColumn,
   IGroup,
   CheckboxVisibility,
   ITextFieldStyleProps,
+  getTheme,
 } from 'office-ui-fabric-react'
 
 import { StateDispatch } from 'states/stateProvider/reducer'
@@ -16,6 +18,7 @@ import { appCalls } from 'services/UILayer'
 import { useLocalDescription } from 'utils/hooks'
 
 const timeFormatter = new Intl.DateTimeFormat('en-GB')
+const theme = getTheme()
 
 const MIN_CELL_WIDTH = 70
 
@@ -25,7 +28,20 @@ interface FormatTransaction extends State.Transaction {
 
 const onRenderHeader = ({ group }: any) => {
   const { name } = group
-  return <Text variant="large">{name}</Text>
+  return (
+    <Stack
+      tokens={{ padding: 15 }}
+      styles={{
+        root: {
+          background: theme.palette.neutralLighterAlt,
+          borderTop: `1px solid ${theme.palette.neutralSecondary}`,
+          borderBottom: `1px solid ${theme.palette.neutralLighter}`,
+        },
+      }}
+    >
+      <Text variant="large">{name}</Text>
+    </Stack>
+  )
 }
 
 const TransactionList = ({