Add extra button for increment (minor)

vasco3 · Sep 22, 2018 · 3c740c3 · 3c740c3
1 parent d83b719
commit 3c740c3
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 25 deletions.
diff --git a/src/plan/Macro.js b/src/plan/Macro.js
@@ -24,43 +24,64 @@ const { className, styles } = css.resolve`span {
 }`;
 
 class Macro extends Component {
-  state = {};
   render() {
-    const { decrement, increment, onAction, name, target, total } = this.props;
-    const percent = numeral(total / target).format('0%');
+    const {
+      decrement,
+      incrementLow,
+      incrementHigh,
+      onAction,
+      name,
+      target,
+      total,
+    } = this.props;
     return (
-      <div>
-        <Typography use="overline" className="pl-4">
-          {upperFirst(name)}
-        </Typography>{' '}
-        <Typography use="body1">
-          {formatNumber(target - total)} to {formatNumber(target)}g
-        </Typography>
+      <div className="mb-4">
+        <div className="title px-4">
+          <div>
+            <Typography use="headline6">
+              {formatNumber(target - total)}g
+            </Typography>
+            <Typography use="caption"> to {formatNumber(target)}g</Typography>
+          </div>
+          <Typography use="overline" className="pl-4">
+            {upperFirst(name)}
+          </Typography>
+        </div>
+
         <ListDivider />
-        <div className="macro">
+
+        <div className="macro mt-4">
           <div className="chart">
             <MacroRing name={name} total={total} target={target} />
 
             <Typography className={className} use="caption">
-              {percent}
+              {formatNumber(total)}g
             </Typography>
           </div>
 
           <div>
             <Fab
-              className="mr-4"
+              className="mr-2"
               onClick={function handleMacroActionRemove() {
                 onAction({ action: 'subtract', macro: name, value: decrement });
               }}
               label={`${decrement}`}
               icon="remove"
             />
             <Fab
-              className="mr-4"
-              onClick={function handleMacroActionAdd() {
-                onAction({ action: 'add', macro: name, value: increment });
+              className="mr-2"
+              onClick={function handleMacroActionAddLow() {
+                onAction({ action: 'add', macro: name, value: incrementLow });
               }}
-              label={`${increment}`}
+              label={`${incrementLow}`}
+              icon="add"
+            />
+            <Fab
+              className="mr-2"
+              onClick={function handleMacroActionAddHigh() {
+                onAction({ action: 'add', macro: name, value: incrementHigh });
+              }}
+              label={`${incrementHigh}`}
               icon="add"
             />
           </div>
@@ -75,6 +96,10 @@ class Macro extends Component {
             align-items: center;
             justify-content: space-between;
           }
+          .title {
+            display: flex;
+            justify-content: space-between;
+          }
         `}</style>
       </div>
     );

diff --git a/src/plan/Plan.js b/src/plan/Plan.js
@@ -38,12 +38,10 @@ class Plan extends React.Component {
 
     const hasRecipesMinimum = recipes.size < RECIPES_MINIMUM;
 
+    const styleBanner = isWorkoutDay ? { style: { display: 'none' } } : {};
     return (
       <div className="plan">
-        <div
-          className="banner text-center"
-          style={isWorkoutDay ? { display: 'none' } : {}}
-        >
+        <div className="banner text-center" {...styleBanner}>
           <Typography use="subtitle1" theme="onSecondary">
             Workout Day
           </Typography>
@@ -64,7 +62,9 @@ class Plan extends React.Component {
                 <div className="flex justify-between px-4 py-6 items-center">
                   <Typography use="headline5">
                     {numeral(macros.calories - tracker.calories).format('0,0')}{' '}
-                    to {numeral(macros.calories).format('0,0')} cal
+                    <Typography use="subtitle1">
+                      to {numeral(macros.calories).format('0,0')} cal
+                    </Typography>
                   </Typography>
                   <Button onClick={() => handleTracker({ action: 'reset' })}>
                     Reset
@@ -84,23 +84,26 @@ class Plan extends React.Component {
 
                 <Macro
                   decrement={1}
-                  increment={10}
+                  incrementLow={5}
+                  incrementHigh={10}
                   name="carbs"
                   target={macros.carbs}
                   total={tracker.carbs}
                   onAction={handleTracker}
                 />
                 <Macro
                   decrement={1}
-                  increment={5}
+                  incrementLow={5}
+                  incrementHigh={10}
                   name="protein"
                   target={macros.protein}
                   total={tracker.protein}
                   onAction={handleTracker}
                 />
                 <Macro
                   decrement={1}
-                  increment={5}
+                  incrementLow={5}
+                  incrementHigh={10}
                   name="fat"
                   target={macros.fat}
                   total={tracker.fat}