diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-02 03:08:48 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-02 03:08:48 +0800 |
commit | dc655fd903c5b35ea9280c5afd10b78b25fa7ca3 (patch) | |
tree | 6a333b0ad0b46bcd5adf8d608b52a8155c980201 /packages/instant/src/components/time_counter.tsx | |
parent | 82b6a81a223a75040054b4578a16f88be6271440 (diff) | |
download | dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.gz dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.bz2 dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.lz dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.xz dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.zst dexon-0x-contracts-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.zip |
Better styling of estimated time
Diffstat (limited to 'packages/instant/src/components/time_counter.tsx')
-rw-r--r-- | packages/instant/src/components/time_counter.tsx | 17 |
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> ); } |