feat: Unify block status (property list) and miner info callouts style

Author: ashchan

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

@@ -284,21 +284,27 @@ const Overview = ({
         <Callout target={minerInfoRef.current} hidden={!displayMinerInfo} onDismiss={hideMinerInfo} gapSpace={0}>
           <Stack tokens={{ padding: 15 }}>
             {defaultAddress ? (
-              <Stack tokens={{ childrenGap: 15 }}>
+              <Stack tokens={{ childrenGap: 15 }} styles={{ root: { padding: 5 } }}>
                 <Stack tokens={{ childrenGap: 15 }}>
-                  <Text variant="medium">{t('overview.address')}</Text>
+                  <Text variant="small" style={{ fontWeight: 600 }}>
+                    {t('overview.address')}
+                  </Text>
                   <Text variant="small" className="fixedWidth">
                     {defaultAddress.address}
                   </Text>
                 </Stack>
                 <Stack tokens={{ childrenGap: 15 }}>
-                  <Text variant="medium">{t('overview.code-hash')}</Text>
+                  <Text variant="small" style={{ fontWeight: 600 }}>
+                    {t('overview.code-hash')}
+                  </Text>
                   <Text variant="small" className="fixedWidth">
                     {codeHash}
                   </Text>
                 </Stack>
                 <Stack tokens={{ childrenGap: 15 }}>
-                  <Text variant="medium">{t('overview.lock-arg')}</Text>
+                  <Text variant="small" style={{ fontWeight: 600 }}>
+                    {t('overview.lock-arg')}
+                  </Text>
                   <Text variant="small" className="fixedWidth">
                     {defaultAddress.identifier}
                   </Text>

packages/neuron-ui/src/utils/loadTheme.tsx

@@ -53,7 +53,7 @@ registerIcons({
     info: <InfoIcon size="16px" />,
     errorbadge: <AlertIcon size="16px" />,
     completed: <SuccessIcon size="16px" />,
-    MiniCopy: <CopyIcon size="small" />,
+    MiniCopy: <CopyIcon size="small" color={semanticColors.primaryButtonBackground} />,
     Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
     FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
     LastPage: <LinkBottomIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,

packages/neuron-ui/src/widgets/PropertyList/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
-import { List } from 'office-ui-fabric-react'
+import { List, getTheme } from 'office-ui-fabric-react'
 import styles from './PropertyList.module.scss'
 
+const theme = getTheme()
+
 export interface Property {
   label: string
   value: string | number | Element | React.ReactNode
@@ -18,15 +20,15 @@ const onRenderCell = (item?: Property & CellStyles) =>
     <div className={styles.propertyCell} style={{ height: item.height || 'auto' }} aria-label="property">
       <span
         className={styles.label}
-        style={{ width: item.labelWidth || 'auto' }}
+        style={{ width: item.labelWidth || 'auto', fontWeight: 600, fontSize: theme.fonts.small.fontSize }}
         title={item.label}
         aria-label={item.label}
       >
         {item.label}
       </span>
       <span
         className={styles.value}
-        style={{ width: item.valueWidth || 'auto' }}
+        style={{ width: item.valueWidth || 'auto', fontSize: theme.fonts.small.fontSize }}
         title={`${item.value}`}
         aria-label={item.label}
       >