Format macro name (patch)

src/plan/Macro.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import numeral from 'numeral';
+import upperFirst from 'lodash/upperFirst';
 
 import { Fab } from 'rmwc/Fab';
 import { Typography } from 'rmwc';
 
-// import colors from './colors';
 import MacroRing from './MacroRing';
 
 class Macro extends Component {
@@ -13,10 +13,10 @@ class Macro extends Component {
     const { increment, onAction, name, target, total } = this.props;
     const percent = numeral(total / target).format('0 %');
     return (
-      <div className="flex items-center">
+      <div className="macro pr-4">
         <MacroRing name={name} total={total} target={target} />
         <div>
-          <Typography use="subtitle1">{name}</Typography>{' '}
+          <Typography use="subtitle1">{upperFirst(name)}</Typography>{' '}
           <Typography use="caption">{percent}</Typography>
           <Typography use="body1" tag="div">
             {total} / {target} g
@@ -29,6 +29,13 @@ class Macro extends Component {
           label={`${increment}g`}
           icon="add"
         />
+        <style jsx>{`
+          .macro {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            grid-column-gap: 1rem;
+          }
+        `}</style>
       </div>
     );
   }