From 747bcef17a43ba0ef837736a87769287405d93be Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Wed, 11 Dec 2019 14:05:37 +0400
Subject: [PATCH] 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            |  4 ++--
 .../{EarlyAccessLabel.jsx => NetworkLabel.jsx}         | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)
 rename src/components/Header/components/{EarlyAccessLabel.jsx => NetworkLabel.jsx} (73%)

diff --git a/src/components/Header/components/Layout.jsx b/src/components/Header/components/Layout.jsx
index 9674076d..6e21069c 100644
--- a/src/components/Header/components/Layout.jsx
+++ b/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) => (
diff --git a/src/components/Header/components/EarlyAccessLabel.jsx b/src/components/Header/components/NetworkLabel.jsx
similarity index 73%
rename from src/components/Header/components/EarlyAccessLabel.jsx
rename to src/components/Header/components/NetworkLabel.jsx
index bcfb81eb..152b5efb 100644
--- a/src/components/Header/components/EarlyAccessLabel.jsx
+++ b/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>
   )