From b56018895e8fd9f01de7b053c4f2de45bf4d4689 Mon Sep 17 00:00:00 2001 From: Manuel Calavera Date: Wed, 18 Sep 2019 16:41:05 -0700 Subject: [PATCH] feat: google maps experience --- .env | 1 + .../NetworkOverview/NodesMap/index.jsx | 83 +----- .../NetworkOverview/NodesMap/styles.js | 25 +- .../Dashboard/NetworkOverview/styles.js | 2 +- src/v2/components/UI/Avatar/index.jsx | 3 +- src/v2/components/Validators/Detail/index.jsx | 95 +------ src/v2/components/Validators/Detail/styles.js | 6 + .../Validators/ValidatorsMap/index.jsx | 94 ------- src/v2/components/Validators/index.jsx | 21 +- src/v2/components/Validators/styles.js | 14 + src/v2/components/ValidatorsMap/Marker.jsx | 34 +++ src/v2/components/ValidatorsMap/index.jsx | 147 ++++++++++ src/v2/components/ValidatorsMap/mapStyle.json | 260 ++++++++++++++++++ .../{Validators => }/ValidatorsMap/styles.js | 17 +- src/v2/stores/nodes.js | 6 +- src/v2/theme.js | 1 + 16 files changed, 522 insertions(+), 287 deletions(-) delete mode 100644 src/v2/components/Validators/ValidatorsMap/index.jsx create mode 100644 src/v2/components/ValidatorsMap/Marker.jsx create mode 100644 src/v2/components/ValidatorsMap/index.jsx create mode 100644 src/v2/components/ValidatorsMap/mapStyle.json rename src/v2/components/{Validators => }/ValidatorsMap/styles.js (69%) diff --git a/.env b/.env index 46f0cc36..3f2a6d6b 100644 --- a/.env +++ b/.env @@ -1,2 +1,3 @@ SKIP_PREFLIGHT_CHECK=true REACT_APP_VERSION=$npm_package_version +REACT_APP_GOOGLE_MAP_KEY=AIzaSyArM4e0n53tWyK5drjXP03OmovvVJHk8OU diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx index cdb571ee..342c4a1f 100644 --- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx +++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx @@ -1,98 +1,27 @@ import {Typography} from '@material-ui/core'; import {observer} from 'mobx-react-lite'; import React from 'react'; -import { - ComposableMap, - Geographies, - Geography, - Marker, - Markers, - ZoomableGroup, -} from 'react-simple-maps'; -import {eq, map} from 'lodash/fp'; import NodesStore from 'v2/stores/nodes'; -import OverviewStore from 'v2/stores/networkOverview'; import Socket from 'v2/stores/socket'; -import MapTooltip from 'v2/components/UI/MapTooltip'; import Loader from 'v2/components/UI/Loader'; -import {mapStyle, markerStyle} from 'v2/theme'; +import ValidatorsMap from 'v2/components/ValidatorsMap'; import useStyles from './styles'; -const mapStyles = { - default: mapStyle, - hover: mapStyle, - pressed: mapStyle, -}; - const NodesMap = () => { const classes = useStyles(); const {mapMarkers} = NodesStore; - const {globalStats} = OverviewStore; const {isLoading} = Socket; - if (isLoading) { return ; } - const mapConfig = { - projection: { - scale: 90, - rotation: [-11, -10, 0], - }, - style: { - width: '100%', - }, - center: [0, 20], - }; - - const renderMarker = marker => ( - - ( - <> -
NODE: {marker.name}
-
Gossip: {marker.gossip}
- - )} - > - - - - ); return ( -
- Active Validators Map - - - - {(geographies, projection) => - geographies.map((geography, i) => ( - - )) - } - - {map(renderMarker)(mapMarkers)} - - +
+ + Active Validators Map + +
); }; diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js index d410663d..0ddffedb 100644 --- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js +++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js @@ -6,23 +6,14 @@ export default makeStyles(theme => ({ background: getColor('grey2')(theme), maxHeight: 290, overflow: 'hidden', - padding: '14px 35px', + height: '100%', + border: `1px solid ${getColor('grey5')(theme)}`, + position: 'relative', }, - tooltip: { - background: '#fff', - color: getColor('dark')(theme), - padding: 10, - borderRadius: 0, - }, - tooltipTitle: { - fontSize: 15, - marginBottom: 4, - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - }, - tooltipDesc: { - fontSize: 12, - color: getColor('grey3')(theme), + mapTitle: { + position: 'absolute', + zIndex: 1000, + left: 24, + top: 13, }, })); diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js index 82eb78b0..719f9ff3 100644 --- a/src/v2/components/Dashboard/NetworkOverview/styles.js +++ b/src/v2/components/Dashboard/NetworkOverview/styles.js @@ -15,7 +15,7 @@ export default makeStyles(theme => ({ }, mapCard: { height: 306, - '& svg': { + '& > svg': { width: '100%', height: 295, minHeight: 290, diff --git a/src/v2/components/UI/Avatar/index.jsx b/src/v2/components/UI/Avatar/index.jsx index b57391b4..faf4b38d 100644 --- a/src/v2/components/UI/Avatar/index.jsx +++ b/src/v2/components/UI/Avatar/index.jsx @@ -1,5 +1,6 @@ // @flow import React from 'react'; +import {observer} from 'mobx-react-lite'; import BaseAvatar from '@material-ui/core/Avatar'; import theme from 'v2/theme'; import getColor from 'v2/utils/getColor'; @@ -45,4 +46,4 @@ const Avatar = ({ return ; }; -export default Avatar; +export default observer(Avatar); diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx index 39558431..26d7a24e 100644 --- a/src/v2/components/Validators/Detail/index.jsx +++ b/src/v2/components/Validators/Detail/index.jsx @@ -3,41 +3,24 @@ import {Container, useTheme} from '@material-ui/core'; import {observer} from 'mobx-react-lite'; import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery'; import React, {useEffect} from 'react'; -import {map, find, eq} from 'lodash/fp'; +import {map, find} from 'lodash/fp'; import {Match} from 'react-router-dom'; -import getUptime from 'v2/utils/getUptime'; -import { - ComposableMap, - Geographies, - Geography, - Marker, - Markers, - ZoomableGroup, -} from 'react-simple-maps'; +import getUptime from 'v2/utils/getUptime'; import SectionHeader from 'v2/components/UI/SectionHeader'; import NodesStore from 'v2/stores/nodes'; -import OverviewStore from 'v2/stores/networkOverview'; -import {mapStyle, markerStyle} from 'v2/theme'; -import MapTooltip from 'v2/components/UI/MapTooltip'; import HelpLink from 'v2/components/HelpLink'; import Button from 'v2/components/UI/Button'; import Avatar from 'v2/components/UI/Avatar'; import Mixpanel from 'v2/mixpanel'; import CopyBtn from 'v2/components/UI/CopyBtn'; -import {LAMPORT_SOL_RATIO} from '../../../constants'; +import {LAMPORT_SOL_RATIO} from 'v2/constants'; +import ValidatorsMap from 'v2/components/ValidatorsMap'; import useStyles from './styles'; -const mapStyles = { - default: mapStyle, - hover: mapStyle, - pressed: mapStyle, -}; - const ValidatorsDetail = ({match}: {match: Match}) => { const {validators, inactiveValidators, totalStaked} = NodesStore; - const {globalStats} = OverviewStore; const classes = useStyles(); const theme = useTheme(); @@ -58,27 +41,15 @@ const ValidatorsDetail = ({match}: {match: Match}) => { return
Loading...
; } - const {nodePubkey, gossip, activatedStake, commission, identity = {}} = node; - - const renderMarker = () => ( - - ( - <> -
NODE: {nodePubkey}
-
Gossip: {gossip}
- - )} - > - - - - ); - + const { + nodePubkey, + gossip, + activatedStake, + commission, + identity = {}, + coordinates, + } = node; + const markers = [{gossip, coordinates, name: nodePubkey}]; const specs = [ { label: 'Address', @@ -152,18 +123,6 @@ const ValidatorsDetail = ({match}: {match: Match}) => { }, ]; - const mapConfig = { - projection: { - scale: 85, - rotation: [-11, 0, 0], - }, - style: { - width: '100%', - height: 'auto', - }, - center: [0, 20], - }; - const renderSpec = ({label, value}: {label: string, value: string}) => (
  • @@ -216,32 +175,8 @@ const ValidatorsDetail = ({match}: {match: Match}) => { )} {map(renderSpec)(specs)} -
    - - - - {(geographies, projection) => - geographies.map((geography, i) => ( - - )) - } - - {node.coordinates && renderMarker()} - - +
    +
    diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js index e61fc830..4bf2b4af 100644 --- a/src/v2/components/Validators/Detail/styles.js +++ b/src/v2/components/Validators/Detail/styles.js @@ -97,4 +97,10 @@ export default makeStyles(theme => ({ alignItem: 'center', color: getColor('main')(theme), }, + map: { + height: 500, + [theme.breakpoints.down('sm')]: { + height: 250, + }, + }, })); diff --git a/src/v2/components/Validators/ValidatorsMap/index.jsx b/src/v2/components/Validators/ValidatorsMap/index.jsx deleted file mode 100644 index ecda7d99..00000000 --- a/src/v2/components/Validators/ValidatorsMap/index.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import {Typography} from '@material-ui/core'; -import {observer} from 'mobx-react-lite'; -import React from 'react'; -import { - ComposableMap, - Geographies, - Geography, - Marker, - Markers, - ZoomableGroup, -} from 'react-simple-maps'; -import {eq, map} from 'lodash/fp'; -import nodesStore from 'v2/stores/nodes'; -import OverviewStore from 'v2/stores/networkOverview'; -import MapTooltip from 'v2/components/UI/MapTooltip'; -import {mapStyle, markerStyle} from 'v2/theme'; - -import useStyles from './styles'; - -const mapStyles = { - default: mapStyle, - hover: mapStyle, - pressed: mapStyle, -}; - -const ValidatorsMap = () => { - const classes = useStyles(); - const {mapMarkers} = nodesStore; - const {globalStats} = OverviewStore; - - const mapConfig = { - projection: { - scale: 150, - rotation: [-11, 0, 0], - }, - style: { - width: '100%', - height: '100%', - }, - center: [0, 20], - }; - - const renderMarker = marker => ( - - ( - <> -
    NODE: {marker.name}
    -
    Gossip: {marker.gossip}
    - - )} - > - -     -     - ); - return ( -
    - Active Validators Map - - - - {(geographies, projection) => - geographies.map((geography, i) => ( - - )) - } - - {map(renderMarker)(mapMarkers)} - - -
    - ); -}; - -export default observer(ValidatorsMap); diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx index 6b0387ec..ebce1739 100644 --- a/src/v2/components/Validators/index.jsx +++ b/src/v2/components/Validators/index.jsx @@ -1,5 +1,5 @@ // @flow -import {Container, Grid} from '@material-ui/core'; +import {Container, Grid, Typography} from '@material-ui/core'; import React, {useEffect} from 'react'; import {observer} from 'mobx-react-lite'; import {map} from 'lodash/fp'; @@ -10,15 +10,22 @@ import Mixpanel from 'v2/mixpanel'; import Button from 'v2/components/UI/Button'; import Socket from 'v2/stores/socket'; import Loader from 'v2/components/UI/Loader'; +import ValidatorsMap from 'v2/components/ValidatorsMap'; +import HelpLink from '../HelpLink'; -import ValidatorsMap from './ValidatorsMap'; import ValidatorsTable from './Table'; import useStyles from './styles'; import {LAMPORT_SOL_RATIO} from '../../constants'; const Validators = () => { const classes = useStyles(); - const {supply, validators, fetchClusterInfo, totalStaked} = NodesStore; + const { + supply, + validators, + fetchClusterInfo, + totalStaked, + mapMarkers, + } = NodesStore; const {isLoading} = Socket; useEffect(() => { fetchClusterInfo(); @@ -108,7 +115,13 @@ const Validators = () => {
    ) : ( - +
    + + Active Validators Map + + + +
    )} diff --git a/src/v2/components/Validators/styles.js b/src/v2/components/Validators/styles.js index 6abb55a1..2fff1822 100644 --- a/src/v2/components/Validators/styles.js +++ b/src/v2/components/Validators/styles.js @@ -64,4 +64,18 @@ export default makeStyles(theme => ({ height: '100%', }, }, + map: { + height: '100%', + border: `1px solid ${getColor('grey5')(theme)}`, + position: 'relative', + [theme.breakpoints.down('sm')]: { + height: 290, + }, + }, + mapTitle: { + position: 'absolute', + left: 24, + top: 13, + zIndex: 100, + }, })); diff --git a/src/v2/components/ValidatorsMap/Marker.jsx b/src/v2/components/ValidatorsMap/Marker.jsx new file mode 100644 index 00000000..a7f172af --- /dev/null +++ b/src/v2/components/ValidatorsMap/Marker.jsx @@ -0,0 +1,34 @@ +// @flow +import React from 'react'; +import MapTooltip from 'v2/components/UI/MapTooltip'; +import Avatar from 'v2/components/UI/Avatar'; + +import useStyles from './styles'; + +const Marker = ({scale, marker}: {scale: number, marker: any}) => { + const classes = useStyles(); + const size = scale < 4 ? 10 * scale : 40; + return ( + ( + <> +
    NODE: {marker.name}
    +
    Gossip: {marker.gossip}
    + + )} + > +
    + +
    +     + ); +}; + +export default Marker; diff --git a/src/v2/components/ValidatorsMap/index.jsx b/src/v2/components/ValidatorsMap/index.jsx new file mode 100644 index 00000000..a6347745 --- /dev/null +++ b/src/v2/components/ValidatorsMap/index.jsx @@ -0,0 +1,147 @@ +// @flow +import GoogleMap from 'google-map-react'; +import {get, map} from 'lodash/fp'; +import {observer} from 'mobx-react-lite'; +import React, {useState} from 'react'; + +import Marker from './Marker'; +import mapStyle from './mapStyle'; + +const apiKey = process.env.REACT_APP_GOOGLE_MAP_KEY; +const defaultCenter = [0, 0]; +const mapOptions = { + disableDefaultUI: true, + minZoom: 1, + styles: mapStyle, +}; + +function isFullscreen(element) { + return ( + (document.fullscreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement) === element + ); +} + +function requestFullscreen(element) { + if (element.requestFullscreen) { + element.requestFullscreen(); + } else if (element.webkitRequestFullScreen) { + element.webkitRequestFullScreen(); + } else if (element.mozRequestFullScreen) { + element.mozRequestFullScreen(); + } else if (element.msRequestFullScreen) { + element.msRequestFullScreen(); + } +} +function exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msCancelFullScreen) { + document.msCancelFullScreen(); + } +} + +function addStylesToZoomBtn(btn) { + btn.style.width = '47px'; + btn.style.height = '40px'; + btn.style.fontSize = '40px'; + btn.style.color = '#00FFAD'; + btn.style.fontWeight = 'bold'; + btn.style.textAlign = 'center'; + btn.style.cursor = 'pointer'; +} + +function FullScreenControl(controlDiv, map, maps) { + const controlWrapper = document.createElement('div'); + const fullscreenButton = document.createElement('div'); + fullscreenButton.style.marginRight = '22px'; + fullscreenButton.style.marginTop = '22px'; + fullscreenButton.style.cursor = 'pointer'; + fullscreenButton.innerHTML = ` + + + + `; + controlDiv.appendChild(controlWrapper); + controlWrapper.appendChild(fullscreenButton); + const elementToSendFullscreen = map.getDiv().firstChild; + maps.event.addDomListener(fullscreenButton, 'click', () => { + if (isFullscreen(elementToSendFullscreen)) { + exitFullscreen(); + } else { + requestFullscreen(elementToSendFullscreen); + } + }); +} + +function ZoomControl(controlDiv, map, maps) { + const controlWrapper = document.createElement('div'); + const zoomOutButton = document.createElement('div'); + const zoomInButton = document.createElement('div'); + controlDiv.appendChild(controlWrapper); + controlWrapper.style.marginRight = '11px'; + addStylesToZoomBtn(zoomInButton); + zoomInButton.innerText = '+'; + controlWrapper.appendChild(zoomInButton); + addStylesToZoomBtn(zoomOutButton); + zoomOutButton.innerText = '-'; + controlWrapper.appendChild(zoomOutButton); + maps.event.addDomListener(zoomInButton, 'click', () => + map.setZoom(map.getZoom() + 1), + ); + maps.event.addDomListener(zoomOutButton, 'click', () => + map.setZoom(map.getZoom() - 1), + ); +} + +const renderMarkers = zoom => + map(marker => { + return ( + + ); + }); + +const ValidatorsMap = ({markers}: {markers: []}) => { + const [zoom, setZoom] = useState(1); + const apiIsLoaded = (googleMap, maps) => { + const zoomControlDiv = document.createElement('div'); + const fullscreenControlDiv = document.createElement('div'); + new ZoomControl(zoomControlDiv, googleMap, maps); + new FullScreenControl(fullscreenControlDiv, googleMap, maps); + zoomControlDiv.index = 1; + fullscreenControlDiv.index = 1; + googleMap.controls[maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv); + googleMap.controls[maps.ControlPosition.RIGHT_TOP].push( + fullscreenControlDiv, + ); + googleMap.addListener('zoom_changed', () => setZoom(googleMap.getZoom())); + }; + return ( + apiIsLoaded(map, maps)} + options={mapOptions} + > + {renderMarkers(zoom)(markers)} + + ); +}; + +export default observer(ValidatorsMap); diff --git a/src/v2/components/ValidatorsMap/mapStyle.json b/src/v2/components/ValidatorsMap/mapStyle.json new file mode 100644 index 00000000..77131952 --- /dev/null +++ b/src/v2/components/ValidatorsMap/mapStyle.json @@ -0,0 +1,260 @@ +[ + { + "elementType": "geometry", + "stylers": [ + { + "color": "#212121" + } + ] + }, + { + "elementType": "labels.icon", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#757575" + } + ] + }, + { + "elementType": "labels.text.stroke", + "stylers": [ + { + "color": "#212121" + } + ] + }, + { + "featureType": "administrative", + "elementType": "geometry", + "stylers": [ + { + "color": "#757575" + }, + { + "visibility": "off" + } + ] + }, + { + "featureType": "administrative.country", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#9e9e9e" + } + ] + }, + { + "featureType": "administrative.land_parcel", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "administrative.locality", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#bdbdbd" + } + ] + }, + { + "featureType": "administrative.neighborhood", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "poi", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "poi", + "elementType": "labels.text", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "poi", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#757575" + } + ] + }, + { + "featureType": "poi.park", + "elementType": "geometry", + "stylers": [ + { + "color": "#181818" + } + ] + }, + { + "featureType": "poi.park", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#616161" + }, + { + "visibility": "off" + } + ] + }, + { + "featureType": "poi.park", + "elementType": "labels.text.stroke", + "stylers": [ + { + "color": "#1b1b1b" + } + ] + }, + { + "featureType": "road", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "road", + "elementType": "geometry.fill", + "stylers": [ + { + "color": "#2c2c2c" + } + ] + }, + { + "featureType": "road", + "elementType": "labels", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "road", + "elementType": "labels.icon", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "road", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#8a8a8a" + } + ] + }, + { + "featureType": "road.arterial", + "elementType": "geometry", + "stylers": [ + { + "color": "#373737" + } + ] + }, + { + "featureType": "road.highway", + "elementType": "geometry", + "stylers": [ + { + "color": "#3c3c3c" + } + ] + }, + { + "featureType": "road.highway.controlled_access", + "elementType": "geometry", + "stylers": [ + { + "color": "#4e4e4e" + } + ] + }, + { + "featureType": "road.local", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#616161" + } + ] + }, + { + "featureType": "transit", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "transit", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#757575" + } + ] + }, + { + "featureType": "water", + "elementType": "geometry", + "stylers": [ + { + "color": "#000000" + } + ] + }, + { + "featureType": "water", + "elementType": "labels.text", + "stylers": [ + { + "visibility": "off" + } + ] + }, + { + "featureType": "water", + "elementType": "labels.text.fill", + "stylers": [ + { + "color": "#3d3d3d" + } + ] + } +] diff --git a/src/v2/components/Validators/ValidatorsMap/styles.js b/src/v2/components/ValidatorsMap/styles.js similarity index 69% rename from src/v2/components/Validators/ValidatorsMap/styles.js rename to src/v2/components/ValidatorsMap/styles.js index b7710b7f..4ea28097 100644 --- a/src/v2/components/Validators/ValidatorsMap/styles.js +++ b/src/v2/components/ValidatorsMap/styles.js @@ -2,17 +2,6 @@ import {makeStyles} from '@material-ui/core'; import getColor from 'v2/utils/getColor'; export default makeStyles(theme => ({ - card: { - background: getColor('grey2')(theme), - height: '100%', - overflow: 'hidden', - padding: '14px 35px', - display: 'flex', - flexDirection: 'column', - '& svg': { - margin: 'auto', - }, - }, tooltip: { background: '#fff', color: getColor('dark')(theme), @@ -30,4 +19,10 @@ export default makeStyles(theme => ({ fontSize: 12, color: getColor('grey3')(theme), }, + marker: { + transition: '.15s ease-in-out', + '&:hover': { + transform: 'scale(2)', + }, + }, })); diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js index 41932621..9ed45526 100644 --- a/src/v2/stores/nodes.js +++ b/src/v2/stores/nodes.js @@ -49,10 +49,12 @@ class Store { get mapMarkers() { return compose( - map(({nodePubkey: name, tpu: gossip, coordinates}) => ({ - name, + map(({nodePubkey: pubkey, tpu: gossip, coordinates, identity}) => ({ + pubkey, gossip, coordinates, + name: (identity && identity.name) || 'Unknown', + avatarUrl: (identity && identity.avatarUrl) || '', })), filter({what: 'Validator'}), )(this.network); diff --git a/src/v2/theme.js b/src/v2/theme.js index 300af136..f1a473ac 100644 --- a/src/v2/theme.js +++ b/src/v2/theme.js @@ -13,6 +13,7 @@ export default createMuiTheme({ grey2: '#202020', grey3: '#979797', grey4: '#c4c4c4', + grey5: '#505050', main, white: '#fff', greenDark: '#00a771',