number formatting tweaks

src/main/index.js

@@ -17,8 +17,8 @@ if (
   isDev = true
 }
 
-const width = 620
-const height = 440
+const width = 640
+const height = 450
 
 const createWindow = async () => {
   const isDarkMode = systemPreferences.isDarkMode()

src/renderer/components/Ticker.css

@@ -1,24 +1,25 @@
 .ticker {
-    justify-content: center;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+    margin-top: 3rem;
+    margin-bottom: 4rem;
+    width: 100%;
 }
 
 .ticker .number-unit {
-    flex: initial;
-    margin-top: 1rem;
+    margin-top: 0;
 }
 
 .ticker button {
     background: none;
     border: 1px solid #e2e2e2;
     box-shadow: none;
-    margin: 0;
+    margin: 0 auto;
     outline: 0;
-    font-size: .8rem;
+    font-size: .75rem;
     border-radius: .3rem;
-    padding: .2rem .4rem;
+    padding: .3rem .4rem;
     display: block;
+    width: 100%;
+    max-width: 12rem;
     transition: border .2s ease-out;
     color: #41474e;
 }
@@ -33,12 +34,11 @@
 }
 
 .label--price {
-    display: inline-block;
     font-size: .95rem;
 }
 
 .change {
-    font-size: .7rem;
+    font-size: .65rem;
     display: inline-block;
     margin-left: .25rem;
 }

src/renderer/components/Ticker.jsx

@@ -11,12 +11,12 @@ const Item = posed.div(fadeIn)
 const Change = ({ currency }) => (
   <AppContext.Consumer>
     {({ priceChanges }) => {
-      let classes = JSON.stringify(priceChanges[currency]).startsWith('+')
-        ? 'change--positive'
-        : 'change--negative'
+      const isNegative = JSON.stringify(priceChanges[currency]).startsWith('-')
+      let classes = isNegative ? 'change--negative' : 'change--positive'
 
       return (
-        <span className={`change ${classes}`}>
+        <span className={`change ${classes}`} title="24hr change">
+          {!isNegative && '+'}
           {Number(priceChanges[currency]).toFixed(1)}%
         </span>
       )
@@ -31,39 +31,44 @@ Change.propTypes = {
 export default class Ticker extends PureComponent {
   static contextType = AppContext
 
-  items = activeStyle =>
+  items = () => {
+    const {
+      prices,
+      needsConfig,
+      currency,
+      toggleCurrencies,
+      accentColor
+    } = this.context
+
+    const activeStyle = {
+      backgroundColor: accentColor,
+      color: '#fff',
+      borderColor: accentColor
+    }
+
     // convert Map to array first, cause for...of or forEach returns undefined,
     // so it cannot be mapped to a collection of elements
-    [...this.context.prices.entries()].map(([key, value]) => (
+    return [...prices.entries()].map(([key, value]) => (
       <Item key={key} className="number-unit">
         <button
           className="label label--price"
-          onClick={() => this.context.toggleCurrencies(key)}
-          disabled={this.context.needsConfig}
-          style={
-            key === this.context.currency && !this.context.needsConfig
-              ? activeStyle
-              : {}
-          }
+          onClick={() => toggleCurrencies(key)}
+          disabled={needsConfig}
+          style={key === currency && !needsConfig ? activeStyle : {}}
         >
           {cryptoFormatter(value, key)}
           {key !== 'ocean' && <Change currency={key} />}
         </button>
       </Item>
     ))
+  }
 
   render() {
-    const { accentColor } = this.context
-
-    const activeStyle = {
-      backgroundColor: accentColor,
-      color: '#fff',
-      borderColor: accentColor
-    }
-
     return (
-      <footer className="number-unit-wrap ticker" {...this.props}>
-        <PoseGroup animateOnMount>{this.items(activeStyle)}</PoseGroup>
+      <footer className="ticker" {...this.props}>
+        <div className="number-unit-wrap">
+          <PoseGroup animateOnMount>{this.items()}</PoseGroup>
+        </div>
       </footer>
     )
   }

src/renderer/screens/Home.css

@@ -26,19 +26,16 @@
 }
 
 .number-unit-wrap {
-    display: flex;
+    display: grid;
+    grid-gap: .5rem;
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    justify-items: start;
     width: 100%;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    position: relative;
 }
 
 .number-unit {
     text-align: center;
-    flex: 1 1 20%;
-    margin-top: 5%;
-    padding-left: 2%;
-    padding-right: 2%;
+    width: 100%;
 }
 
 .label {
@@ -52,6 +49,7 @@
 
 .number-unit-wrap--accounts {
     min-height: 55px;
+    padding-top: 2rem;
 }
 
 .number-unit--main {

src/renderer/screens/Preferences/index.css

@@ -3,6 +3,7 @@
     width: 100%;
     position: relative;
     margin-top: 7vh;
+    padding-bottom: 4rem;
 }
 
 .preferences__title {

src/utils.js

@@ -1,6 +1,8 @@
 const { app, shell } = require('electron')
 const { formatCurrency } = require('@coingecko/cryptoformat')
 
+const isFiat = currency => currency === 'eur' || currency === 'usd'
+
 const openUrl = url => {
   shell.openExternal(url)
 }
@@ -35,9 +37,22 @@ const formatOcean = value => {
   return numberformatted.replace(/EUR/, 'Ọ').replace(/€/, 'Ọ')
 }
 
+const formatFiat = (value, currency) => {
+  const numberformatted = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 4,
+    style: 'currency',
+    currency: currency.toUpperCase()
+  }).format(value)
+
+  return numberformatted
+}
+
 const cryptoFormatter = (value, currency) => {
   if (currency === 'ocean') {
     return formatOcean(value)
+  } else if (isFiat(currency)) {
+    return formatFiat(value, currency)
   } else {
     return formatCurrency(value, currency.toUpperCase(), locale)
       .replace(/BTC/, 'Ƀ')