Setting format view from localStorage.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cryptologg",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "CryptoLogg only shows the price change of cryptocurrencies since the last time you checked. This is to discourage you from checking the values of your investments often.",
   "main": "webpack.prod.js",
   "homepage": "http://cryptologg.com",

src/js/components/Crypto.js

@@ -23,6 +23,12 @@ class Crypto extends Component {
   }
 
   componentDidMount() {
+    const currency = localStorage.getItem('currency');
+
+    if (currency !== null) {
+      this.setState({ currency: JSON.parse(currency) });
+    }
+
     this.spotPrice(this.crypto);
 
     document.addEventListener('visibilitychange', () => {
@@ -32,6 +38,10 @@ class Crypto extends Component {
     });
   }
 
+  componentDidUpdate() {
+    localStorage.setItem('currency', this.state.currency);
+  }
+
   spotPrice(currency) {
     axios.get(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=${currency}&tsyms=USD`)
       .then(response => {
@@ -92,7 +102,7 @@ class Crypto extends Component {
         text = this.state.currency ? `–${toCurrency(changeValue)}` : `–${toPercentage(changeValue)}`;
       } else {
         emoji = getEmoji(neutralEmoji);
-        text = this.state.currency ? toCurrency(0) : '0%';
+        text = this.state.currency ? '$0.00' : '0%';
       }
 
       return this.cards(value, emoji, title, text);
@@ -124,14 +134,14 @@ class Crypto extends Component {
           <div className="crypto__container">
             {this.marketChange()}
           </div>
-          <div className="crypto__format">
-            <span className={`crypto__button ${this.state.currency ? 'active' : ''}`} onClick={this.toggleCurrency}>
-              <span>$</span>
-            </span>
-            <span className={`crypto__button ${!this.state.currency ? 'active' : ''}`} onClick={this.toggleCurrency}>
-              <span>%</span>
-            </span>
-          </div>
+        </div>
+        <div className="crypto__format">
+          <span className={`crypto__button ${this.state.currency ? 'active' : ''}`} onClick={this.toggleCurrency}>
+            <span>$</span>
+          </span>
+          <span className={`crypto__button ${!this.state.currency ? 'active' : ''}`} onClick={this.toggleCurrency}>
+            <span>%</span>
+          </span>
         </div>
       </section>
     );

src/scss/components/_crypto.scss

@@ -70,6 +70,7 @@
     display: block;
 
     font-size: 1.5em;
+    cursor: pointer;
   }
 
   &__format {