From 2e9a69963ae84e485388725b300254cb45ff0fdc Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Thu, 8 Aug 2019 09:22:12 -0700
Subject: [PATCH] fix: dev feedback and bug fixes

---
 src/v2/assets/icons/github.svg                |  3 +++
 src/v2/components/Header/index.jsx            | 16 ++++++++++++++
 src/v2/components/Header/styles.js            | 21 +++++++++++++++++++
 src/v2/components/TourDeSol/Cards/index.jsx   |  2 +-
 src/v2/components/TourDeSol/Ranking/index.jsx |  7 ++++---
 src/v2/components/TourDeSol/Ranking/styles.js | 11 ++++++----
 src/v2/components/UI/StatCard/styles.js       |  2 +-
 src/v2/components/Validators/index.jsx        |  2 +-
 8 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/v2/assets/icons/github.svg

diff --git a/src/v2/assets/icons/github.svg b/src/v2/assets/icons/github.svg
new file mode 100644
index 00000000..40f9dcea
--- /dev/null
+++ b/src/v2/assets/icons/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M255.968 5.329C114.624 5.329 0 120.401 0 262.353c0 113.536 73.344 209.856 175.104 243.872 12.8 2.368 17.472-5.568 17.472-12.384 0-6.112-.224-22.272-.352-43.712-71.2 15.52-86.24-34.464-86.24-34.464-11.616-29.696-28.416-37.6-28.416-37.6-23.264-15.936 1.728-15.616 1.728-15.616 25.696 1.824 39.2 26.496 39.2 26.496 22.848 39.264 59.936 27.936 74.528 21.344 2.304-16.608 8.928-27.936 16.256-34.368-56.832-6.496-116.608-28.544-116.608-127.008 0-28.064 9.984-51.008 26.368-68.992-2.656-6.496-11.424-32.64 2.496-68 0 0 21.504-6.912 70.4 26.336 20.416-5.696 42.304-8.544 64.096-8.64 21.728.128 43.648 2.944 64.096 8.672 48.864-33.248 70.336-26.336 70.336-26.336 13.952 35.392 5.184 61.504 2.56 68 16.416 17.984 26.304 40.928 26.304 68.992 0 98.72-59.84 120.448-116.864 126.816 9.184 7.936 17.376 23.616 17.376 47.584 0 34.368-.32 62.08-.32 70.496 0 6.88 4.608 14.88 17.6 12.352C438.72 472.145 512 375.857 512 262.353 512 120.401 397.376 5.329 255.968 5.329z"/>
+</svg>
diff --git a/src/v2/components/Header/index.jsx b/src/v2/components/Header/index.jsx
index c937ffcc..2327ac0e 100644
--- a/src/v2/components/Header/index.jsx
+++ b/src/v2/components/Header/index.jsx
@@ -7,6 +7,7 @@ import {observer} from 'mobx-react-lite';
 import Logo from 'v2/components/UI/Logo';
 import Search from 'v2/components/Search';
 import EndpointSelector from 'v2/components/EndpointSelector';
+import {ReactComponent as GithubIcon} from 'v2/assets/icons/github.svg';
 
 import NavBar from '../NavBar';
 import useStyles from './styles';
@@ -33,6 +34,21 @@ const Header = () => {
           <div className={classes.search}>
             <Search />
           </div>
+          <div className={classes.github}>
+            <p>
+              report issues/
+              <br />
+              feedback on github:
+            </p>
+            <a
+              className={classes.icon}
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/solana-labs/blockexplorer/issues"
+            >
+              <GithubIcon />
+            </a>
+          </div>
           <div className={classes.realTime}>
             <p>
               Real-time
diff --git a/src/v2/components/Header/styles.js b/src/v2/components/Header/styles.js
index 49b7af7f..bb92b852 100644
--- a/src/v2/components/Header/styles.js
+++ b/src/v2/components/Header/styles.js
@@ -84,4 +84,25 @@ export default makeStyles(theme => ({
   menuIcon: {
     color: getColor('dark')(theme),
   },
+  github: {
+    display: 'flex',
+    fontSize: 12,
+    letterSpacing: 2.5,
+    textTransform: 'uppercase',
+    width: 220,
+    flexShrink: 0,
+    alignItems: 'center',
+    marginLeft: 16,
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    flexShrink: 0,
+    background: getColor('main')(theme),
+    padding: 8,
+    marginLeft: 5,
+  },
 }));
diff --git a/src/v2/components/TourDeSol/Cards/index.jsx b/src/v2/components/TourDeSol/Cards/index.jsx
index 7efaab05..64c5df45 100644
--- a/src/v2/components/TourDeSol/Cards/index.jsx
+++ b/src/v2/components/TourDeSol/Cards/index.jsx
@@ -41,7 +41,7 @@ const Cards = ({
     },
     {
       title: 'Total SOL In Circulation',
-      value: cluster.supply / Math.pow(2, 34).toFixed(2),
+      value: (cluster.supply / Math.pow(2, 34)).toFixed(2),
       changes: '',
       period: 'since yesterday',
     },
diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx
index e97c3d31..7f2be294 100644
--- a/src/v2/components/TourDeSol/Ranking/index.jsx
+++ b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {observer} from 'mobx-react-lite';
+import {Link} from 'react-router-dom';
 import {get, map, maxBy, compose} from 'lodash/fp';
 import HelpLink from 'v2/components/HelpLink';
 import NodesStore from 'v2/stores/nodes';
@@ -22,10 +23,10 @@ const Ranking = () => {
     const {identity = {}, nodePubkey} = node;
     return (
       <li key={nodePubkey} className={classes.item}>
-        <div className={classes.name}>
+        <Link to={`/validators/${nodePubkey}`} className={classes.name}>
           <Avatar pubkey={nodePubkey} avatarUrl={identity.avatarUrl} />
-          {identity.name || nodePubkey}
-        </div>
+          <span>{identity.name || nodePubkey}</span>
+        </Link>
         <div className={classes.bar}>
           <div
             className={classes.icon}
diff --git a/src/v2/components/TourDeSol/Ranking/styles.js b/src/v2/components/TourDeSol/Ranking/styles.js
index 1f4d1c09..982e08f7 100644
--- a/src/v2/components/TourDeSol/Ranking/styles.js
+++ b/src/v2/components/TourDeSol/Ranking/styles.js
@@ -18,14 +18,17 @@ export default makeStyles(theme => ({
   },
   name: {
     maxWidth: 130,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
     color: getColor('main')(theme),
-    marginRight: 20,
+    marginRight: 26,
     flexShrink: 0,
     display: 'flex',
     alignItems: 'center',
+    textDecoration: 'none',
+    '& span': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
     '& div:first-child': {
       marginRight: 15,
     },
diff --git a/src/v2/components/UI/StatCard/styles.js b/src/v2/components/UI/StatCard/styles.js
index c181f828..e85e4c40 100644
--- a/src/v2/components/UI/StatCard/styles.js
+++ b/src/v2/components/UI/StatCard/styles.js
@@ -19,7 +19,7 @@ export default makeStyles(theme => ({
     },
   },
   value: {
-    fontSize: 50,
+    fontSize: 40,
     fontWeight: 'bold',
     color: getColor('main')(theme),
     margin: '20px 0',
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index a68fe437..9d746a94 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -23,7 +23,7 @@ const Validators = () => {
   const cards = [
     {
       title: 'Total Circulating SOL',
-      value: cluster.supply / Math.pow(2, 34).toFixed(2),
+      value: (cluster.supply / Math.pow(2, 34)).toFixed(2),
       changes: '',
       period: 'since yesterday',
     },