Updated Footer and made Paragraph more robust

src/components/Footer/index.jsx

@@ -2,16 +2,17 @@
 import React from 'react'
 import Block from '~/components/layout/Block'
 import Link from '~/components/layout/Link'
+import Paragraph from '~/components/layout/Paragraph'
 import { WELCOME_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes'
 import styles from './index.scss'
 
 const Footer = () => (
   <Block className={styles.footer}>
     <Link to={WELCOME_ADDRESS}>
-      Welcome
+      <Paragraph size="sm" noMargin>Welcome</Paragraph>
     </Link>
     <Link to={SAFELIST_ADDRESS}>
-      Safe List
+      <Paragraph size="sm" noMargin>Safe List</Paragraph>
     </Link>
   </Block>
 )

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' | 'primary' | 'fancy',
+  color?: 'soft' | 'medium' | 'dark' | 'fancy',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React$Node,
   className?: string,

src/components/layout/Paragraph/index.scss

@@ -1,6 +1,7 @@
 .paragraph {
   text-overflow: ellipsis;
-  overflow-x: inherit;  
+  overflow-x: inherit;
+  color: $fontColor;
 }
 
 .soft {
@@ -15,10 +16,6 @@
   color: black;
 }
 
-.primary {
-  color: #00a6c4;
-}
-
 .fancy {
   color: $fancy;
 }