Refactor Provider Details. Creating general component #72

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

@@ -3,13 +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 Dot from '@material-ui/icons/FiberManualRecord'
-import Block from '~/components/layout/Block'
-import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
-import { md, lg, fancy } from '~/theme/variables'
-
-const connectedLogo = require('../../assets/key.svg')
+import { md, lg } from '~/theme/variables'
+import KeyRing from './KeyRing'
 
 type Props = {
   classes: Object,
@@ -37,25 +33,6 @@ const styles = () => ({
   img: {
     margin: '0px 2px',
   },
-  status: {
-    height: '25px',
-    width: '25px',
-    borderRadius: '20px',
-    bottom: '93px',
-    position: 'absolute',
-    right: '98px',
-    backgroundColor: '#ffffff',
-    color: fancy,
-  },
-  key: {
-    width: '75px',
-    height: '75px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#e4e8f1',
-    borderRadius: '40px',
-  },
 })
 
 const ConnectDetails = ({ classes, onConnect }: Props) => (
@@ -66,10 +43,7 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
       </Row>
     </div>
     <Row className={classes.logo} margin="lg">
-      <Block className={classes.key}>
-        <Img src={connectedLogo} height={32} alt="Status disconnected" />
-      </Block>
-      <Dot className={classes.status} />
+      <KeyRing keySize={32} circleSize={75} dotSize={25} dotTop={50} dotRight={25} center />
     </Row>
     <Row className={classes.connect}>
       <Button

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

@@ -0,0 +1,71 @@
+// @flow
+import * as React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Block from '~/components/layout/Block'
+import Dot from '@material-ui/icons/FiberManualRecord'
+import Img from '~/components/layout/Img'
+import { fancy, border } from '~/theme/variables'
+
+const key = require('../../assets/key.svg')
+
+const styles = () => ({
+  root: {
+    display: 'flex',
+  },
+  dot: {
+    position: 'relative',
+    backgroundColor: '#ffffff',
+    color: fancy,
+  },
+  key: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: border,
+  },
+})
+
+type Props = {
+  classes: Object,
+  keySize: number,
+  circleSize: number,
+  dotSize: number,
+  dotTop: number,
+  dotRight: number,
+  center?: boolean,
+}
+
+const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
+  width: `${size}px`,
+  height: `${size}px`,
+  marginLeft: center ? `${dotSize}px` : 'none',
+  borderRadius: `${size}px`,
+})
+
+const buildDotStyleFrom = (size: number, top: number, right: number) => ({
+  width: `${size}px`,
+  height: `${size}px`,
+  borderRadius: `${size}px`,
+  top: `${top}px`,
+  right: `${right}px`,
+})
+
+const KeyRing = ({
+  classes, circleSize, keySize, dotSize, dotTop, dotRight, center = false,
+}: Props) => {
+  const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
+  const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight)
+
+  return (
+    <React.Fragment>
+      <Block className={classes.root}>
+        <Block className={classes.key} style={keyStyle}>
+          <Img src={key} height={keySize} alt="Status disconnected" />
+        </Block>
+        <Dot className={classes.dot} style={dotStyle} />
+      </Block>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(KeyRing)

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

@@ -1,15 +1,11 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import Dot from '@material-ui/icons/FiberManualRecord'
 import Paragraph from '~/components/layout/Paragraph'
-import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
-import Img from '~/components/layout/Img'
 import { type Open } from '~/components/hoc/OpenHoc'
-import { sm, fancy } from '~/theme/variables'
-
-const connectWallet = require('../../assets/key.svg')
+import { sm } from '~/theme/variables'
+import KeyRing from './KeyRing'
 
 type Props = Open & {
   classes: Object,
@@ -31,33 +27,11 @@ const styles = () => ({
   connect: {
     letterSpacing: '-0.5px',
   },
-  logo: {
-    height: '15px',
-    width: '15px',
-    top: '12px',
-    position: 'relative',
-    right: '10px',
-    backgroundColor: '#ffffff',
-    borderRadius: '15px',
-    color: fancy,
-  },
-  key: {
-    width: '38px',
-    height: '35px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#e4e8f1',
-    borderRadius: '20px',
-  },
 })
 
 const ProviderDesconnected = ({ classes }: Props) => (
   <React.Fragment>
-    <Block className={classes.key}>
-      <Img src={connectWallet} height={18} alt="Status disconnected" />
-    </Block>
-    <Dot className={classes.logo} />
+    <KeyRing keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} />
     <Col end="sm" middle="xs" layout="column" className={classes.account}>
       <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">Not Connected</Paragraph>
       <Paragraph size="sm" color="fancy" className={classes.connect} noMargin>Connect Wallet</Paragraph>