filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 01:23:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

fonts: adds sans-serif fall backs in case component library is used elsewhere

Browse Source
This commit is contained in:
@wwwjim 2020-07-02 01:24:14 -07:00
parent 6354546d60
commit 9db2b4c084
36 changed files with 350 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
common/constants.js
View File

@ -12,7 +12,11 @@ export const zindex = {
};
export const font = {
text: "inter-regular",
text: `'inter-regular', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
semiBold: `'inter-semi-bold', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
medium: `'inter-medium', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
mono: `'mono', monaco, monospace`,
monoBold: `'mono-bold', monaco, monospace`,
};
export const typescale = {

2
common/styles/global.js
View File

@ -195,7 +195,7 @@ export const injectGlobalStyles = () => css`
background: ${Constants.system.foreground};
color: ${Constants.system.black};
font-size: 16px;
font-family: 'inter-regular', -apple-system, BlinkMacSystemFont, arial, sans-serif;
font-family: ${Constants.font.text};
scrollbar-width: none;
-ms-overflow-style: -ms-autohiding-scrollbar;

6
components/core/ApplicationNavigation.js
View File

@ -58,7 +58,7 @@ const STYLES_CHILDREN = css`
height: 100%;
overflow-wrap: break-word;
padding: 11px 0px 14px 8px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
font-size: 14px;
line-height: 1.225;
@ -140,7 +140,7 @@ const Item = ({
css={STYLES_CHILDREN}
onClick={() => onNavigateTo({ id }, data)}
style={{
fontFamily: decorator === "FILE" ? "inter-regular" : null,
fontFamily: decorator === "FILE" ? Constants.font.text : null,
color: activeIds[id] ? Constants.system.brand : null,
}}
>
@ -153,7 +153,7 @@ const Item = ({
const STYLES_SMALL_LINK = css`
padding: 0 16px 0 16px;
font-size: 14px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
margin-top: 11px;
color: #666;
transition: 200ms ease all;

4
components/core/Section.js
View File

@ -19,7 +19,7 @@ const STYLES_SECTION = css`
const STYLES_HEADER = css`
background: ${Constants.system.foreground};
border-bottom: 1px solid ${Constants.system.border};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
font-size: ${Constants.typescale.lvl1};
border-radius: 4px 4px 0 0;
padding: 24px;
@ -54,7 +54,7 @@ const STYLES_BUTTON = css`
justify-content: center;
font-size: 12px;
letter-spacing: 0.2px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
box-shadow: 0 0 0 1px ${Constants.system.border},
0 1px 4px rgba(0, 0, 0, 0.07);

2
components/sidebars/SidebarAddMiner.js
View File

@ -24,7 +24,7 @@ export default class SidebarAddMiner extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Add a miner
</System.P>
</React.Fragment>

2
components/sidebars/SidebarAddPeer.js
View File

@ -24,7 +24,7 @@ export default class SidebarAddPeer extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Add a peer
</System.P>
</React.Fragment>

6
components/sidebars/SidebarCreatePaymentChannel.js
View File

@ -8,12 +8,12 @@ import { css } from "@emotion/react";
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -54,7 +54,7 @@ export default class SidebarCreatePaymentChannel extends React.Component {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Create a payment channel
</System.P>

2
components/sidebars/SidebarCreateWalletAddress.js
View File

@ -52,7 +52,7 @@ export default class SidebarCreateWalletAddress extends React.Component {
render() {
return (
<div>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Create a new address
</System.P>

2
components/sidebars/SidebarDeleteWalletAddress.js
View File

@ -23,7 +23,7 @@ export default class SidebarDeleteWalletAddress extends React.Component {
render() {
return (
<div>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Are you sure you want to delete the selected wallet?
</System.P>

2
components/sidebars/SidebarFileRetrievalDeal.js
View File

@ -24,7 +24,7 @@ export default class SidebarFileRetrievalDeal extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Retrieve file
</System.P>
</React.Fragment>

80
components/sidebars/SidebarFileStorageDeal.js
View File

@ -1,10 +1,10 @@
import * as React from 'react';
import * as Strings from '~/common/strings';
import * as Constants from '~/common/constants';
import * as SVG from '~/components/system/svg';
import * as System from '~/components/system';
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as System from "~/components/system";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_FILE_HIDDEN = css`
height: 1px;
@ -18,12 +18,12 @@ const STYLES_FILE_HIDDEN = css`
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: 'inter-medium';
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -44,23 +44,25 @@ const STYLES_IMAGE_PREVIEW = css`
`;
const SELECT_MENU_OPTIONS = [
{ value: '1', name: 'Anywhere' },
{ value: '2', name: 'China' },
{ value: '3', name: 'Russia' },
{ value: '4', name: 'USA' },
{ value: "1", name: "Anywhere" },
{ value: "2", name: "China" },
{ value: "3", name: "Russia" },
{ value: "4", name: "USA" },
];
const SELECT_MENU_MAP = {
'1': 'Anywhere',
'2': 'China',
'3': 'Russia',
'4': 'USA',
"1": "Anywhere",
"2": "China",
"3": "Russia",
"4": "USA",
};
export default class SidebarFileStorageDeal extends React.Component {
state = {
settings_cold_default_duration: this.props.viewer.settings_cold_default_duration,
settings_cold_default_replication_factor: this.props.viewer.settings_cold_default_replication_factor,
settings_cold_default_duration: this.props.viewer
.settings_cold_default_duration,
settings_cold_default_replication_factor: this.props.viewer
.settings_cold_default_replication_factor,
};
_handleUpload = async (e) => {
@ -68,7 +70,7 @@ export default class SidebarFileStorageDeal extends React.Component {
let file = e.target.files[0];
if (!file) {
alert('Something went wrong');
alert("Something went wrong");
return;
}
@ -77,16 +79,16 @@ export default class SidebarFileStorageDeal extends React.Component {
_handleMakeDeal = async (src) => {
const options = {
method: 'POST',
credentials: 'include',
method: "POST",
credentials: "include",
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ src }),
};
const response = await fetch('/_/deals/storage', options);
const response = await fetch("/_/deals/storage", options);
const json = await response.json();
return json;
};
@ -123,12 +125,22 @@ export default class SidebarFileStorageDeal extends React.Component {
return (
<React.Fragment>
<System.P style={{ fontFamily: 'inter-semi-bold' }}>Upload a file to the network</System.P>
<input css={STYLES_FILE_HIDDEN} type="file" id="file" onChange={this._handleUpload} />
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Upload a file to the network
</System.P>
<input
css={STYLES_FILE_HIDDEN}
type="file"
id="file"
onChange={this._handleUpload}
/>
{this.props.file ? (
<div>
<img src={`/static/files/${this.props.file.name}`} css={STYLES_IMAGE_PREVIEW} />
<img
src={`/static/files/${this.props.file.name}`}
css={STYLES_IMAGE_PREVIEW}
/>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>{this.props.file.name}</div>
@ -142,7 +154,11 @@ export default class SidebarFileStorageDeal extends React.Component {
</div>
) : null}
<System.ButtonSecondaryFull type="label" htmlFor="file" style={{ marginTop: 24 }}>
<System.ButtonSecondaryFull
type="label"
htmlFor="file"
style={{ marginTop: 24 }}
>
Add file
</System.ButtonSecondaryFull>
@ -176,13 +192,17 @@ export default class SidebarFileStorageDeal extends React.Component {
value={this.props.selected.address}
category="address"
onChange={this.props.onSelectedChange}
options={this.props.viewer.addresses}>
options={this.props.viewer.addresses}
>
{currentAddress.name}
</System.SelectMenuFull>
) : null}
{this.props.file ? (
<System.ButtonPrimaryFull style={{ marginTop: 48 }} onClick={this._handleSubmit}>
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Make storage deal
</System.ButtonPrimaryFull>
) : null}

2
components/sidebars/SidebarNotifications.js
View File

@ -37,7 +37,7 @@ export default class SidebarNotifications extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Notifications
</System.P>
{this.props.viewer.notifications.map((n) => {

2
components/sidebars/SidebarRedeemPaymentChannel.js
View File

@ -24,7 +24,7 @@ export default class SidebarRedeemPaymentChannel extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Redeem Payment Channel
</System.P>
</React.Fragment>

6
components/sidebars/SidebarWalletSendFunds.js
View File

@ -7,12 +7,12 @@ import { css } from "@emotion/react";
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -81,7 +81,7 @@ export default class SidebarWalletSendFunds extends React.Component {
return (
<React.Fragment>
<System.P style={{ fontFamily: "inter-semi-bold" }}>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Send Filecoin
</System.P>

8
components/system/Group.js
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_GROUP_CONTAINER = css`
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
@ -13,7 +13,7 @@ const STYLES_TITLE = css`
font-size: ${Constants.typescale.lvl2};
width: 100%;
margin-top: 8px;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
`;
const STYLES_HEADER = css`

6
components/system/SystemPage.js
View File

@ -57,7 +57,7 @@ const STYLES_SIDEBAR = css`
`;
const STYLES_LINK = css`
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
color: ${Constants.system.pitchBlack};
text-decoration: none;
font-weight: 400;
@ -70,7 +70,7 @@ const STYLES_LINK = css`
`;
const STYLES_LINK_ACTIVE = css`
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
color: ${Constants.system.brand};
text-decoration: none;
font-weight: 400;
@ -86,7 +86,7 @@ const STYLES_DESCRIPTION = css`
`;
const STYLES_LABEL = css`
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
display: block;
font-size: 11px;
text-transform: uppercase;

17
components/system/ViewSourceLink.js
View File

@ -1,12 +1,12 @@
import { css } from '@emotion/react';
import { css } from "@emotion/react";
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as SVG from '~/common/svg';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
const STYLES_VIEW_SOURCE_LINK = css`
font-size: 14px;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
display: inline-block;
transition: 200ms ease all;
cursor: pointer;
@ -26,8 +26,11 @@ export default class ViewSourceLink extends React.Component {
return (
<a
css={STYLES_VIEW_SOURCE_LINK}
href={`https://github.com/filecoin-project/slate/blob/main/pages/${this.props.file}`}
target="_blank">
href={`https://github.com/filecoin-project/slate/blob/main/pages/${
this.props.file
}`}
target="_blank"
>
<SVG.ExpandBox height="12px" style={{ marginRight: 2 }} /> View Source
</a>
);

18
components/system/components/Buttons.js
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_BUTTON = `
border-radius: 4px;
@ -14,7 +14,7 @@ const STYLES_BUTTON = `
justify-content: center;
font-size: 12px;
letter-spacing: 0.2px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
`;
@ -30,7 +30,7 @@ const STYLES_BUTTON_FULL = `
justify-content: center;
font-size: 12px;
letter-spacing: 0.2px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
`;
@ -54,7 +54,7 @@ const STYLES_BUTTON_PRIMARY = css`
`;
export const ButtonPrimary = (props) => {
if (props.type === 'label') {
if (props.type === "label") {
return <label css={STYLES_BUTTON_PRIMARY} {...props} />;
}
@ -81,7 +81,7 @@ const STYLES_BUTTON_PRIMARY_FULL = css`
`;
export const ButtonPrimaryFull = (props) => {
if (props.type === 'label') {
if (props.type === "label") {
return <label css={STYLES_BUTTON_PRIMARY_FULL} {...props} />;
}
@ -108,7 +108,7 @@ const STYLES_BUTTON_SECONDARY = css`
`;
export const ButtonSecondary = (props) => {
if (props.type === 'label') {
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
}
@ -135,7 +135,7 @@ const STYLES_BUTTON_SECONDARY_FULL = css`
`;
export const ButtonSecondaryFull = (props) => {
if (props.type === 'label') {
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY_FULL} {...props} />;
}

28
components/system/components/CardTabGroup.js
View File

@ -1,27 +1,28 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const TAB_GROUP_SIZE_MAP = {
1: '100%',
2: '50%',
3: '33.33%',
4: '25%',
1: "100%",
2: "50%",
3: "33.33%",
4: "25%",
};
const STYLES_CARD_TAB_GROUP = css`
width: 100%;
display: flex;
align-items: flex-start;
box-shadow: 0 -1px 0 0 ${Constants.system.border}, 0 1px 0 0 ${Constants.system.border};
box-shadow: 0 -1px 0 0 ${Constants.system.border},
0 1px 0 0 ${Constants.system.border};
`;
const STYLES_CARD_TAB_GROUP_TAB = css`
background: #fdfdfd;
color: rgba(0, 0, 0, 0.4);
font-size: 14px;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
height: 48px;
display: inline-flex;
align-items: center;
@ -59,11 +60,14 @@ export class CardTabGroup extends React.Component {
style={{
color: selected ? Constants.system.brand : null,
backgroundColor: selected ? Constants.system.white : null,
borderBottom: selected ? `2px solid ${Constants.system.brand}` : null,
borderBottom: selected
? `2px solid ${Constants.system.brand}`
: null,
width: TAB_GROUP_SIZE_MAP[this.props.options.length],
cursor: !selected ? 'pointer' : null,
cursor: !selected ? "pointer" : null,
}}
onClick={() => this._handleChange(tab.value)}>
onClick={() => this._handleChange(tab.value)}
>
{tab.label}
</div>
);

14
components/system/components/CheckBox.js
View File

@ -1,8 +1,8 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as SVG from '~/components/system/svg';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_CHECKBOX = css`
display: flex;
@ -44,7 +44,7 @@ const STYLES_CHECKBOX_LABEL = css`
overflow-wrap: break-word;
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -59,7 +59,9 @@ export class CheckBox extends React.Component {
render() {
return (
<label css={STYLES_CHECKBOX} style={this.props.style}>
<figure css={STYLES_CHECKBOX_FIGURE}>{this.props.value ? <SVG.CheckBox height="20px" /> : null}</figure>
<figure css={STYLES_CHECKBOX_FIGURE}>
{this.props.value ? <SVG.CheckBox height="20px" /> : null}
</figure>
<input
css={STYLES_CHECKBOX_INPUT}
name={this.props.name}

10
components/system/components/CodeTextarea.js
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
import TextareaAutoSize from '~/vendor/react-textarea-autosize';
import TextareaAutoSize from "~/vendor/react-textarea-autosize";
const STYLES_CODE_TEXTAREA = css`
font-family: 'mono';
font-family: ${Constants.font.mono};
display: block;
max-width: 480px;
border-radius: 4px;

15
components/system/components/RadioGroup.js
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_RADIO = css`
display: flex;
@ -64,7 +64,7 @@ const STYLES_RADIO_LABEL = css`
overflow-wrap: break-word;
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -85,7 +85,10 @@ export class RadioGroup extends React.Component {
return (
<label css={STYLES_RADIO} key={`radio-${radio.value}`}>
<span css={STYLES_RADIO_CUSTOM}>
<span css={STYLES_RADIO_CUSTOM_SELECTED} style={{ opacity: checked ? 1 : 0 }} />
<span
css={STYLES_RADIO_CUSTOM_SELECTED}
style={{ opacity: checked ? 1 : 0 }}
/>
</span>
<input
css={STYLES_RADIO_INPUT}
@ -93,7 +96,7 @@ export class RadioGroup extends React.Component {
value={radio.value}
checked={checked}
onChange={() => this._handleChange(radio.value)}
/>{' '}
/>{" "}
<span css={STYLES_RADIO_LABEL}>{radio.label}</span>
</label>
);

16
components/system/components/Stat.js
View File

@ -1,13 +1,13 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as SVG from '~/components/system/svg';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_BANDWIDTH = css`
padding: 8px 8px 8px 8px;
display: inline-flex;
font-family: 'mono';
font-family: ${Constants.font.mono};
font-size: 12px;
letter-spacing: 0.2px;
align-items: center;
@ -17,7 +17,8 @@ const STYLES_BANDWIDTH = css`
export const StatUpload = (props) => {
return (
<div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} /> {props.children}
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
</div>
);
};
@ -25,7 +26,8 @@ export const StatUpload = (props) => {
export const StatDownload = (props) => {
return (
<div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} /> {props.children}
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
</div>
);
};

22
components/system/components/StatCard.js
View File

@ -1,10 +1,10 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as Strings from '~/common/strings';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import { css } from '@emotion/react';
import { LineChart } from '~/vendor/react-chartkick';
import 'chart.js';
import { css } from "@emotion/react";
import { LineChart } from "~/vendor/react-chartkick";
import "chart.js";
const STYLES_STAT_CARD = css`
width: 100%;
@ -35,7 +35,7 @@ const STYLES_STAT_CARD_VALUE_GROUP = css`
`;
const STYLES_STAT_CARD_VALUE = css`
font-family: 'inter-medium';
font-family: ${Constants.font.medium};
font-size: ${Constants.typescale.lvl3};
color: ${Constants.system.brand};
display: block;
@ -43,7 +43,7 @@ const STYLES_STAT_CARD_VALUE = css`
const STYLES_STAT_CARD_DENOMINATION = css`
display: block;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-size: 10px;
letter-spacing: 0.1px;
margin: 4px 0 16px 0;
@ -56,12 +56,14 @@ export const StatCard = (props) => {
<div css={STYLES_STAT_CARD}>
<div css={STYLES_STAT_CARD_TOP}>
<div css={STYLES_STAT_CARD_VALUE_GROUP}>
<span css={STYLES_STAT_CARD_VALUE}>{Strings.formatNumber(props.value)}</span>{' '}
<span css={STYLES_STAT_CARD_VALUE}>
{Strings.formatNumber(props.value)}
</span>{" "}
<span css={STYLES_STAT_CARD_DENOMINATION}>{props.denomination}</span>
<LineChart
data={props.data}
library={{
backgroundColor: 'transparent',
backgroundColor: "transparent",
scales: {
yAxes: [
{

21
components/system/components/TabGroup.js
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_TAB_GROUP = css`
width: 100%;
@ -18,7 +18,7 @@ const STYLES_TAB_GROUP_TAB = css`
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
user-select: none;
@ -28,10 +28,10 @@ const STYLES_TAB_GROUP_TAB = css`
`;
const TAB_GROUP_SIZE_MAP = {
1: '100%',
2: '50%',
3: '33.33%',
4: '25%',
1: "100%",
2: "50%",
3: "33.33%",
4: "25%",
};
export class TabGroup extends React.Component {
@ -54,10 +54,11 @@ export class TabGroup extends React.Component {
style={{
backgroundColor: selected ? Constants.system.white : null,
width: TAB_GROUP_SIZE_MAP[this.props.options.length],
cursor: !selected ? 'pointer' : null,
cursor: !selected ? "pointer" : null,
borderBottom: !selected ? `1px solid #D7D7D7` : null,
}}
onClick={() => this._handleChange(tab.value)}>
onClick={() => this._handleChange(tab.value)}
>
{tab.label}
</div>
);

57
components/system/components/Table.js
View File

@ -1,20 +1,20 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as Strings from '~/common/strings';
import * as SubSystem from '~/components/system/components/fragments/TableComponents';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import * as SubSystem from "~/components/system/components/fragments/TableComponents";
import { css } from '@emotion/react';
import { P } from '~/components/system/components/Typography';
import { css } from "@emotion/react";
import { P } from "~/components/system/components/Typography";
const TABLE_COLUMN_WIDTH_DEFAULTS = {
1: '100%',
2: '50%',
3: '33.333%',
4: '25%',
5: '20%',
6: '16.666%',
7: '14.28%',
8: '12.5%',
1: "100%",
2: "50%",
3: "33.333%",
4: "25%",
5: "20%",
6: "16.666%",
7: "14.28%",
8: "12.5%",
};
const STYLES_TABLE_PLACEHOLDER = css`
@ -43,7 +43,7 @@ const STYLES_TABLE_SELECTED_ROW = css`
`;
const STYLES_TABLE_TOP_ROW = css`
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
width: 100%;
padding: 0 8px 0 8px;
border-bottom: 1px solid ${Constants.system.gray};
@ -53,8 +53,8 @@ const STYLES_TABLE_TOP_ROW = css`
export class Table extends React.Component {
static defaultProps = {
onNavigateTo: () => console.log('No navigation function set'),
onAction: () => console.log('No action function set'),
onNavigateTo: () => console.log("No navigation function set"),
onAction: () => console.log("No action function set"),
};
_handleChange = (value) => {
@ -79,7 +79,7 @@ export class Table extends React.Component {
ac[data.columns[x].key] = {
...data.columns[x],
index: x,
color: x % 2 !== 0 ? 'rgba(0, 0, 0, 0.01)' : null,
color: x % 2 !== 0 ? "rgba(0, 0, 0, 0.01)" : null,
};
}
@ -89,11 +89,15 @@ export class Table extends React.Component {
<React.Fragment>
<div css={STYLES_TABLE_TOP_ROW}>
{data.columns.map((c, cIndex) => {
const text = c.hideLabel ? '' : Strings.isEmpty(c.name) ? c.key : c.name;
const text = c.hideLabel
? ""
: Strings.isEmpty(c.name)
? c.key
: c.name;
let localWidth = c.width ? c.width : width;
let flexShrink = c.width && c.width !== '100%' ? '0' : null;
let flexShrink = c.width && c.width !== "100%" ? "0" : null;
if (cIndex === 0 && !c.width) {
localWidth = '100%';
localWidth = "100%";
}
return (
@ -105,7 +109,8 @@ export class Table extends React.Component {
backgroundColor: ac[c.key].color,
flexShrink,
}}
tooltip={c.tooltip}>
tooltip={c.tooltip}
>
{text}
</SubSystem.TableColumn>
);
@ -123,9 +128,10 @@ export class Table extends React.Component {
const text = r[each];
let localWidth = field.width ? field.width : width;
let flexShrink = field.width && field.width !== '100%' ? '0' : null;
let flexShrink =
field.width && field.width !== "100%" ? "0" : null;
if (cIndex === 0 && !field.width) {
localWidth = '100%';
localWidth = "100%";
}
return (
@ -136,7 +142,8 @@ export class Table extends React.Component {
backgroundColor: field.color,
flexShrink,
}}
copyable={field.copyable}>
copyable={field.copyable}
>
<SubSystem.TableContent
data={r}
text={text}

16
components/system/components/Typography.js
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
const STYLES_H1 = css`
font-size: ${Constants.typescale.lvl4};
line-height: 1.1;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
color: inherit;
text-decoration: none;
@ -21,7 +21,7 @@ const STYLES_H1 = css`
}
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -37,7 +37,7 @@ export const H1 = (props) => {
const STYLES_H2 = css`
font-size: ${Constants.typescale.lvl3};
line-height: 1.1;
font-family: 'inter-medium';
font-family: ${Constants.font.medium};
font-weight: 400;
color: inherit;
@ -53,7 +53,7 @@ const STYLES_H2 = css`
}
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -71,7 +71,7 @@ const STYLES_P = css`
line-height: 1.5;
strong {
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;

26
components/system/components/fragments/DescriptionGroup.js
View File

@ -1,13 +1,13 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as Strings from '~/common/strings';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import { css } from '@emotion/react';
import { css } from "@emotion/react";
import { TooltipAnchor } from '~/components/system/components/fragments/TooltipAnchor';
import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
const STYLES_DESCRIPTION_GROUP_LABEL = css`
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
font-size: 14px;
padding: 0 0 0 0;
margin-bottom: 8px;
@ -24,12 +24,20 @@ export const DescriptionGroup = (props) => {
<div style={props.style}>
{!Strings.isEmpty(props.label) ? (
<div css={STYLES_DESCRIPTION_GROUP_LABEL}>
{props.label}{' '}
{props.tooltip ? <TooltipAnchor tooltip={props.tooltip} height="14px" style={{ paddingTop: 16 }} /> : null}
{props.label}{" "}
{props.tooltip ? (
<TooltipAnchor
tooltip={props.tooltip}
height="14px"
style={{ paddingTop: 16 }}
/>
) : null}
</div>
) : null}
{!Strings.isEmpty(props.description) ? (
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>{props.description}</div>
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>
{props.description}
</div>
) : null}
</div>
);

177
components/system/components/fragments/TableComponents.js
View File

@ -1,32 +1,32 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as SVG from '~/components/system/svg';
import * as OldSVG from '~/common/svg';
import * as Strings from '~/common/strings';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as OldSVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { css } from '@emotion/react';
import { Tooltip } from 'react-tippy';
import { css } from "@emotion/react";
import { Tooltip } from "react-tippy";
import Avatar from '~/components/core/Avatar';
import Avatar from "~/components/core/Avatar";
const STORAGE_DEAL_STATES = {
'0': 'Local file only.',
'1': 'Searching for miners.',
'2': 'Proposing storage deal.',
'3': 'Accepted by miners.',
'4': 'Data transfer in progress.',
'5': 'Data transfer complete.',
'6': 'Stored on network.',
"0": "Local file only.",
"1": "Searching for miners.",
"2": "Proposing storage deal.",
"3": "Accepted by miners.",
"4": "Data transfer in progress.",
"5": "Data transfer complete.",
"6": "Stored on network.",
};
const RETRIEVAL_DEAL_STATES = {
'0': 'Local file',
'1': 'Available on network',
'2': 'Retrieval deal proposed.',
'3': 'Retrieval deal accepted.',
'4': 'Data transfer in progress.',
'5': 'Data transfer completed.',
'6': 'Retrieved from network.',
"0": "Local file",
"1": "Available on network",
"2": "Retrieval deal proposed.",
"3": "Retrieval deal accepted.",
"4": "Data transfer in progress.",
"5": "Data transfer completed.",
"6": "Retrieved from network.",
};
const COMPONENTS_ICON = {
@ -36,7 +36,7 @@ const COMPONENTS_ICON = {
const STYLES_TABLE_TAG = css`
font-weight: 400;
font-family: 'inter-semi-bold';
font-family: ${Constants.font.semiBold};
letter-spacing: 0.2px;
padding: 4px 6px 4px 6px;
font-size: 10px;
@ -48,18 +48,21 @@ const STYLES_TABLE_TAG = css`
`;
const COMPONENTS_TRANSACTION_DIRECTION = {
'1': (
"1": (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}>
+ incoming
</span>
),
'2': <span css={STYLES_TABLE_TAG}>- outgoing</span>,
"2": <span css={STYLES_TABLE_TAG}>- outgoing</span>,
};
const COMPONENTS_TRANSACTION_STATUS = {
'1': <span css={STYLES_TABLE_TAG}>complete</span>,
'2': (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.yellow }}>
"1": <span css={STYLES_TABLE_TAG}>complete</span>,
"2": (
<span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.yellow }}
>
pending
</span>
),
@ -114,7 +117,7 @@ const STYLES_CONTENT_BUTTON = css`
`;
const STYLES_TABLE_CONTENT_LINK = css`
font-family: 'inter-medium';
font-family: ${Constants.font.medium};
text-decoration: underline;
cursor: pointer;
@ -139,7 +142,10 @@ export const TableColumn = (props) => {
) : null;
return (
<span css={props.top ? STYLES_TOP_COLUMN : STYLES_COLUMN} style={props.style}>
<span
css={props.top ? STYLES_TOP_COLUMN : STYLES_COLUMN}
style={props.style}
>
<span css={STYLES_CONTENT}>{props.children}</span>
{tooltipElement}
{copyableElement}
@ -147,7 +153,14 @@ export const TableColumn = (props) => {
);
};
export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAction }) => {
export const TableContent = ({
type,
text,
action,
data = {},
onNavigateTo,
onAction,
}) => {
const { status, online } = data;
if (text === null || text === undefined) {
@ -155,67 +168,83 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
}
switch (type) {
case 'DEAL_CATEGORY':
return <React.Fragment>{text == 1 ? 'Storage' : 'Retrieval'}</React.Fragment>;
case 'LOCATION':
return 'United States';
case 'BUTTON':
case "DEAL_CATEGORY":
return (
<span css={STYLES_TABLE_CONTENT_LINK} onClick={() => onAction({ type: 'SIDEBAR', value: action })}>
<React.Fragment>{text == 1 ? "Storage" : "Retrieval"}</React.Fragment>
);
case "LOCATION":
return "United States";
case "BUTTON":
return (
<span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onAction({ type: "SIDEBAR", value: action })}
>
{text}
</span>
);
case 'TRANSACTION_DIRECTION':
case "TRANSACTION_DIRECTION":
return COMPONENTS_TRANSACTION_DIRECTION[text];
case 'TRANSACTION_STATUS':
case "TRANSACTION_STATUS":
return COMPONENTS_TRANSACTION_STATUS[text];
case 'ICON':
case "ICON":
return COMPONENTS_ICON[text];
case 'AVATAR':
case "AVATAR":
return <Avatar url={text} size={40} online={online} />;
case 'DEAL_STATUS_RETRIEVAL':
case "DEAL_STATUS_RETRIEVAL":
return RETRIEVAL_DEAL_STATES[`${text}`];
case 'DEAL_STATUS':
return data['deal_category'] === 1 ? STORAGE_DEAL_STATES[`${text}`] : RETRIEVAL_DEAL_STATES[`${text}`];
case 'BANDWIDTH_UPLOAD':
case "DEAL_STATUS":
return data["deal_category"] === 1
? STORAGE_DEAL_STATES[`${text}`]
: RETRIEVAL_DEAL_STATES[`${text}`];
case "BANDWIDTH_UPLOAD":
return (
<React.Fragment>
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />
{Strings.bytesToSize(text)}
</React.Fragment>
);
case 'BANDWIDTH_DOWNLOAD':
case "BANDWIDTH_DOWNLOAD":
return (
<React.Fragment>
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />
{Strings.bytesToSize(text)}
</React.Fragment>
);
case 'MINER_AVAILABILITY':
case "MINER_AVAILABILITY":
return text == 1 ? (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}>
<span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.green }}
>
Online
</span>
) : null;
case 'DEAL_AUTO_RENEW':
case "DEAL_AUTO_RENEW":
return text == 1 ? (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.brand }}>
<span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.brand }}
>
true
</span>
) : (
<span css={STYLES_TABLE_TAG}>false</span>
);
case 'NOTIFICATION_ERROR':
case "NOTIFICATION_ERROR":
return (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.red }}>
{text} {Strings.pluralize('error', text)}
<span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.red }}
>
{text} {Strings.pluralize("error", text)}
</span>
);
case 'FILE_DATE':
case "FILE_DATE":
return Strings.toDate(text);
case 'FILE_SIZE':
case "FILE_SIZE":
return Strings.bytesToSize(text, 2);
case 'FILE_LINK':
case "FILE_LINK":
// NOTE(jim): Special case to prevent navigation.
if (!data) {
return text;
@ -226,23 +255,27 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
return (
<span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onAction({ type: 'NAVIGATE', value: data.folderId, data })}>
onClick={() =>
onAction({ type: "NAVIGATE", value: data.folderId, data })
}
>
{text}
</span>
);
}
// NOTE(jim): Special case for navigating to a sidebar.
if (data && data['retrieval_status'] === 1) {
if (data && data["retrieval_status"] === 1) {
return (
<span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() =>
onAction({
type: 'SIDEBAR',
value: 'SIDEBAR_FILE_STORAGE_DEAL',
type: "SIDEBAR",
value: "SIDEBAR_FILE_STORAGE_DEAL",
})
}>
}
>
{text}
</span>
);
@ -251,20 +284,21 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
// NOTE(jim): Special case to prevent navigation.
if (
data &&
(data['retrieval_status'] === 5 ||
data['retrieval_status'] === 4 ||
data['retrieval_status'] === 3 ||
data['retrieval_status'] === 2)
(data["retrieval_status"] === 5 ||
data["retrieval_status"] === 4 ||
data["retrieval_status"] === 3 ||
data["retrieval_status"] === 2)
) {
return (
<span
onClick={() =>
onAction({
name: 'File does not exist',
type: 'ACTION',
value: 'ACTION_FILE_MISSING',
name: "File does not exist",
type: "ACTION",
value: "ACTION_FILE_MISSING",
})
}>
}
>
{text}
</span>
);
@ -272,7 +306,10 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
// NOTE(jim): Navigates to file.
return (
<span css={STYLES_TABLE_CONTENT_LINK} onClick={() => onNavigateTo({ id: 15 }, data)}>
<span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onNavigateTo({ id: 15 }, data)}
>
{text}
</span>
);

3
components/system/index.js
View File

@ -1,3 +1,5 @@
import * as Constants from "~/common/constants";
// NOTE(jim): Components
import {
ButtonPrimary,
@ -67,4 +69,5 @@ export {
DescriptionGroup,
TableContent,
TableColumn,
Constants,
};

1
pages/component-module-test.js
View File

@ -3,6 +3,7 @@ import * as System from "../dist";
export default class TestPage extends React.Component {
render() {
console.log(System.Constants);
return (
<div>
<System.H1>Component Library Test</System.H1>

2
scenes/SceneFile.js
View File

@ -90,7 +90,7 @@ const STYLES_ITEM = css`
justify-content: center;
font-size: 12px;
letter-spacing: 0.2px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
cursor: pointer;
background-color: ${Constants.system.brand};

8
scenes/SceneStats.js
View File

@ -24,7 +24,7 @@ const STYLES_LEFT = css`
`;
const STYLES_RIGHT = css`
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-size: ${Constants.typescale.lvl2};
color: ${Constants.system.brand};
min-width: 10%;
@ -71,7 +71,7 @@ const STYLES_GRAPH_ROW_RIGHT = css`
const STYLES_OPTION = css`
color: ${Constants.system.white};
margin-left: 24px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-size: 12px;
line-height: 0.2px;
text-transform: uppercase;
@ -108,12 +108,12 @@ const STYLES_ITEM = css`
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;

4
scenes/SceneStatus.js
View File

@ -24,7 +24,7 @@ const STYLES_LEFT = css`
`;
const STYLES_RIGHT = css`
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-size: ${Constants.typescale.lvl2};
color: ${Constants.system.brand};
min-width: 10%;
@ -34,7 +34,7 @@ const STYLES_RIGHT = css`
`;
const STYLES_TEXT_CTA = css`
font-family: "inter-regular";
font-family: ${Constants.font.text};
text-decoration: underline;
color: ${Constants.system.brand};
font-weight: 400;

6
scenes/SceneStorageMarket.js
View File

@ -30,12 +30,12 @@ const STYLES_RIGHT = css`
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
@ -51,7 +51,7 @@ const STYLES_ITEM = css`
const STYLES_OPTION = css`
margin-left: 24px;
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-size: 12px;
line-height: 0.2px;
text-transform: uppercase;

4
scenes/SceneWallet.js
View File

@ -70,12 +70,12 @@ const STYLES_TEXT = css`
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: "inter-medium";
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: "inter-semi-bold";
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;