aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 03:08:48 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 03:08:48 +0800
commitdc655fd903c5b35ea9280c5afd10b78b25fa7ca3 (patch)
tree6a333b0ad0b46bcd5adf8d608b52a8155c980201
parent82b6a81a223a75040054b4578a16f88be6271440 (diff)
downloaddexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.gz
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.bz2
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.lz
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.xz
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.tar.zst
dexon-sol-tools-dc655fd903c5b35ea9280c5afd10b78b25fa7ca3.zip
Better styling of estimated time
-rw-r--r--packages/instant/src/components/time_counter.tsx17
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>
);
}