filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-10 13:14:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

50GB explainer in datameter

Browse Source
This commit is contained in:
tarafanlin 2020-10-07 15:15:41 -07:00
parent a61723d81c
commit 9870bd7072
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/core/DataMeter.js
View File

@ -10,8 +10,7 @@ const MAX_IN_BYTES = 10737418240 * 4;
const STYLES_CONTAINER = css`
border-radius: 4px;
box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
0 0 40px 0 ${Constants.system.shadow};
box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset, 0 0 40px 0 ${Constants.system.shadow};
padding: 32px;
max-width: 100%;
width: 100%;
@ -75,16 +74,21 @@ const STYLES_TITLE = css`
overflow-wrap: break-word;
`;
const STYLES_NOTE = css`
font-family: ${Constants.font.text};
font-size: ${Constants.typescale.lvl0};
color: ${Constants.system.darkGray};
display: block;
margin-bottom: 4px;
`;
export const DataMeterBar = (props) => {
const percentage = props.bytes / props.maximumBytes;
return (
<React.Fragment>
<div css={STYLES_ROW}>
<div
css={STYLES_LEFT}
style={{ color: props.failed ? Constants.system.red : null }}
>
<div css={STYLES_LEFT} style={{ color: props.failed ? Constants.system.red : null }}>
{props.leftLabel}
</div>
<div css={STYLES_RIGHT}>{props.rightLabel}</div>
@ -97,10 +101,7 @@ export const DataMeterBar = (props) => {
backgroundColor: props.failed ? Constants.system.red : null,
}}
>
<div
css={STYLES_DATA_METER}
style={{ width: `${percentage * 100}%` }}
/>
<div css={STYLES_DATA_METER} style={{ width: `${percentage * 100}%` }} />
</div>
</React.Fragment>
);
@ -110,14 +111,12 @@ export const DataMeter = (props) => {
return (
<div css={STYLES_CONTAINER} style={props.style}>
<div css={STYLES_TITLE}>
{Strings.bytesToSize(props.stats.bytes)} of{" "}
{Strings.bytesToSize(props.stats.maximumBytes)} used
{Strings.bytesToSize(props.stats.bytes)} of {Strings.bytesToSize(props.stats.maximumBytes)}{" "}
used
</div>
<div css={STYLES_NOTE}>50GB coming soon with email verification</div>
<DataMeterBar
bytes={props.stats.bytes}
maximumBytes={props.stats.maximumBytes}
/>
<DataMeterBar bytes={props.stats.bytes} maximumBytes={props.stats.maximumBytes} />
</div>
);
};