From edfbf4b649c84cb36bb45e7361c57aa1291971e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 1 Jun 2021 11:10:43 -0300
Subject: [PATCH 1/2] add Check icon - sample

---
 src/components/AppLayout/Header/components/Layout.tsx     | 8 +++++---
 .../AppLayout/Header/components/NetworkSelector.tsx       | 1 -
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index fdf091da..a1652f76 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/src/components/AppLayout/Header/components/Layout.tsx
@@ -5,7 +5,7 @@ import Popper from '@material-ui/core/Popper'
 import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
-import { Divider } from '@gnosis.pm/safe-react-components'
+import { Divider, Icon } from '@gnosis.pm/safe-react-components'
 
 import Provider from './Provider'
 import NetworkSelector from './NetworkSelector'
@@ -29,8 +29,9 @@ const StyledDivider = styled(Divider)`
 const StyledLink = styled.a`
   margin: 0;
   text-decoration: none;
-  display: block;
-  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 16px 12px 0;
 
   :hover {
     background-color: ${({ theme }) => theme.colors.background};
@@ -141,6 +142,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                         <React.Fragment key={network.name}>
                           <StyledLink href="#">
                             <NetworkLabel networkName={network.name} />
+                            <Icon type="check" size="md" color="primary" />
                           </StyledLink>
                           <StyledDivider />
                         </React.Fragment>
diff --git a/src/components/AppLayout/Header/components/NetworkSelector.tsx b/src/components/AppLayout/Header/components/NetworkSelector.tsx
index e3b4cdb1..8df7beae 100644
--- a/src/components/AppLayout/Header/components/NetworkSelector.tsx
+++ b/src/components/AppLayout/Header/components/NetworkSelector.tsx
@@ -25,7 +25,6 @@ const styles = () => ({
     cursor: 'pointer',
     display: 'flex',
     flex: '1 1 auto',
-    /* padding: sm, */
     justifyContent: 'space-between',
     [`@media (min-width: ${screenSm}px)`]: {
       paddingRight: sm,

From 6e0dccd28cdbc79e0796af20cfca060f59d0f337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 1 Jun 2021 14:16:48 -0300
Subject: [PATCH 2/2] fix styles on network label

---
 src/components/AppLayout/Header/components/Layout.tsx       | 2 +-
 src/components/AppLayout/Header/components/NetworkLabel.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index a1652f76..34932b75 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/src/components/AppLayout/Header/components/Layout.tsx
@@ -31,7 +31,7 @@ const StyledLink = styled.a`
   text-decoration: none;
   display: flex;
   justify-content: space-between;
-  padding: 12px 16px 12px 0;
+  padding: 14px 16px 14px 0;
 
   :hover {
     background-color: ${({ theme }) => theme.colors.background};
diff --git a/src/components/AppLayout/Header/components/NetworkLabel.tsx b/src/components/AppLayout/Header/components/NetworkLabel.tsx
index 94d135bf..86203c8a 100644
--- a/src/components/AppLayout/Header/components/NetworkLabel.tsx
+++ b/src/components/AppLayout/Header/components/NetworkLabel.tsx
@@ -24,7 +24,8 @@ const useStyles = makeStyles({
     lineHeight: 'normal',
     margin: '0',
     padding: `${xs} ${sm}`,
-    width: 'fit-content',
+    minWidth: '70px',
+    textAlign: 'center',
   },
 })