From 7990c65c3309d0e722b699cdc9edb5fb60da6f03 Mon Sep 17 00:00:00 2001
From: OtacilioN <contato@otaciliomaia.com>
Date: Thu, 9 May 2019 11:42:23 -0300
Subject: [PATCH 1/2] Add space-between to list elements and areaName

areaName props displayed at header of ActionArea
---
 src/App.js                   | 10 ++++++++--
 src/components/ActionArea.js |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index a291201..c5f90ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,7 @@ function ListRender(props) {
       style={{
         flexWrap: 'wrap',
         display: 'flex',
-        // justifyContent: 'space-between',
+        justifyContent: 'space-between',
         marginTop: 32
       }}
     >
@@ -62,7 +62,13 @@ export default class App extends React.Component {
             }}
           >
             <CardContent style={{ marginLeft: 32, marginRight: 32 }}>
-              <ActionArea>
+              <ActionArea
+                areaName={
+                  this.state.inFocus
+                    ? this.state.results.data[this.state.inFocus - 1].id
+                    : null
+                }
+              >
                 {this.state.inFocus && (
                   <div
                     style={{
diff --git a/src/components/ActionArea.js b/src/components/ActionArea.js
index acfcc79..89798dd 100644
--- a/src/components/ActionArea.js
+++ b/src/components/ActionArea.js
@@ -13,7 +13,7 @@ export default class ActionArea extends React.Component {
             fontWeight: '600'
           }}
         >
-          {this.props.areaName}
+          {this.props.areaName ? 'Área ' + this.props.areaName : null}
         </div>
         <div
           style={{

From 797946a10ab6f64c86e4e90c84bc061e8b067751 Mon Sep 17 00:00:00 2001
From: OtacilioN <contato@otaciliomaia.com>
Date: Thu, 9 May 2019 11:48:03 -0300
Subject: [PATCH 2/2] Improve Area and Step components

---
 src/components/Area.js      | 15 +++++++++++++--
 src/components/StepBox.js   | 26 +++++++++++++++-----------
 src/components/StepsLine.js | 12 ++++++++----
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/Area.js b/src/components/Area.js
index 97b4c48..66b63ba 100644
--- a/src/components/Area.js
+++ b/src/components/Area.js
@@ -3,18 +3,29 @@ import Button from '@material-ui/core/Button';
 
 export default class Area extends React.Component {
   render() {
+    const { id, cLevel } = this.props.poda;
+
+    const getColorByCLevel = cLevel => {
+      if (cLevel === 'LOW') return '#56C577';
+      if (cLevel === 'MEDIUM') return '#FF9C50';
+      if (cLevel === 'HIGH') return '#FF6060';
+      return '#56C577';
+    };
+
     return (
       <Button
         style={{
           width: 80,
           height: 80,
-          backgroundColor: 'red',
           borderRadius: 20,
+          backgroundColor: getColorByCLevel(cLevel),
+          color: '#2A1725',
+          fontWeight: 'bold',
           margin: 16
         }}
         onClick={this.props.onPress}
       >
-        <div> </div>
+        <div> Área {id} </div>
       </Button>
     );
   }
diff --git a/src/components/StepBox.js b/src/components/StepBox.js
index 3820a08..ef9f6ef 100644
--- a/src/components/StepBox.js
+++ b/src/components/StepBox.js
@@ -2,12 +2,12 @@ import React from 'react';
 
 export default class StepsBox extends React.Component {
   render() {
-    const { cLevel, status, shouldIDisplay } = this.props;
+    const { cLevel, status, shouldIDisplay, stepName } = this.props;
     const getColorByCLevel = cLevel => {
-      if (cLevel === 'LOW') return 'green';
-      if (cLevel === 'MEDIUM') return 'yellow';
-      if (cLevel === 'HIGH') return 'red';
-      return 'lime';
+      if (cLevel === 'LOW') return '#56C577';
+      if (cLevel === 'MEDIUM') return '#FF9C50';
+      if (cLevel === 'HIGH') return '#FF6060';
+      return '#56C577';
     };
     const getStatusText = status => {
       if (status === 'DELAYED') return 'ATRASADO';
@@ -19,18 +19,22 @@ export default class StepsBox extends React.Component {
       <div
         style={{
           flex: 1,
-          height: 40,
-          marginLeft: 4,
-          marginRight: 4,
+          height: 50,
+          marginLeft: '4px',
+          marginRight: '4px',
           backgroundColor: shouldIDisplay ? getColorByCLevel(cLevel) : 'grey',
           alignItems: 'center',
           justifyContent: 'center',
-          color: 'white',
-          fontSize: 14,
+          color: '#2A1725',
+          fontWeight: 'bold',
+          fontSize: '0.5em',
+          paddingLeft: '2px',
+          paddingRight: '2px',
           display: 'flex'
         }}
       >
-        {shouldIDisplay ? getStatusText(status) : null}
+        {stepName}
+        {/* {shouldIDisplay ? getStatusText(status) : null} */}
       </div>
     );
   }
diff --git a/src/components/StepsLine.js b/src/components/StepsLine.js
index fc6ab22..0eab5a1 100644
--- a/src/components/StepsLine.js
+++ b/src/components/StepsLine.js
@@ -14,22 +14,26 @@ export default class StepsLine extends React.Component {
         }}
       >
         <StepBox
-          shouldIDisplay={step === 'GROWING'}
+          shouldIDisplay={step === 'NEXT_TO_CABLE'}
+          stepName="Crescimento"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'NEXT_TO_CABLE'}
+          shouldIDisplay={step === 'IN_INPECTION'}
+          stepName="Inspeção"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'IN_INPECTION'}
+          shouldIDisplay={step === 'CHECKED_TO_CUT'}
+          stepName="Poda"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'CHECKED_TO_CUT'}
+          shouldIDisplay={step === 'GROWING'}
+          stepName="Status da Área"
           cLevel={cLevel}
           status={status}
         />