From 13b41c976b42983f5869813715313c2da22abcbc Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 13:51:18 -0700
Subject: Placeholder for estimated time

---
 packages/instant/src/components/progress_bar.tsx          | 15 ++++++++++++++-
 .../src/containers/selected_asset_progress_bar.tsx        |  2 +-
 2 files changed, 15 insertions(+), 2 deletions(-)

(limited to 'packages/instant')

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
index 5b5968703..d5d1f3ded 100644
--- a/packages/instant/src/components/progress_bar.tsx
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -3,18 +3,31 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ProgressBarProps {
     percentageDone: number;
+    estTimeMs: number;
+    elapsedTimeMs: number;
 }
+
+// TODO: Est time to minutes with suffix
+// TODO: time in minutes
 export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
     <Container padding="20px 20px 0px 20px" width="100%">
+        <Container marginBottom="5px">
+            <Flex justify="space-between">
+                <Text>Est. Time ({props.estTimeMs / 1000} seconds)</Text>
+                <Text>{props.elapsedTimeMs / 1000}</Text>
+            </Flex>
+        </Container>
         <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
             <Container
                 width={`${props.percentageDone}%`}
                 backgroundColor={ColorOption.primaryColor}
                 borderRadius="6px"
-                height="10px"
+                height="6px"
             />
         </Container>
     </Container>
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
index 886e223d3..4564c790a 100644
--- a/packages/instant/src/containers/selected_asset_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx
@@ -20,7 +20,7 @@ export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAs
     const isOrderStateOk = true;
 
     if (isOrderStateOk && percentageDone) {
-        return <ProgressBar percentageDone={percentageDone} />;
+        return <ProgressBar percentageDone={percentageDone} estTimeMs={1000} elapsedTimeMs={2000} />;
     }
 
     return null;
-- 
cgit v1.2.3