From 865d34df544177242d8983e844fd9185abd21acd Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Fri, 3 Sep 2021 11:14:41 +0200 Subject: [PATCH] Change network images (#43) --- .../react-components/src/assets/metamask.png | Bin 0 -> 10102 bytes .../src/assets/svg/metamask.svg | 10 ----- .../src/components/Networks.tsx | 37 ++++++++++++++---- .../src/components/TopBar.tsx | 26 +----------- packages/react-components/src/index.tsx | 2 +- 5 files changed, 33 insertions(+), 42 deletions(-) create mode 100644 packages/react-components/src/assets/metamask.png delete mode 100644 packages/react-components/src/assets/svg/metamask.svg diff --git a/packages/react-components/src/assets/metamask.png b/packages/react-components/src/assets/metamask.png new file mode 100644 index 0000000000000000000000000000000000000000..0e9caee1febbc9a23c8d3f6996da1ae3e17a4729 GIT binary patch literal 10102 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 H - - - - - - - - - diff --git a/packages/react-components/src/components/Networks.tsx b/packages/react-components/src/components/Networks.tsx index 055f9f2..12defb8 100644 --- a/packages/react-components/src/components/Networks.tsx +++ b/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 ( - - - + + + + + {' '} + + + + {' '} + + MetaMask + ) } @@ -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; ` diff --git a/packages/react-components/src/components/TopBar.tsx b/packages/react-components/src/components/TopBar.tsx index 13ccb16..bda4b0e 100644 --- a/packages/react-components/src/components/TopBar.tsx +++ b/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 && ( - - - - - + )} @@ -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; -` diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 57809dd..6816863 100644 --- a/packages/react-components/src/index.tsx +++ b/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 {