Feature #239: Replace early access label with network label (#311)

* Remove early access label

* Revert "Remove early access label"

This reverts commit 34682f0f6d9c1974a6e45c2a31358864931d9c1e.

* Replace early access label with network label

* Capitalzie first letter of the network name

src/components/Header/components/Layout.jsx

@@ -16,7 +16,7 @@ import {
   border, sm, md, headerHeight,
 } from '~/theme/variables'
 import Provider from './Provider'
-import EarlyAccessLabel from './EarlyAccessLabel'
+import NetworkLabel from './NetworkLabel'
 import SafeListHeader from './SafeListHeader'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
@@ -74,7 +74,7 @@ const Layout = openHoc(
       <Divider />
       <SafeListHeader />
       <Divider />
-      <EarlyAccessLabel />
+      <NetworkLabel />
       <Spacer />
       <Provider open={open} toggle={toggle} info={providerInfo}>
         {(providerRef) => (

src/components/Header/components/NetworkLabel.jsx

@@ -1,20 +1,22 @@
 // @flow
 import * as React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
+import { getNetwork } from '~/config'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import {
   xs, sm, md, border,
 } from '~/theme/variables'
 
-export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
+const network = getNetwork()
+const formattedNetwork = network[0].toUpperCase() + network.substring(1).toLowerCase()
 
 const useStyles = makeStyles({
   container: {
     flexGrow: 0,
     padding: `0 ${md}`,
   },
-  counter: {
+  text: {
     background: border,
     padding: `${xs} ${sm}`,
     borderRadius: '3px',
@@ -28,8 +30,8 @@ const EarlyAccessLabel = () => {
 
   return (
     <Col start="xs" middle="xs" className={classes.container}>
-      <Paragraph size="xs" className={classes.counter}>
-        Early access
+      <Paragraph size="xs" className={classes.text}>
+        {formattedNetwork}
       </Paragraph>
     </Col>
   )