From dc655fd903c5b35ea9280c5afd10b78b25fa7ca3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 12:08:48 -0700
Subject: Better styling of estimated time

---
 packages/instant/src/components/time_counter.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
index c98fd2550..22dc634d9 100644
--- a/packages/instant/src/components/time_counter.tsx
+++ b/packages/instant/src/components/time_counter.tsx
@@ -3,8 +3,10 @@ import * as React from 'react';
 import { ONE_SECOND_MS } from '../constants';
 import { timeUtil } from '../util/time';
 
+import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Text } from './ui/text';
+import { ColorOption } from '../style/theme';
 
 export interface TimeCounterProps {
     estimatedTimeMs: number;
@@ -38,8 +40,19 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
         const estimatedTimeSeconds = this.props.estimatedTimeMs / ONE_SECOND_MS;
         return (
             <Flex justify="space-between">
-                <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
-                <Text>Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)}</Text>
+                <Container>
+                    <Container marginRight="5px" display="inline">
+                        <Text fontWeight={600} fontColor={ColorOption.grey}>
+                            Est. Time
+                        </Text>
+                    </Container>
+                    <Text fontColor={ColorOption.grey}>
+                        ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})
+                    </Text>
+                </Container>
+                <Text fontColor={ColorOption.grey}>
+                    Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)}
+                </Text>
             </Flex>
         );
     }
-- 
cgit