From ac45a7b3d0e0602edcb4ebf5971c2e2d0bbaa34f Mon Sep 17 00:00:00 2001
From: Ben Jennings <ben@coinbase.com>
Date: Sun, 22 Jan 2017 22:19:23 -0800
Subject: [PATCH] Chart hover + STEEM title

---
 .../Prices/components/PriceList/PriceList.js     | 12 +++++++++---
 .../Prices/components/PriceList/PriceList.scss   | 16 +++++++++++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/scenes/Prices/components/PriceList/PriceList.js b/src/scenes/Prices/components/PriceList/PriceList.js
index 179ea6c..9345566 100644
--- a/src/scenes/Prices/components/PriceList/PriceList.js
+++ b/src/scenes/Prices/components/PriceList/PriceList.js
@@ -9,6 +9,8 @@ import CurrencyColor from 'components/CurrencyColor';
 import ChangeHighlight from 'components/ChangeHighlight';
 import ColoredChange from 'components/ColoredChange';
 
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
 import styles from './PriceList.scss';
 
 const PriceList = ({ assets, visibleCurrencies }) => {
@@ -61,9 +63,13 @@ const AssetRow = ({
       justify="space-between"
       className={ styles.row }
     >
-      <Flex>
+      <Flex className={ styles.rowLeft }>
         <CurrencyColor color={ color } className={ styles.colorDot } />
-        <div className={ styles.currencyCode }>{ symbol }</div>
+        <div
+          className={ cx(styles.currencyCode, { tight: symbol.length >= 5 }) }
+        >
+          { symbol }
+        </div>
         <Flex column className={ styles.data }>
           <div className={ styles.price }>
             <ChangeHighlight trigger={ price }>
@@ -78,7 +84,7 @@ const AssetRow = ({
           </div>
         </Flex>
       </Flex>
-      <Flex align="center">
+      <Flex className={ styles.rowRight } align="center">
         <div className={ styles.chart }>
           <Line
             width={ 125 }
diff --git a/src/scenes/Prices/components/PriceList/PriceList.scss b/src/scenes/Prices/components/PriceList/PriceList.scss
index 7fabf73..675180f 100644
--- a/src/scenes/Prices/components/PriceList/PriceList.scss
+++ b/src/scenes/Prices/components/PriceList/PriceList.scss
@@ -7,18 +7,28 @@
 .row {
   position: relative;
   flex-shrink: 0;
-  padding: 15px;
   overflow-x: hidden;
 
   & + .row {
     border-top: 1px solid $darkGray;
   }
+}
+
+.rowLeft {
+  padding: 15px;
+  padding-right: 0px;
+}
+
+.rowRight {
+  padding: 15px;
+  padding-left: 0px;
 
   &:hover {
     .chart {
       opacity: 0.35;
       transition: opacity 0.25s ease;
     }
+
     .highlow {
       transform: translateX(0px);
       transition: transform 0.25s ease;
@@ -35,6 +45,10 @@
   width: 38px;
 }
 
+.tight {
+  letter-spacing: -1px;
+}
+
 .price {
   font-size: 24px;
   line-height: 1.2;