Better styling of estimated time

1 files changed, 15 insertions, 2 deletions

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>
         );
     }