diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 04:34:47 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 04:34:47 +0800 |
commit | bcb633e5cbcbfdfdfe8c91170abfca7dbb003417 (patch) | |
tree | 9a0b64146a8376a07b8a896e9fb63fa113720bfe | |
parent | 05b74ba1c8b10c356d396ce9a4834d053cd791b1 (diff) | |
download | dexon-sol-tools-bcb633e5cbcbfdfdfe8c91170abfca7dbb003417.tar.gz dexon-sol-tools-bcb633e5cbcbfdfdfe8c91170abfca7dbb003417.tar.zst dexon-sol-tools-bcb633e5cbcbfdfdfe8c91170abfca7dbb003417.zip |
Making prettier
-rw-r--r-- | packages/instant/src/components/progress_bar.tsx | 12 |
1 files changed, 8 insertions, 4 deletions
diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx index b89c56ed5..5b5968703 100644 --- a/packages/instant/src/components/progress_bar.tsx +++ b/packages/instant/src/components/progress_bar.tsx @@ -3,15 +3,19 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Container } from './ui/container'; -import { Text } from './ui/text'; export interface ProgressBarProps { percentageDone: number; } export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => ( - <Container width="100%" backgroundColor={ColorOption.white}> - <Container width={`${props.percentageDone}%`} backgroundColor={ColorOption.black}> - <Text fontColor={ColorOption.white}>{props.percentageDone}%</Text> + <Container padding="20px 20px 0px 20px" width="100%"> + <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px"> + <Container + width={`${props.percentageDone}%`} + backgroundColor={ColorOption.primaryColor} + borderRadius="6px" + height="10px" + /> </Container> </Container> ); |