Change network images (#43)

packages/react-components/src/components/Networks.tsx

@@ -2,14 +2,23 @@ import React from 'react'
 import styled from 'styled-components'
 import dapp from '../assets/svg/dapp.svg'
 import status from '../assets/svg/status.svg'
-import metamask from '../assets/svg/metamask.svg'
+import metamask from '../assets/metamask.png'
 
 export function Networks() {
   return (
     <NetworksWrapper>
-      <Network href="https://ethereum.org/en/dapps/" style={{ backgroundImage: `url(${dapp})` }} />
-      <Network href="https://status.im/get/" style={{ backgroundImage: `url(${status})` }} />
-      <Network href="https://metamask.io/" style={{ backgroundImage: `url(${metamask})` }} />
+      <Network href="https://ethereum.org/en/dapps/">
+        <NetworkLogo src={dapp} alt="DApp logo" />
+      </Network>
+      <Network href="https://status.im/get/">
+        {' '}
+        <NetworkLogo src={status} alt="DApp logo" />
+      </Network>
+      <Network href="https://metamask.io/">
+        {' '}
+        <NetworkLogoMeta src={metamask} alt="DApp logo" />
+        MetaMask
+      </Network>
     </NetworksWrapper>
   )
 }
@@ -22,11 +31,25 @@ const NetworksWrapper = styled.div`
 `
 
 const Network = styled.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 176px;
   height: 64px;
   margin-top: 32px;
   border: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: transparent;
+  font-weight: bold;
+  font-size: 17px;
+  line-height: 24px;
+  text-decoration: none;
+  color: #000000;
+`
+const NetworkLogo = styled.img`
+  width: auto;
+`
+
+const NetworkLogoMeta = styled(NetworkLogo)`
+  width: 64px;
+  height: 64px;
+  margin-right: 16px;
 `

packages/react-components/src/components/TopBar.tsx

@@ -1,11 +1,9 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useEthers, shortenAddress } from '@usedapp/core'
-import metamaskIcon from '../assets/svg/metamask.svg'
-import statusIcon from '../assets/svg/status.svg'
-import dappIcon from '../assets/svg/dapp.svg'
 import { Modal } from './Modal'
 import { ConnectButton, Account, ButtonDisconnect } from './misc/Buttons'
+import { Networks } from './Networks'
 
 type TopBarProps = {
   logo: string
@@ -59,11 +57,7 @@ export function TopBar({ logo, title, theme }: TopBarProps) {
 
       {selectConnect && (
         <Modal heading="Connect" setShowModal={setSelectConnect}>
-          <Networks>
-            <Network href="https://ethereum.org/en/dapps/" style={{ backgroundImage: `url(${dappIcon})` }} />
-            <Network href="https://status.im/get/" style={{ backgroundImage: `url(${statusIcon})` }} />
-            <Network href="https://metamask.io/" style={{ backgroundImage: `url(${metamaskIcon})` }} />
-          </Networks>
+          <Networks />
         </Modal>
       )}
     </Wrapper>
@@ -124,19 +118,3 @@ const ContentWrapper = styled.div`
     padding-left: 24px;
   }
 `
-const Networks = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`
-
-const Network = styled.a`
-  width: 176px;
-  height: 64px;
-  margin-top: 32px;
-  border: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: transparent;
-`

packages/react-components/src/index.tsx

@@ -11,7 +11,7 @@ import addIcon from './assets/svg/addIcon.svg'
 import checkIcon from './assets/svg/checkIcon.svg'
 import closeIcon from './assets/svg/close.svg'
 import dappIcon from './assets/svg/dapp.svg'
-import metamaskIcon from './assets/svg/metamask.svg'
+import metamaskIcon from './assets/metamask.png'
 import statusIcon from './assets/svg/status.svg'
 
 export {