From c250678e08ecd99e2573079b3b9afd7a1e75747a Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Wed, 7 Aug 2019 17:04:22 +0800
Subject: [PATCH] fix(neuron-ui): set the font-size of footer to 12px

---
 .../neuron-ui/src/containers/Footer/index.tsx | 19 +++++--------------
 packages/neuron-ui/src/utils/loadTheme.tsx    |  2 +-
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/neuron-ui/src/containers/Footer/index.tsx b/packages/neuron-ui/src/containers/Footer/index.tsx
index eba38d1329..3cece43d72 100644
--- a/packages/neuron-ui/src/containers/Footer/index.tsx
+++ b/packages/neuron-ui/src/containers/Footer/index.tsx
@@ -18,7 +18,7 @@ const stackStyles = {
   ],
 }
 const stackItemStyles = {
-  root: [theme.fonts.small],
+  root: [theme.fonts.xSmall],
 }
 
 export const SyncStatus = ({
@@ -28,13 +28,13 @@ export const SyncStatus = ({
 }: React.PropsWithoutRef<{ tipBlockNumber: string; syncedBlockNumber: string; bufferBlockNumber?: number }>) => {
   const [t] = useTranslation()
   if (tipBlockNumber === '') {
-    return <Text variant="small">{t('footer.fail-to-fetch-tip-block-number')}</Text>
+    return <Text variant="xSmall">{t('footer.fail-to-fetch-tip-block-number')}</Text>
   }
 
   const percentage = +syncedBlockNumber / +tipBlockNumber
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', fontSize: theme.fonts.small.fontSize }}>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
       {+syncedBlockNumber + bufferBlockNumber < +tipBlockNumber ? (
         <>
           {t('sync.syncing')}
@@ -52,21 +52,12 @@ export const SyncStatus = ({
 
 export const NetworkStatus = ({ name, online }: { name: string; online: boolean }) => {
   return (
-    <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }}>
+    <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }} styles={stackItemStyles}>
       <Icon
         iconName={online ? 'Connected' : 'Disconnected'}
         styles={{ root: { display: 'flex', alignItems: 'center' } }}
       />
-      <Text
-        styles={{
-          root: {
-            fontSize: '14px',
-            lineHeight: '14px',
-          },
-        }}
-      >
-        {name}
-      </Text>
+      <Text variant="xSmall">{name}</Text>
     </Stack>
   )
 }
diff --git a/packages/neuron-ui/src/utils/loadTheme.tsx b/packages/neuron-ui/src/utils/loadTheme.tsx
index d94bfc9b6d..c09d5406a6 100644
--- a/packages/neuron-ui/src/utils/loadTheme.tsx
+++ b/packages/neuron-ui/src/utils/loadTheme.tsx
@@ -32,7 +32,7 @@ import { registerIcons } from 'utils/icons'
 loadTheme({
   fonts: {
     tiny: { fontSize: '11px' },
-    xSmall: { fontSize: '12px' },
+    xSmall: { fontSize: '12px', lineHeight: '12px' },
     small: { fontSize: '14px' },
     smallPlus: { fontSize: '15px' },
     medium: { fontSize: '16px' },