From 2133d1315340157ce0ea13164921e1f7b078f2d6 Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Wed, 5 Sep 2018 16:34:50 +0200
Subject: [PATCH] Updating styles of  NotConnected provider component

---
 src/components/Footer/index.jsx                          | 4 ++--
 .../component/ProviderDisconnected/ConnectDetails.jsx    | 9 ++++++---
 .../Header/component/ProviderInfo/UserDetails.jsx        | 2 +-
 src/components/layout/Paragraph/index.js                 | 2 +-
 src/components/layout/Paragraph/index.scss               | 9 ++++++++-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 744e298a..2c5882c5 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -9,10 +9,10 @@ import styles from './index.scss'
 const Footer = () => (
   <Block className={styles.footer}>
     <Link to={WELCOME_ADDRESS}>
-      <Paragraph size="sm" noMargin>Welcome</Paragraph>
+      <Paragraph size="sm" color="primary" noMargin>Welcome</Paragraph>
     </Link>
     <Link to={SAFELIST_ADDRESS}>
-      <Paragraph size="sm" noMargin>Safe List</Paragraph>
+      <Paragraph size="sm" color="primary" noMargin>Safe List</Paragraph>
     </Link>
   </Block>
 )
diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx
index d8975bdb..ba159f75 100644
--- a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx
+++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx
@@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
-import { md } from '~/theme/variables'
+import { md, lg } from '~/theme/variables'
 
 const connectedLogo = require('../../assets/connect-wallet.svg')
 
@@ -26,7 +26,10 @@ const styles = () => ({
     textAlign: 'center',
   },
   connect: {
-    padding: `${md} 32px`,
+    padding: `${md} ${lg}`,
+  },
+  connectText: {
+    letterSpacing: '1px',
   },
   img: {
     margin: '0px 2px',
@@ -50,7 +53,7 @@ const ConnectDetails = ({ classes }: Props) => (
         color="primary"
         fullWidth
       >
-        CONNECT
+        <Paragraph className={classes.connectText} size="sm" weight="regular" color="white" noMargin>CONNECT</Paragraph>
       </Button>
     </Row>
   </React.Fragment>
diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx
index 8d7202bb..a21f1a07 100644
--- a/src/components/Header/component/ProviderInfo/UserDetails.jsx
+++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx
@@ -129,7 +129,7 @@ const UserDetails = ({
           color="primary"
           fullWidth
         >
-          <Paragraph className={classes.disconnectText} size="sm" weight="regular" noMargin>DISCONNECT</Paragraph>
+          <Paragraph className={classes.disconnectText} size="sm" weight="regular" color="white" noMargin>DISCONNECT</Paragraph>
         </Button>
       </Row>
     </React.Fragment>
diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js
index d50b9e4f..ceb13185 100644
--- a/src/components/layout/Paragraph/index.js
+++ b/src/components/layout/Paragraph/index.js
@@ -10,7 +10,7 @@ type Props = {
   noMargin?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
   size?: 'sm' | 'md' | 'lg' | 'xl',
-  color?: 'soft' | 'medium' | 'dark' | 'fancy',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React$Node,
   className?: string,
diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss
index 107d09da..56c13001 100644
--- a/src/components/layout/Paragraph/index.scss
+++ b/src/components/layout/Paragraph/index.scss
@@ -1,7 +1,6 @@
 .paragraph {
   text-overflow: ellipsis;
   overflow-x: inherit;
-  color: $fontColor;
 }
 
 .soft {
@@ -20,6 +19,14 @@
   color: $fancy;
 }
 
+.primary {
+  color: $fontColor,
+}
+
+.white {
+  color: white;
+}
+
 .capitalize {
   text-transform: capitalize
 }