Evo: more consistency in call to actions

opendatacam · Aug 27, 2018 · 43820f3 · 43820f3
1 parent f42e6de
commit 43820f3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/components/shared/BtnScreenshot.js b/components/shared/BtnScreenshot.js
@@ -9,7 +9,7 @@ class BtnScreenshot extends Component {
         onClick={() => this.props.onClick()}
       >
         <img src="/static/icons/icon-screenshot.svg" />
-        <h2>Save frame</h2>
+        <h2>Save Frame</h2>
         <style jsx>{`
           .btn-screenshot{
             position: relative;

diff --git a/components/shared/BtnStartCounting.js b/components/shared/BtnStartCounting.js
@@ -9,7 +9,7 @@ class BtnStartCounting extends Component {
         onClick={() => this.props.onClick()}
       >
         <img src="/static/icons/icon-start-recording.svg" />
-        <h2>Start tracking</h2>
+        <h2>Start Tracking</h2>
         <style jsx>{`
           .record{
             position: fixed;

diff --git a/components/shared/EndCountingCTA.js b/components/shared/EndCountingCTA.js
@@ -33,45 +33,50 @@ class EndCountingCTA extends Component {
     return (
       <React.Fragment>
         <div className="exportCountContainer">
-          {/* <div 
-            className="button export"
-            onClick={() => this.getTrackerData()}
-          >
-            <h2>Get tracker data</h2>
-          </div>
-          <div 
-            className="button export"
-            onClick={() => this.getCounterData()}
-          >
-            <h2>Get counting data</h2>
-          </div> */}
-          <BtnDownload 
-            label="Tracker data"
-            onClick={() => this.getTrackerData()}
-          />
-          <div className="separator"></div>
-          <BtnDownload 
-            iconNotepad
-            label="Counting data"
-            onClick={() => this.getCounterData()}
-          />
-          <div className="separator"></div>
           {this.props.pathVisualizationSelected &&
-            <BtnScreenshot onClick={() => this.exportPathVisualizationFrame()} />
+            <React.Fragment>
+              <div className="separator"></div>
+              <BtnDownload 
+                label="Tracker Data"
+                onClick={() => this.getTrackerData()}
+              />
+            </React.Fragment>
           }
-          <div className="separator"></div>
-          {this.props.isCounting &&
-            <BtnCounting 
-              label="Stop tracking"
-              iconStop
-              onClick={() => this.props.dispatch(stopCounting())}
+          {!this.props.pathVisualizationSelected &&
+            <React.Fragment>
+            <div className="separator"></div>
+            <BtnDownload 
+              label="Counting Data"
+              onClick={() => this.getCounterData()}
             />
+            </React.Fragment>
+          }
+          {this.props.pathVisualizationSelected &&
+            <React.Fragment>
+              <div className="separator"></div>
+              <BtnScreenshot onClick={() => this.exportPathVisualizationFrame()} />
+            </React.Fragment>
+          }
+
+          {this.props.isCounting &&
+            <React.Fragment>
+              <div className="separator"></div>
+              <BtnCounting 
+                label="Stop Tracking"
+                iconStop
+                onClick={() => this.props.dispatch(stopCounting())}
+              />
+            </React.Fragment>
+
           }
           {!this.props.isCounting &&
-            <BtnCounting 
-              label="New tracking"
-              onClick={() => this.props.dispatch(hideCountingData())}
-            />
+            <React.Fragment>
+              <div className="separator"></div>
+              <BtnCounting 
+                label="New Tracking"
+                onClick={() => this.props.dispatch(hideCountingData())}
+              />
+            </React.Fragment>
           }
         </div>
         <style jsx>{`