From 77eecc03c8f1261d9f59a65d379792495bb1f25b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 15 Aug 2020 21:34:23 +0200
Subject: [PATCH] Align time format with balance format (units) (#3426)

* Align time format with balance format (units)

* keys
---
 packages/react-query/src/BlockToTime.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index 873125fe9d..8f4b8eeb6c 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -4,6 +4,7 @@
 
 import BN from 'bn.js';
 import React from 'react';
+import styled from 'styled-components';
 import { useBlockTime } from '@polkadot/react-hooks';
 
 interface Props {
@@ -22,9 +23,21 @@ function BlockToTime ({ blocks, children, className = '', label }: Props): React
 
   return (
     <div className={className}>
-      {label || ''}{text}{children}
+      {label || ''}{text.split(' ').map((v, index) => index % 2 === 0
+        ? <span key={index}>{` ${v} `}</span>
+        : (
+          <span
+            className='timeUnits'
+            key={index}
+          >{v}</span>
+        )
+      )}{children}
     </div>
   );
 }
 
-export default React.memo(BlockToTime);
+export default React.memo(styled(BlockToTime)`
+  span.timeUnits {
+    font-size: 0.9em;
+  }
+`);