Merge pull request #14 from lionsharecapital/ben-fixes

Chart hover + STEEM title
lionsharecapital · Jan 23, 2017 · 2df4949 · 2df4949
2 parents 7823464 + ac45a7b
commit 2df4949
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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;