Updating styles of NotConnected provider component

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>
 )

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>

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>

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,

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
 }