Styles when provider is not connected

src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx

@@ -3,10 +3,9 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
-import Hairline from '~/components/layout/Hairline'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
-import { sm, md, lg, background } from '~/theme/variables'
+import { md } from '~/theme/variables'
 
 const connectedLogo = require('../../assets/connect-wallet.svg')
 
@@ -18,24 +17,18 @@ const styles = () => ({
   container: {
     padding: `${md} 12px`,
   },
-  user: {
+  logo: {
-    alignItems: 'center',
+    justifyContent: 'center',
-    backgroundColor: background,
-    padding: sm,
   },
-  details: {
+  text: {
-    padding: `0 ${lg}`,
+    letterSpacing: '-0.6px',
-    height: '20px',
-    alignItems: 'center',
-  },
-  address: {
     flexGrow: 1,
     textAlign: 'center',
   },
-  disconnect: {
+  connect: {
     padding: `${md} 32px`,
   },
-  logo: {
+  img: {
     margin: '0px 2px',
   },
 })
@@ -43,15 +36,14 @@ const styles = () => ({
 const ConnectDetails = ({ classes }: Props) => (
   <React.Fragment>
     <div className={classes.container}>
-      <Row margin="md" align="center">
+      <Row margin="lg" align="center">
-        <Paragraph className={classes.address} size="lg" noMargin bolder>Connect a Wallet</Paragraph>
+        <Paragraph className={classes.text} size="lg" noMargin weight="bolder">Connect a Wallet</Paragraph>
       </Row>
     </div>
-    <Row className={classes.details}>
+    <Row className={classes.logo} margin="lg">
-      <Img className={classes.logo} src={connectedLogo} height={16} alt="Status connected" />
+      <Img className={classes.img} src={connectedLogo} height={75} alt="Connect a Wallet" />
     </Row>
-    <Hairline margin="xs" />
+    <Row className={classes.connect}>
-    <Row className={classes.disconnect}>
       <Button
         size="medium"
         variant="raised"