Implemented improvements on UserDetails component

src/components/Header/component/ProviderDetails/UserDetails.jsx

@@ -7,7 +7,6 @@ import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
 import Identicon from '~/components/Identicon'
 import Dot from '@material-ui/icons/FiberManualRecord'
-import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
@@ -50,10 +49,11 @@ const styles = () => ({
     borderRadius: '3px',
     backgroundColor: background,
     margin: '0 auto',
-    padding: sm,
+    padding: '9px',
+    lineHeight: 1,
   },
   details: {
-    padding: `0 ${lg}`,
+    padding: `0 ${md}`,
     height: '20px',
     alignItems: 'center',
   },
@@ -61,6 +61,11 @@ const styles = () => ({
     flexGrow: 1,
     textAlign: 'center',
     letterSpacing: '-0.5px',
+    fontSize: '12px',
+  },
+  labels: {
+    fontSize: '12px',
+    letterSpacing: '0.5px',
   },
   open: {
     paddingLeft: sm,
@@ -121,33 +126,29 @@ const UserDetails = ({
       </Block>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Status </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Status </Paragraph>
         <Spacer />
         <Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} />
-        <Paragraph size="sm" noMargin align="right" color={color}>
-          <Bold>
-            {status}
-          </Bold>
+        <Paragraph noMargin align="right" color={color} weight="bolder" className={classes.labels}>
+          {status}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Client </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Client </Paragraph>
         <Spacer />
-        <Img className={classes.logo} src={metamask} height={16} alt="Metamask client" />
-        <Paragraph size="sm" noMargin align="right">
-          <Bold>
-            {upperFirst(provider)}
-          </Bold>
+        <Img className={classes.logo} src={metamask} height={14} alt="Metamask client" />
+        <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
+          {upperFirst(provider)}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Network </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Network </Paragraph>
         <Spacer />
-        <Img className={classes.logo} src={dot} height={16} alt="Network" />
-        <Paragraph size="sm" noMargin align="right">
-          <Bold>{upperFirst(network)}</Bold>
+        <Img className={classes.logo} src={dot} height={14} alt="Network" />
+        <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
+          {upperFirst(network)}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
@@ -159,7 +160,7 @@ const UserDetails = ({
           color="primary"
           fullWidth
         >
-          <Paragraph className={classes.disconnectText} size="sm" weight="regular" color="white" noMargin>DISCONNECT</Paragraph>
+          <Paragraph className={classes.disconnectText} size="sm" weight="bold" color="white" noMargin>DISCONNECT</Paragraph>
         </Button>
       </Row>
     </React.Fragment>