filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Removes unused emotion dependencies, Excited about a cleaner css prop implementation

Browse Source
This commit is contained in:
@wwwjim 2020-11-04 09:55:48 -08:00
parent 8e14c32201
commit 317e6eaad6
158 changed files with 630 additions and 1063 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/styles/global.js
View File

@ -1,6 +1,6 @@
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
/* prettier-ignore */
export const injectGlobalStyles = () => css`

2
components/core/Alert.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { error } from "~/common/messages";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
const STYLES_ALERT = `

2
components/core/ApplicationHeader.js
View File

@ -4,7 +4,7 @@ import * as SVG from "~/common/svg";
import ApplicationUserControls from "~/components/core/ApplicationUserControls";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
import { SearchModal } from "~/components/core/SearchModal";
import { dispatchCustomEvent } from "~/common/custom-events";

2
components/core/ApplicationLayout.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Validations from "~/common/validations";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
import { Boundary } from "~/components/system/components/fragments/Boundary";
import { Alert } from "~/components/core/Alert";

15
components/core/ApplicationNavigation.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import ApplicationUserControls from "~/components/core/ApplicationUserControls";
@ -118,14 +118,8 @@ const STYLES_ICON_ELEMENT = css`
const Item = (props) => {
return (
<span
css={STYLES_NAVIGATION_ITEM}
style={{ padding: `0 0 0 ${props.level * 16}px` }}
>
<span
css={STYLES_EXPANDER}
onClick={props.onToggleShow ? props.onToggleShow : null}
>
<span css={STYLES_NAVIGATION_ITEM} style={{ padding: `0 0 0 ${props.level * 16}px` }}>
<span css={STYLES_EXPANDER} onClick={props.onToggleShow ? props.onToggleShow : null}>
<span
css={STYLES_ICON_ELEMENT}
style={{
@ -254,8 +248,7 @@ export default class ApplicationNavigation extends React.Component {
<div
key={each.id}
css={
each.id === "V1_NAVIGATION_ARCHIVE" ||
each.id === "V1_NAVIGATION_API"
each.id === "V1_NAVIGATION_ARCHIVE" || each.id === "V1_NAVIGATION_API"
? STYLES_MOBILE_HIDDEN
: null
}

13
components/core/ApplicationUserControls.js
View File

@ -2,12 +2,8 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import {
TooltipWrapper,
dispatchCustomEvent,
PopoverNavigation,
} from "~/components/system";
import { css } from "@emotion/react";
import { TooltipWrapper, dispatchCustomEvent, PopoverNavigation } from "~/components/system";
import { css } from "@emotion/core";
import { Boundary } from "~/components/system/components/fragments/Boundary";
import CircleButtonLight from "~/components/core/CircleButtonLight";
@ -111,7 +107,6 @@ const STYLES_ITEM_BOX = css`
transition: 200ms ease all;
border-left: 2px solid ${Constants.system.foreground};
:hover {
color: ${Constants.system.brand};
}
@ -256,9 +251,7 @@ export default class ApplicationUserControls extends React.Component {
backgroundImage: `url('${this.props.viewer.data.photo}')`,
}}
/>
<span css={STYLES_PROFILE_USERNAME}>
{this.props.viewer.username}
</span>
<span css={STYLES_PROFILE_USERNAME}>{this.props.viewer.username}</span>
<div onClick={this._handleClick} css={STYLES_ITEM_BOX}>
<SVG.ChevronDown height="20px" />
</div>

5
components/core/Avatar.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import Dismissible from "~/components/core/Dismissible";
@ -58,7 +58,8 @@ export default class AvatarEntity extends React.Component {
height: `${this.props.size}px`,
backgroundImage: `url('${this.props.url}')`,
cursor: this.props.onClick ? "pointer" : this.props.style,
}}>
}}
>
{this.state.visible ? this.props.popover : null}
{this.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
</Dismissible>

2
components/core/CarouselSidebarData.js
View File

@ -5,7 +5,7 @@ import * as Actions from "~/common/actions";
import * as SVG from "~/common/svg";
import * as Window from "~/common/window";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import { SlatePicker } from "~/components/core/SlatePicker";
import { dispatchCustomEvent } from "~/common/custom-events";

2
components/core/CarouselSidebarSlate.js
View File

@ -5,7 +5,7 @@ import * as Strings from "~/common/strings";
import * as Actions from "~/common/actions";
import * as Window from "~/common/window";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import { ProcessedText } from "~/components/system/components/Typography";
import { SlatePicker } from "~/components/core/SlatePicker";

2
components/core/CircleButtonGray.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_BUTTON = css`
background-color: ${Constants.system.gray};

2
components/core/CircleButtonLight.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_BUTTON = css`
background-color: ${Constants.system.white};

6
components/core/CodeTerminal.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
const blinkCursor = keyframes`
0% {opacity: 0;}
@ -74,9 +74,7 @@ const CodeTerminal = () => {
<div css={STYLES_ROOT}>
<div css={STYLES_WINDOW}>
<div css={STYLES_WINDOW_NAV}>Cat</div>
<div css={STYLES_WINDOW_BODY}>
npm install --save slate-react-system
</div>
<div css={STYLES_WINDOW_BODY}>npm install --save slate-react-system</div>
</div>
</div>
);

2
components/core/DataMeter.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
// NOTE(jim): Consolidate if used elsewhere on the client (Not node_common)
const MAX_IN_BYTES = 10737418240 * 4;

2
components/core/DataView.js
View File

@ -6,7 +6,7 @@ import * as Actions from "~/common/actions";
import * as SVG from "~/common/svg";
import * as Window from "~/common/window";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { Boundary } from "~/components/system/components/fragments/Boundary";
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
import { LoaderSpinner } from "~/components/system/components/Loaders";

2
components/core/EmptyState.js
View File

@ -3,7 +3,7 @@ import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_EMPTY_STATE = css`
width: 100%;

2
components/core/FilePreviewBubble.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
import { useState } from "react";
const fadeIn = keyframes`

2
components/core/NewWebsitePrototypeFooter.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_ROOT = css`
padding: 96px 88px 96px 88px;

2
components/core/NewWebsitePrototypeHeader.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { Logo } from "~/common/logo.js";
const STYLES_ROOT = css`

2
components/core/OnboardingModal.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as Actions from "~/common/actions";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { dispatchCustomEvent } from "~/common/custom-events";

8
components/core/Pill.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_PILL = css`
position: absolute;
@ -25,11 +25,7 @@ const STYLES_PILL = css`
export default class Pill extends React.Component {
render() {
return (
<figure
css={STYLES_PILL}
onClick={this.props.onClick}
style={this.props.style}
>
<figure css={STYLES_PILL} onClick={this.props.onClick} style={this.props.style}>
{this.props.children}
</figure>
);

36
components/core/Profile.js
View File

@ -2,7 +2,7 @@ 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/core";
import { ProcessedText } from "~/components/system/components/Typography";
import SlatePreviewBlocks from "~/components/core/SlatePreviewBlock";
@ -195,15 +195,14 @@ export default class Profile extends React.Component {
<div css={STYLES_NAME_INTERNAL}>{Strings.getPresentationName(data)}</div>
</div>
{
data.data.body ? (
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={data.data.body} />
</div>
) : null
// <div css={STYLES_DESCRIPTION}>
// <ProcessedText text={"Joined Slate Month, Year"} />
// </div>
{data.data.body ? (
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={data.data.body} />
</div>
) : null
// <div css={STYLES_DESCRIPTION}>
// <ProcessedText text={"Joined Slate Month, Year"} />
// </div>
}
<div>{this.props.buttons}</div>
@ -234,15 +233,14 @@ export default class Profile extends React.Component {
<div css={STYLES_FLEX}>
<div css={STYLES_NAME}>{Strings.getPresentationName(data)}</div>
</div>
{
data.data.body ? (
<div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
<ProcessedText text={data.data.body} />
</div>
) : null
// <div css={STYLES_DESCRIPTION}>
// <ProcessedText text={"Joined Slate Month, Year"} />
// </div>
{data.data.body ? (
<div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
<ProcessedText text={data.data.body} />
</div>
) : null
// <div css={STYLES_DESCRIPTION}>
// <ProcessedText text={"Joined Slate Month, Year"} />
// </div>
}
<div css={STYLES_BUTTON}>
<a css={STYLES_BUTTON} href={"http://slate.host/_"}>

2
components/core/ScenePage.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_SCENE = css`
flex-shrink: 0;

2
components/core/ScenePageHeader.js
View File

@ -2,7 +2,7 @@ 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/core";
import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
import { ProcessedText } from "~/components/system/components/Typography";

15
components/core/SearchDropdown.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
const STYLES_DROPDOWN_CONTAINER = css`
@ -152,9 +152,7 @@ export class SearchDropdown extends React.Component {
let rootRect = this._optionRoot.getBoundingClientRect();
if (elemRect.bottom > rootRect.bottom) {
this._optionRoot.scrollTop =
listElem.offsetTop +
listElem.offsetHeight -
this._optionRoot.offsetHeight;
listElem.offsetTop + listElem.offsetHeight - this._optionRoot.offsetHeight;
}
this.setState({ selectedIndex: this.state.selectedIndex + 1 });
}
@ -171,10 +169,7 @@ export class SearchDropdown extends React.Component {
}
e.preventDefault();
} else if (e.keyCode === 13) {
if (
this.props.results.length > this.state.selectedIndex &&
this.state.selectedIndex !== -1
) {
if (this.props.results.length > this.state.selectedIndex && this.state.selectedIndex !== -1) {
this._handleSelect(this.state.selectedIndex);
}
e.preventDefault();
@ -222,9 +217,7 @@ export class SearchDropdown extends React.Component {
css={STYLES_DROPDOWN_ITEM}
style={{
borderColor:
this.state.selectedIndex === i
? Constants.system.lightBorder
: "transparent",
this.state.selectedIndex === i ? Constants.system.lightBorder : "transparent",
...this.props.itemStyle,
}}
onClick={() => this.props.onSelect(each.value)}

2
components/core/SearchModal.js
View File

@ -6,7 +6,7 @@ import * as Actions from "~/common/actions";
import MiniSearch from "minisearch";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { SearchDropdown } from "~/components/core/SearchDropdown";
import { dispatchCustomEvent } from "~/common/custom-events";
import { SlatePreviewRow } from "~/components/core/SlatePreviewBlock";

2
components/core/Section.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_SECTION = css`
flex-shrink: 0;

14
components/core/SlateLayout.js
View File

@ -7,7 +7,7 @@ import * as Window from "~/common/window";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
import { CheckBox } from "~/components/system/components/CheckBox";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import { Toggle } from "~/components/system/components/Toggle";
import { dispatchCustomEvent } from "~/common/custom-events";
@ -883,7 +883,7 @@ export class SlateLayout extends React.Component {
//NOTE(martina): collapses the z-indexes back down to 0 through n-1 (so they don't continuously get higher)
let zIndexes = this.state.layout.map((pos) => pos.z);
zIndexes = [...new Set(zIndexes)];
zIndexes.sort(function (a, b) {
zIndexes.sort(function(a, b) {
return a - b;
});
let layout = this.cloneLayout(this.state.layout);
@ -1165,12 +1165,10 @@ export class SlateLayout extends React.Component {
height: this.state.editing
? `calc(100vh + ${this.state.containerHeight}px)`
: `calc(96px + ${this.state.containerHeight}px)`,
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${
10 * this.state.unit
}px`,
backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${
(CONTAINER_SIZE / 220) * this.state.unit
}px`,
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${10 *
this.state.unit}px`,
backgroundPosition: `-${(CONTAINER_SIZE / 220) *
this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit}px`,
}}
ref={(c) => {
this._ref = c;

2
components/core/SlateLayoutMobile.js
View File

@ -4,7 +4,7 @@ import * as SVG from "~/common/svg";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const TAG_HEIGHT = 20;

2
components/core/SlateMediaObject.js
View File

@ -2,7 +2,7 @@ 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/core";
const STYLES_FAILURE = css`
background-color: ${Constants.system.pitchBlack};

22
components/core/SlateMediaObjectPreview.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { FileTypeIcon } from "~/components/core/FileTypeIcon";
import { Blurhash } from "react-blurhash";
import { isBlurhashValid } from "blurhash";
@ -98,8 +98,7 @@ export default class SlateMediaObjectPreview extends React.Component {
: this.props.title;
if (this.props.type && this.props.type.startsWith("image/")) {
let blurhash =
this.props.blurhash && isBlurhashValid(this.props.blurhash);
let blurhash = this.props.blurhash && isBlurhashValid(this.props.blurhash);
if (this.props.centeredImage) {
return (
<React.Fragment>
@ -112,9 +111,7 @@ export default class SlateMediaObjectPreview extends React.Component {
}}
>
<SVG.FileNotFound height="24px" />
{this.props.iconOnly ? null : (
<div css={STYLES_TITLE}>File not found</div>
)}
{this.props.iconOnly ? null : <div css={STYLES_TITLE}>File not found</div>}
</div>
) : this.state.showImage ? (
<div
@ -152,9 +149,7 @@ export default class SlateMediaObjectPreview extends React.Component {
style={{ ...this.props.imageStyle, backgroundColor: "#F2F2F2" }}
>
<SVG.FileNotFound height="24px" />
{this.props.iconOnly ? null : (
<div css={STYLES_TITLE}>File not found</div>
)}
{this.props.iconOnly ? null : <div css={STYLES_TITLE}>File not found</div>}
</div>
) : this.state.showImage ? (
<img
@ -175,10 +170,7 @@ export default class SlateMediaObjectPreview extends React.Component {
punch={1}
/>
) : (
<div
css={STYLES_IMAGE}
style={{ maxHeight: "100%", ...this.props.imageStyle }}
/>
<div css={STYLES_IMAGE} style={{ maxHeight: "100%", ...this.props.imageStyle }} />
)}
</React.Fragment>
);
@ -189,9 +181,7 @@ export default class SlateMediaObjectPreview extends React.Component {
return (
<article css={STYLES_ENTITY} style={this.props.style}>
<div>{element}</div>
{this.props.title && !this.props.iconOnly ? (
<div css={STYLES_TITLE}>{title}</div>
) : null}
{this.props.title && !this.props.iconOnly ? <div css={STYLES_TITLE}>{title}</div> : null}
</article>
);
}

2
components/core/SlatePicker.js
View File

@ -3,7 +3,7 @@ import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
const STYLES_SLATE_NAME = css`

10
components/core/SlatePreviewBlock.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { ProcessedText } from "~/components/system/components/Typography";
import { Boundary } from "~/components/system/components/fragments/Boundary";
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
@ -340,7 +340,9 @@ export class SlatePreviewBlock extends React.Component {
onClick: (e) =>
this._handleCopy(
e,
`${window.location.hostname}/${this.props.username}/${this.props.slate.slatename}`
`${window.location.hostname}/${this.props.username}/${
this.props.slate.slatename
}`
),
},
{
@ -354,7 +356,9 @@ export class SlatePreviewBlock extends React.Component {
onClick: (e) =>
this._handleCopy(
e,
`${window.location.hostname}/${this.props.username}/${this.props.slate.slatename}`
`${window.location.hostname}/${this.props.username}/${
this.props.slate.slatename
}`
),
},
]

6
components/core/TabGroup.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TAB_GROUP = css`
margin: 44px 0px 24px 0px;
@ -48,9 +48,7 @@ export class TabGroup extends React.Component {
cursor: this.props.disabled ? "auto" : "pointer",
...this.props.itemStyle,
}}
onClick={
this.props.disabled ? () => {} : () => this.props.onChange(i)
}
onClick={this.props.disabled ? () => {} : () => this.props.onChange(i)}
>
{tab}
</div>

5
components/core/Table.js
View File

@ -3,7 +3,7 @@ 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 { css } from "@emotion/core";
import { P } from "~/components/system/components/Typography";
import * as SVG from "~/common/svg";
@ -104,8 +104,7 @@ export class Table extends React.Component {
const content = 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%";
}

6
components/core/TestnetBanner.js
View File

@ -3,7 +3,7 @@ import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_BANNER = css`
padding: 12px 24px 12px 12px;
@ -22,8 +22,8 @@ export default class TestnetBanner extends React.Component {
render() {
return (
<div css={STYLES_BANNER} style={this.props.style}>
<SVG.FilecoinLogo height="24px" style={{ marginRight: 16 }} /> You are
on the Filecoin Testnet.{" "}
<SVG.FilecoinLogo height="24px" style={{ marginRight: 16 }} /> You are on the Filecoin
Testnet.{" "}
{this.props.balance
? `You have ${this.props.balance} to use for
testing.`

7
components/core/Tooltip.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TOOLTIP = `
font-family: ${Constants.font.text};
@ -29,10 +29,7 @@ const STYLES_TOOLTIP_DARK = css`
export const Tooltip = (props) => {
return (
<div style={{ maxWidth: 400 }}>
<span
css={props.light ? STYLES_TOOLTIP_LIGHT : STYLES_TOOLTIP_DARK}
style={props.style}
>
<span css={props.light ? STYLES_TOOLTIP_LIGHT : STYLES_TOOLTIP_DARK} style={props.style}>
{props.children}
</span>
</div>

2
components/core/ViewAll.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { useState } from "react";
const STYLES_VIEW_BUTTON = css`

11
components/core/WarningMessage.js
View File

@ -3,7 +3,7 @@ import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_BOX = css`
background-color: ${Constants.system.foreground};
@ -22,8 +22,7 @@ export class WarningMessage extends React.Component {
return (
<div css={STYLES_BOX} style={this.props.boxStyle}>
<div css={STYLES_MESSAGE}>
Please don't upload sensitive information to Slate yet. Private
storage is coming soon.
Please don't upload sensitive information to Slate yet. Private storage is coming soon.
</div>
</div>
);
@ -32,10 +31,6 @@ export class WarningMessage extends React.Component {
export class SidebarWarningMessage extends React.Component {
render() {
return (
<WarningMessage
boxStyle={{ backgroundColor: Constants.system.white, padding: 16 }}
/>
);
return <WarningMessage boxStyle={{ backgroundColor: Constants.system.white, padding: 16 }} />;
}
}

2
components/core/WebsitePrototypeFooter.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_CONTAINER = css`
position: -webkit-sticky;

2
components/core/WebsitePrototypeHeader.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import { Logo } from "~/common/logo.js";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_CONTAINER = css`
position: -webkit-sticky;

2
components/core/WebsitePrototypeHeaderGeneric.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVGLogo from "~/common/logo";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_ROOT = css`
padding: 24px 88px 24px 64px;

2
components/core/marketing/CodeTerminal.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
const blinkCursor = keyframes`
0% {

8
components/core/marketing/Issue.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_ISSUE_CARD = css`
width: 33.33%;
@ -71,11 +71,7 @@ export default class Issue extends React.Component {
render() {
return (
<div css={STYLES_ISSUE_CARD}>
<a
css={STYLES_ISSUE_CARD_PARAGRAPH}
href={this.props.url}
target="_blank"
>
<a css={STYLES_ISSUE_CARD_PARAGRAPH} href={this.props.url} target="_blank">
<div css={STYLES_ISSUE_CARD_TEXT}>
<div css={STYLES_ISSUE_CARD_TITLE}>{this.props.title}</div>
<div css={STYLES_ISSUE_CARD_EXPLAINER}>

4
components/core/marketing/IssuesList.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css, keyframes } from "@emotion/react";
import { css } from "@emotion/core";
import Issue from "~/components/core/marketing/Issue";
@ -17,7 +17,7 @@ export default class IssueList extends React.Component {
const { issues } = this.props;
return (
<div css={STYLES_ISSUE_CARD_GROUP}>
{issues.map(issue => {
{issues.map((issue) => {
return (
<Issue
title={issue.title}

26
components/sidebars/SidebarAddFileToBucket.js
View File

@ -6,7 +6,7 @@ import * as Validations from "~/common/validations";
import * as Store from "~/common/store";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DataMeterBar } from "~/components/core/DataMeter";
import { dispatchCustomEvent } from "~/common/custom-events";
import { SidebarWarningMessage } from "~/components/core/WarningMessage";
@ -145,10 +145,7 @@ export default class SidebarAddFileToBucket extends React.Component {
(this.props.current.data && this.props.current.data.name)) ? (
<span>
{" "}
to{" "}
<strong>
{Strings.getPresentationSlateName(this.props.current)}
</strong>
to <strong>{Strings.getPresentationSlateName(this.props.current)}</strong>
</span>
) : (
""
@ -158,18 +155,12 @@ export default class SidebarAddFileToBucket extends React.Component {
<SidebarWarningMessage />
<System.ButtonPrimary
full
type="label"
htmlFor="file"
style={{ marginTop: 24 }}
>
<System.ButtonPrimary full type="label" htmlFor="file" style={{ marginTop: 24 }}>
Add file
</System.ButtonPrimary>
<br />
{this.props.fileLoading &&
Object.keys(this.props.fileLoading).length ? (
{this.props.fileLoading && Object.keys(this.props.fileLoading).length ? (
<div css={STYLES_BAR_CONTAINER}>
<strong css={STYLES_PERFORMANCE}>
{Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)}
@ -226,13 +217,8 @@ export default class SidebarAddFileToBucket extends React.Component {
{file.name}
</div>
</span>
{file.loaded === file.total ||
file.failed ||
file.cancelled ? (
<div
css={STYLES_RIGHT}
style={{ height: 24, width: 24 }}
/>
{file.loaded === file.total || file.failed || file.cancelled ? (
<div css={STYLES_RIGHT} style={{ height: 24, width: 24 }} />
) : (
<span
css={STYLES_RIGHT}

2
components/sidebars/SidebarAddFileToSlate.js
View File

@ -7,7 +7,7 @@ import * as SVG from "~/common/svg";
import * as Actions from "~/common/actions";
import { dispatchCustomEvent } from "~/common/custom-events";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { ButtonPrimary, ButtonDisabled } from "~/components/system/components/Buttons";
import { SlatePicker } from "~/components/core/SlatePicker";

2
components/sidebars/SidebarAddMiner.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
export default class SidebarAddMiner extends React.Component {
state = {};

2
components/sidebars/SidebarAddPeer.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
export default class SidebarAddPeer extends React.Component {
state = {};

8
components/sidebars/SidebarCreatePaymentChannel.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_FOCUS = css`
@ -98,11 +98,7 @@ export default class SidebarCreatePaymentChannel extends React.Component {
<div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div>
<System.ButtonPrimary
full
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
<System.ButtonPrimary full style={{ marginTop: 48 }} onClick={this._handleSubmit}>
Send
</System.ButtonPrimary>
</React.Fragment>

2
components/sidebars/SidebarCreateSlate.js
View File

@ -6,7 +6,7 @@ import * as Validations from "~/common/validations";
import * as Actions from "~/common/actions";
import { dispatchCustomEvent } from "~/common/custom-events";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const SLATE_LIMIT = 50;

8
components/sidebars/SidebarCreateWalletAddress.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const SELECT_MENU_OPTIONS = [
{ value: "1", name: "BLS" },
@ -103,11 +103,7 @@ export default class SidebarCreateWalletAddress extends React.Component {
Create {this.state.name}
</System.ButtonPrimary>
<System.ButtonSecondary
full
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
<System.ButtonSecondary full style={{ marginTop: 16 }} onClick={this._handleCancel}>
Cancel
</System.ButtonSecondary>
</div>

14
components/sidebars/SidebarDeleteWalletAddress.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
export default class SidebarDeleteWalletAddress extends React.Component {
@ -38,19 +38,11 @@ export default class SidebarDeleteWalletAddress extends React.Component {
Are you sure you want to delete the selected wallet?
</System.P>
<System.ButtonPrimary
full
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
<System.ButtonPrimary full style={{ marginTop: 48 }} onClick={this._handleSubmit}>
Delete
</System.ButtonPrimary>
<System.ButtonSecondary
full
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
<System.ButtonSecondary full style={{ marginTop: 16 }} onClick={this._handleCancel}>
Cancel
</System.ButtonSecondary>
</div>

5
components/sidebars/SidebarDragDropNotice.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { SidebarWarningMessage } from "~/components/core/WarningMessage";
const STYLES_ICONS = css`
@ -48,8 +48,7 @@ export default class SidebarDragDropNotice extends React.Component {
<SVG.Video height="24px" style={{ margin: "0 16px" }} />
</div>
<System.P style={{ marginTop: 24 }}>
Drag and drop a file anywhere on the screen to add it to your data.{" "}
<br />
Drag and drop a file anywhere on the screen to add it to your data. <br />
<br />
Dropping a file while on a slate page will add it to that slate.
</System.P>

2
components/sidebars/SidebarFileRetrievalDeal.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
export default class SidebarFileRetrievalDeal extends React.Component {
state = {};

11
components/sidebars/SidebarFileStorageDeal.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_FILE_HIDDEN = css`
height: 1px;
@ -45,8 +45,7 @@ const STYLES_IMAGE_PREVIEW = css`
export default class SidebarFileStorageDeal extends React.Component {
state = {
settings_cold_default_duration: this.props.viewer
.settings_cold_default_duration,
settings_cold_default_duration: this.props.viewer.settings_cold_default_duration,
settings_cold_default_replication_factor: this.props.viewer
.settings_cold_default_replication_factor,
};
@ -167,11 +166,7 @@ export default class SidebarFileStorageDeal extends React.Component {
</System.ButtonPrimary>
{!this.props.sidebarLoading ? (
<System.ButtonSecondary
full
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
<System.ButtonSecondary full style={{ marginTop: 16 }} onClick={this._handleCancel}>
Cancel deal
</System.ButtonSecondary>
) : null}

2
components/sidebars/SidebarFilecoinArchive.js
View File

@ -7,7 +7,7 @@ import * as System from "~/components/system";
import * as Window from "~/common/window";
import * as Messages from "~/common/messages";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const DEFAULT_ERROR_MESSAGE = "We could not make your deal. Please try again later.";

10
components/sidebars/SidebarHelp.js
View File

@ -6,7 +6,7 @@ import * as Validations from "~/common/validations";
import * as Actions from "~/common/actions";
import { dispatchCustomEvent } from "~/common/custom-events";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_HEADER = css`
font-family: ${Constants.font.semiBold};
@ -15,10 +15,7 @@ const STYLES_HEADER = css`
export default class SidebarCreateSlate extends React.Component {
state = {
name:
this.props.viewer.data && this.props.viewer.data.name
? this.props.viewer.data.name
: "",
name: this.props.viewer.data && this.props.viewer.data.name ? this.props.viewer.data.name : "",
email: "",
twitter: "",
message: "",
@ -67,8 +64,7 @@ export default class SidebarCreateSlate extends React.Component {
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble sending out your message right now. Please try again",
message: "We're having trouble sending out your message right now. Please try again",
},
},
});

6
components/sidebars/SidebarNotifications.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_NOTIFICATION = css`
margin-top: 24px;
@ -48,9 +48,7 @@ export default class SidebarNotifications extends React.Component {
{this.props.viewer.notifications.map((n) => {
return (
<div css={STYLES_NOTIFICATION} key={n.id}>
<div css={STYLES_NOTIFICATION_DATE}>
{Strings.toDate(n.createdAt)}
</div>
<div css={STYLES_NOTIFICATION_DATE}>{Strings.toDate(n.createdAt)}</div>
<div css={STYLES_NOTIFICATION_BODY}>{n.text}</div>
</div>
);

2
components/sidebars/SidebarRedeemPaymentChannel.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
export default class SidebarRedeemPaymentChannel extends React.Component {
state = {};

2
components/sidebars/SidebarSingleSlateSettings.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const SIZE_LIMIT = 1000000;

12
components/sidebars/SidebarWalletSendFunds.js
View File

@ -3,7 +3,7 @@ import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_FOCUS = css`
@ -122,9 +122,7 @@ export default class SidebarWalletSendFunds extends React.Component {
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>
{Strings.formatNumber(this.state.amount)}
</div>
<div css={STYLES_FOCUS}>{Strings.formatNumber(this.state.amount)}</div>
<div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div>
@ -137,11 +135,7 @@ export default class SidebarWalletSendFunds extends React.Component {
Send
</System.ButtonPrimary>
<System.ButtonSecondary
full
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
<System.ButtonSecondary full style={{ marginTop: 16 }} onClick={this._handleCancel}>
Cancel
</System.ButtonSecondary>
</React.Fragment>

33
components/stats/CreateChart.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import ReactDOM from "react-dom";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_GRAPH_CONTAINER = css`
display: flex;
@ -43,28 +43,13 @@ export default class CreateChart extends React.Component {
this.createTicks();
}
monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
createCircles = () => {
const { organizedData } = this.props;
let oData = organizedData.flat(2);
let allCircles = oData.map((g, index) => {
return (
<circle key={index} cx={g.x} cy={g.y} r="2" css={STYLES_CHART_CIRCLE} />
);
return <circle key={index} cx={g.x} cy={g.y} r="2" css={STYLES_CHART_CIRCLE} />;
});
ReactDOM.render(allCircles, document.getElementById("circles"));
};
@ -95,11 +80,7 @@ export default class CreateChart extends React.Component {
i[`id`] = o.id;
});
let polyLine = (
<polyline
css={STYLES_CHART_LINE}
key={i.id}
points={this.drawPoints(coordinates)}
/>
<polyline css={STYLES_CHART_LINE} key={i.id} points={this.drawPoints(coordinates)} />
);
return polyLine;
};
@ -138,12 +119,12 @@ export default class CreateChart extends React.Component {
return (
<div css={STYLES_GRAPH_CONTAINER}>
<svg css={STYLES_GRAPH} viewBox="0 0 600 600">
<g id="circles"></g>
<g id="lines"></g>
<g id="circles" />
<g id="lines" />
<g>
<line css={STYLES_X_LINE} x1="25" y1="550" x2="575" y2="550" />
</g>
<g id="tickContainer"></g>
<g id="tickContainer" />
</svg>
</div>
);

8
components/system/CodeBlock.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
// TODO:
// Refactor to https://github.com/FormidableLabs/prism-react-renderer
@ -67,11 +67,7 @@ class CodeBlock extends React.Component {
const textMap = codeBlockToken;
return (
<div
css={STYLES_CODE_BLOCK}
className="language-javascript"
style={this.props.style}
>
<div css={STYLES_CODE_BLOCK} className="language-javascript" style={this.props.style}>
{textMap.map((element, index) => {
return (
<div css={STYLES_LINE} key={`${element}-${index}`}>

2
components/system/Group.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_GROUP_CONTAINER = css`
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

2
components/system/SystemPage.js
View File

@ -5,7 +5,7 @@ import * as SVG from "~/common/svg";
import * as SVGLogo from "~/common/logo";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_PAGE = css`
background-color: ${Constants.system.foreground};

4
components/system/ViewSourceLink.js
View File

@ -1,9 +1,9 @@
import { css } from "@emotion/react";
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/core";
const STYLES_VIEW_SOURCE_LINK = css`
font-size: 14px;
font-family: ${Constants.font.semiBold};

11
components/system/components/AvatarGroup.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_UL = css`
list-style-type: none;
@ -32,12 +32,7 @@ const STYLES_REMAINING = css`
padding-left: 8px;
`;
export const AvatarGroup = ({
limit = 3,
avatars = [],
size = 32,
border = "#FFF",
}) => {
export const AvatarGroup = ({ limit = 3, avatars = [], size = 32, border = "#FFF" }) => {
const containerWidth = size * avatars.length;
const padding = size / 2 - 8;
const remaining = avatars.length - limit;
@ -61,7 +56,7 @@ export const AvatarGroup = ({
height: `${size}px`,
borderColor: `${border}`,
}}
></li>
/>
);
})}
<span

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { LoaderSpinner } from "~/components/system/components/Loaders";
@ -52,11 +52,7 @@ export const ButtonPrimary = (props) => {
if (props.loading) {
return (
<button
css={
props.transparent
? STYLES_BUTTON_PRIMARY_TRANSPARENT
: STYLES_BUTTON_PRIMARY
}
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
>
<LoaderSpinner style={{ height: 16, width: 16 }} />
@ -67,11 +63,7 @@ export const ButtonPrimary = (props) => {
if (props.type === "label") {
return (
<label
css={
props.transparent
? STYLES_BUTTON_PRIMARY_TRANSPARENT
: STYLES_BUTTON_PRIMARY
}
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
children={props.children}
type={props.label}
@ -83,11 +75,7 @@ export const ButtonPrimary = (props) => {
return (
<button
css={
props.transparent
? STYLES_BUTTON_PRIMARY_TRANSPARENT
: STYLES_BUTTON_PRIMARY
}
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
onClick={props.onClick}
children={props.children}
@ -123,11 +111,7 @@ export const ButtonSecondary = (props) => {
if (props.loading) {
return (
<button
css={
props.transparent
? STYLES_BUTTON_SECONDARY_TRANSPARENT
: STYLES_BUTTON_SECONDARY
}
css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
>
<LoaderSpinner style={{ height: 16, width: 16 }} />
@ -138,11 +122,7 @@ export const ButtonSecondary = (props) => {
if (props.type === "label") {
return (
<label
css={
props.transparent
? STYLES_BUTTON_SECONDARY_TRANSPARENT
: STYLES_BUTTON_SECONDARY
}
css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
onClick={props.onClick}
children={props.children}
@ -154,11 +134,7 @@ export const ButtonSecondary = (props) => {
return (
<button
css={
props.transparent
? STYLES_BUTTON_SECONDARY_TRANSPARENT
: STYLES_BUTTON_SECONDARY
}
css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
onClick={props.onClick}
children={props.children}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
@ -193,11 +169,7 @@ const STYLES_BUTTON_DISABLED_TRANSPARENT = css`
export const ButtonDisabled = (props) => {
return (
<button
css={
props.transparent
? STYLES_BUTTON_DISABLED_TRANSPARENT
: STYLES_BUTTON_DISABLED
}
css={props.transparent ? STYLES_BUTTON_DISABLED_TRANSPARENT : STYLES_BUTTON_DISABLED}
onClick={props.onClick}
children={props.children}
type={props.label}
@ -240,11 +212,7 @@ export const ButtonWarning = (props) => {
if (props.loading) {
return (
<button
css={
props.transparent
? STYLES_BUTTON_WARNING_TRANSPARENT
: STYLES_BUTTON_WARNING
}
css={props.transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
>
<LoaderSpinner style={{ height: 16, width: 16 }} />
@ -255,11 +223,7 @@ export const ButtonWarning = (props) => {
if (props.type === "label") {
return (
<label
css={
props.transparent
? STYLES_BUTTON_WARNING_TRANSPARENT
: STYLES_BUTTON_WARNING
}
css={props.transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
children={props.children}
type={props.label}
@ -271,11 +235,7 @@ export const ButtonWarning = (props) => {
return (
<button
css={
props.transparent
? STYLES_BUTTON_WARNING_TRANSPARENT
: STYLES_BUTTON_WARNING
}
css={props.transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING}
style={{ ...props.style, width: props.full ? "100%" : "auto" }}
onClick={props.onClick}
children={props.children}

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const TAB_GROUP_SIZE_MAP = {
1: "100%",
@ -16,8 +16,7 @@ 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`
@ -62,9 +61,7 @@ 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,
}}

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

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_CHECKBOX = css`
box-sizing: border-box;

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import TextareaAutoSize from "~/vendor/react-textarea-autosize";

34
components/system/components/DatePicker.js
View File

@ -2,16 +2,16 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
import moment from "moment";
import { Input } from "~/components/system/components/Input";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
import { Boundary } from "~/components/system/components/fragments/Boundary";
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
(day, i) => <div key={i}>{day}</div>
);
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, i) => (
<div key={i}>{day}</div>
));
const expand = keyframes`
0% {
@ -179,12 +179,7 @@ export class DatePicker extends React.Component {
let result = this.checkInput(value);
if (moment.isMoment(result)) {
validation = "SUCCESS";
date =
value.substring(6, 10) +
"-" +
value.substring(0, 2) +
"-" +
value.substring(3, 5);
date = value.substring(6, 10) + "-" + value.substring(0, 2) + "-" + value.substring(3, 5);
if (cal) {
cal = moment(date).date(1);
}
@ -201,17 +196,9 @@ export class DatePicker extends React.Component {
checkInput = (value) => {
if (value.length !== 10 || !/\d{2}\/\d{2}\/\d{4}/.test(value)) return;
let date = moment(
value.substring(6, 10) +
"-" +
value.substring(0, 2) +
"-" +
value.substring(3, 5)
value.substring(6, 10) + "-" + value.substring(0, 2) + "-" + value.substring(3, 5)
);
if (
!moment.isMoment(date) ||
!date.isValid() ||
date.date() !== Number(value.substring(3, 5))
)
if (!moment.isMoment(date) || !date.isValid() || date.date() !== Number(value.substring(3, 5)))
return "ERROR";
if (this.isDisabled(date)) {
return "WARNING";
@ -232,9 +219,7 @@ export class DatePicker extends React.Component {
} else {
this.setState(
{
cal: this.props.value
? moment(this.props.value).date(1)
: moment().date(1),
cal: this.props.value ? moment(this.props.value).date(1) : moment().date(1),
},
this.setCalendar
);
@ -276,8 +261,7 @@ export class DatePicker extends React.Component {
getStyle = (day) => {
if (this.isDisabled(day)) return STYLES_DISABLED_DAY;
if (this.props.value && day.isSame(moment(this.props.value), "day"))
return STYLES_CHOSEN_DAY;
if (this.props.value && day.isSame(moment(this.props.value), "day")) return STYLES_CHOSEN_DAY;
return STYLES_DAY;
};

2
components/system/components/GlobalCarousel.js
View File

@ -4,7 +4,7 @@ import * as SVG from "~/common/svg";
import * as Strings from "~/common/strings";
import * as Actions from "~/common/actions";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import CarouselSidebarSlate from "~/components/core/CarouselSidebarSlate";
import CarouselSidebarData from "~/components/core/CarouselSidebarData";

2
components/system/components/GlobalModal.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { Boundary } from "~/components/system/components/fragments/Boundary";
const STYLES_BACKGROUND = css`

11
components/system/components/GlobalNotification.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const STYLES_NOTIFICATION_LIST = css`
@ -89,7 +89,9 @@ export class GlobalNotification extends React.Component {
? {
backgroundColor: Constants.system.black,
color: Constants.system.white,
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${NOTIF_COLOR_MAP["GENERIC"]}`,
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
NOTIF_COLOR_MAP["GENERIC"]
}`,
}
: {
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
@ -98,10 +100,7 @@ export class GlobalNotification extends React.Component {
}
}
>
<DescriptionGroup
label={notif.label}
description={notif.description}
/>
<DescriptionGroup label={notif.label} description={notif.description} />
</div>
);
})}

11
components/system/components/HoverTile.js
View File

@ -1,6 +1,6 @@
import * as React from "react";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TILE = css`
width: 100%;
@ -64,9 +64,7 @@ export class HoverTile extends React.Component {
this.setState({
tileStyle: {
transform: `scale(.97) rotateY(${x}deg) rotateX(${y * -1}deg)`,
boxShadow: `${x * -1 * 0.75}px ${y *
-1 *
1.2}px 25px rgba(0, 0, 0, .15)`,
boxShadow: `${x * -1 * 0.75}px ${y * -1 * 1.2}px 25px rgba(0, 0, 0, .15)`,
},
});
};
@ -81,10 +79,7 @@ export class HoverTile extends React.Component {
onMouseLeave={this.handleExit}
ref={this.containerRef}
>
<div
css={STYLES_TILE}
style={{ ...this.state.tileStyle, ...this.props.style }}
>
<div css={STYLES_TILE} style={{ ...this.state.tileStyle, ...this.props.style }}>
{this.props.children}
</div>
</div>

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

@ -1,6 +1,6 @@
import * as React from "react";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TILE = css`
width: 100%;
@ -62,12 +62,9 @@ export class HoverTileColorful extends React.Component {
this.setState({
tileStyle: {
transform: `scale(.97) rotateY(${x}deg) rotateX(${y * -1}deg)`,
background: `linear-gradient(${x}deg, rgba(${
x * -5
},238,238,1) 0%, rgba(148,${x * -20},233,1) 100%)`,
boxShadow: `${x * -1 * 0.75}px ${
y * -1 * 1.2
}px 25px rgba(0, 0, 0, .15)`,
background: `linear-gradient(${x}deg, rgba(${x * -5},238,238,1) 0%, rgba(148,${x *
-20},233,1) 100%)`,
boxShadow: `${x * -1 * 0.75}px ${y * -1 * 1.2}px 25px rgba(0, 0, 0, .15)`,
},
});
};
@ -82,10 +79,7 @@ export class HoverTileColorful extends React.Component {
onMouseLeave={this.handleExit}
ref={this.containerRef}
>
<div
css={STYLES_TILE}
style={{ ...this.state.tileStyle, ...this.props.style }}
>
<div css={STYLES_TILE} style={{ ...this.state.tileStyle, ...this.props.style }}>
{this.props.children}
</div>
</div>

2
components/system/components/Input.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";

11
components/system/components/ListEditor.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
import Draggable from "react-draggable";
import { Input } from "~/components/system/components/Input";
@ -196,17 +196,12 @@ export class ListEditor extends React.Component {
css={STYLES_LIST_ITEM}
style={{
backgroundColor:
this.state.reordering === i
? Constants.system.gray
: Constants.system.white,
this.state.reordering === i ? Constants.system.gray : Constants.system.white,
}}
>
<SVG.Reorder className="cursor" css={STYLES_REORDER} />
<div>{item}</div>
<SVG.Dismiss
css={STYLES_DELETE}
onClick={() => this._handleDelete(i)}
/>
<SVG.Dismiss css={STYLES_DELETE} onClick={() => this._handleDelete(i)} />
</div>
</Draggable>
));

19
components/system/components/Loaders.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
//
//
@ -188,14 +188,7 @@ const STYLES_LOADER_ROTATE_SQUARES = css`
const STYLES_LOADER_PROGRESS = css`
width: 0;
height: 16px;
background-image: linear-gradient(
to left,
#2935ff,
#342fc4,
#33288b,
#2b2157,
#1d1927
);
background-image: linear-gradient(to left, #2935ff, #342fc4, #33288b, #2b2157, #1d1927);
border-radius: 4px;
animation: slate-client-progressbar 5s infinite;
transition: width 0.8s ease;
@ -238,13 +231,9 @@ const STYLES_LOADER_SPINNER = css`
//
//LOADER EXPORTS
export const LoaderProgress = (props) => (
<div css={STYLES_LOADER_PROGRESS} {...props} />
);
export const LoaderProgress = (props) => <div css={STYLES_LOADER_PROGRESS} {...props} />;
export const LoaderSpinner = (props) => (
<div css={STYLES_LOADER_SPINNER} {...props} />
);
export const LoaderSpinner = (props) => <div css={STYLES_LOADER_SPINNER} {...props} />;
export const LoaderCircles = () => (
<div>

2
components/system/components/PopoverNavigation.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_POPOVER = css`
z-index: ${Constants.zindex.tooltip};

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
@ -102,10 +102,7 @@ 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}

17
components/system/components/SelectMenus.js
View File

@ -2,8 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
import { SELECT_COUNTRY_OPTIONS } from "~/common/fixtures";
@ -86,10 +85,7 @@ export const SelectMenu = (props) => {
let presentationValue = map[props.value] ? map[props.value] : "Unselected";
return (
<div
css={props.full ? STYLES_CONTAINER_FULL : STYLES_CONTAINER}
style={props.containerStyle}
>
<div css={props.full ? STYLES_CONTAINER_FULL : STYLES_CONTAINER} style={props.containerStyle}>
<DescriptionGroup
full={props.full}
label={props.label}
@ -100,9 +96,7 @@ export const SelectMenu = (props) => {
<div css={props.className ? props.className : STYLES_SELECT_MENU}>
<label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}>
{map[props.value]}{" "}
{props.category ? (
<span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span>
) : null}
{props.category ? <span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span> : null}
<SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} />
</label>
<select
@ -127,10 +121,7 @@ export const SelectMenu = (props) => {
export const SelectCountryMenu = (props) => {
return (
<div
css={props.full ? STYLES_CONTAINER_FULL : STYLES_CONTAINER}
style={props.containerStyle}
>
<div css={props.full ? STYLES_CONTAINER_FULL : STYLES_CONTAINER} style={props.containerStyle}>
<SelectMenu
css={STYLES_SELECT_MENU}
label={props.label}

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
import { Input } from "~/components/system/components/Input";
@ -128,9 +128,7 @@ export class Slider extends React.Component {
// NOTE(martina): Converts it to increments of this.props.step while accounting for javascript rounding errors.
formatNum = (num) => {
return (Math.round(num / this.props.step) * this.props.step).toFixed(
this.state.decimals
);
return (Math.round(num / this.props.step) * this.props.step).toFixed(this.state.decimals);
};
// NOTE(martina): Converts from px width to return value
@ -206,11 +204,7 @@ export class Slider extends React.Component {
axis="x"
position={{ x: this.state.value, y: 0 }}
bounds={{ left: 0, right: this.state.width }}
grid={
this.props.discrete
? [this.state.step, this.state.step]
: null
}
grid={this.props.discrete ? [this.state.step, this.state.step] : null}
onDrag={this._handleDrag}
handle="strong"
>
@ -224,9 +218,7 @@ export class Slider extends React.Component {
<strong>
<div css={STYLES_SLIDER_HANDLE} />
</strong>
{this.props.bubble ? (
<div css={STYLES_BUBBLE}>{this.props.value}</div>
) : null}
{this.props.bubble ? <div css={STYLES_BUBBLE}>{this.props.value}</div> : null}
</div>
</Draggable>
</div>

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

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_BANDWIDTH = css`
box-sizing: border-box;

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

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TAB_GROUP = css`
box-sizing: border-box;

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

@ -8,7 +8,7 @@ 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 { css } from "@emotion/core";
import { P } from "~/components/system/components/Typography";
import * as SVG from "~/common/svg";
@ -144,9 +144,7 @@ export class Table extends React.Component {
key={`table-top-${c.key}-${cIndex}`}
style={{
width: localWidth,
backgroundColor: this.props.noColor
? null
: ac[c.key].color,
backgroundColor: this.props.noColor ? null : ac[c.key].color,
flexShrink,
}}
tooltip={c.tooltip}
@ -155,9 +153,7 @@ export class Table extends React.Component {
</SubSystem.TableColumn>
);
})}
{this.props.onClick ? (
<div css={STYLES_TABLE_EXPAND_SECTION} />
) : null}
{this.props.onClick ? <div css={STYLES_TABLE_EXPAND_SECTION} /> : null}
</div>
)}
@ -172,8 +168,7 @@ 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%";
}
@ -183,9 +178,7 @@ export class Table extends React.Component {
key={`${each}-${i}-${cIndex}`}
style={{
width: localWidth,
backgroundColor: this.props.noColor
? null
: field.color,
backgroundColor: this.props.noColor ? null : field.color,
flexShrink,
}}
contentstyle={field.contentstyle}

2
components/system/components/Textarea.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import TextareaAutoSize from "~/vendor/react-textarea-autosize";

2
components/system/components/Toggle.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";

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

@ -4,7 +4,7 @@ import * as Actions from "~/common/actions";
import * as Strings from "~/common/strings";
import * as StringReplace from "~/vendor/react-string-replace";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const LINK_STYLES = `

2
components/system/components/fragments/CodeText.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_NOWRAP = {
wordWrap: "nowrap",

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

@ -2,7 +2,7 @@ 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/core";
import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
@ -55,10 +55,7 @@ export const DescriptionGroup = (props) => {
</div>
) : null}
{!Strings.isEmpty(props.description) ? (
<div
css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}
style={props.descriptionStyle}
>
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION} style={props.descriptionStyle}>
{props.description}
</div>
) : null}

35
components/system/components/fragments/GlobalTooltip.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css, keyframes } from "@emotion/react";
import { css, keyframes } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_TOOLTIP = css`
@ -33,12 +33,8 @@ export class GlobalTooltip extends React.Component {
};
getStyle = (rect, bubbleRect, vertical, horizontal) => {
let yOffset = this.props.elementRef
? this.props.elementRef.scrollTop
: window.pageYOffset;
let xOffset = this.props.elementRef
? this.props.elementRef.scrollLeft
: window.pageXOffset;
let yOffset = this.props.elementRef ? this.props.elementRef.scrollTop : window.pageYOffset;
let xOffset = this.props.elementRef ? this.props.elementRef.scrollLeft : window.pageXOffset;
let style = { position: "absolute" };
switch (vertical) {
case "above":
@ -48,9 +44,7 @@ export class GlobalTooltip extends React.Component {
style.top = `${rect.bottom - bubbleRect.height + yOffset}px`;
break;
case "center":
style.top = `${
rect.top + 0.5 * rect.height - 0.5 * bubbleRect.height + yOffset
}px`;
style.top = `${rect.top + 0.5 * rect.height - 0.5 * bubbleRect.height + yOffset}px`;
break;
case "down":
style.top = `${rect.top + yOffset}px`;
@ -67,9 +61,7 @@ export class GlobalTooltip extends React.Component {
style.left = `${rect.right - bubbleRect.width + xOffset}px`;
break;
case "center":
style.left = `${
rect.left + 0.5 * rect.width - 0.5 * bubbleRect.width + xOffset
}px`;
style.left = `${rect.left + 0.5 * rect.width - 0.5 * bubbleRect.width + xOffset}px`;
break;
case "right":
style.left = `${rect.left + xOffset}px`;
@ -82,12 +74,8 @@ export class GlobalTooltip extends React.Component {
};
getOrientation = (rect, bubbleRect, vertical, horizontal) => {
let yOffset = this.props.elementRef
? this.props.elementRef.scrollTop
: window.pageYOffset;
let xOffset = this.props.elementRef
? this.props.elementRef.scrollLeft
: window.pageXOffset;
let yOffset = this.props.elementRef ? this.props.elementRef.scrollTop : window.pageYOffset;
let xOffset = this.props.elementRef ? this.props.elementRef.scrollLeft : window.pageXOffset;
if (!vertical) {
if (bubbleRect.height > rect.top + yOffset) {
vertical = "below";
@ -139,10 +127,7 @@ export class GlobalTooltip extends React.Component {
};
_handleRemove = (e) => {
if (
this.props.allowedTypes &&
!this.props.allowedTypes.includes(e.detail.type)
) {
if (this.props.allowedTypes && !this.props.allowedTypes.includes(e.detail.type)) {
return;
}
@ -341,9 +326,7 @@ export class TooltipAnchor extends React.Component {
{this.props.children ? (
this.props.children
) : (
<SVG.Information
height={this.props.height ? this.props.height : "24px"}
/>
<SVG.Information height={this.props.height ? this.props.height : "24px"} />
)}
</span>
</TooltipWrapper>

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

@ -5,7 +5,7 @@ import * as Strings from "~/common/strings";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import { CodeText } from "~/components/system/components/fragments/CodeText";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import Avatar from "~/components/core/Avatar";

6
components/system/components/fragments/TooltipAnchor.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_TOOLTIP_ANCHOR = css`
box-sizing: border-box;
@ -20,9 +20,7 @@ export class TooltipAnchor extends React.Component {
{this.props.children ? (
this.props.children
) : (
<SVG.Information
height={this.props.height ? this.props.height : "24px"}
/>
<SVG.Information height={this.props.height ? this.props.height : "24px"} />
)}
</span>
);

8
components/system/modules/CreateFilecoinAddress.js
View File

@ -5,7 +5,7 @@ import { Input } from "~/components/system/components/Input";
import { SelectMenu } from "~/components/system/components/SelectMenus";
import { CheckBox } from "~/components/system/components/CheckBox";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const SELECT_MENU_OPTIONS = [
{ value: "1", name: "BLS" },
@ -81,11 +81,7 @@ export class CreateFilecoinAddress extends React.Component {
Make this wallet the default
</CheckBox>
<ButtonPrimary
full
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
<ButtonPrimary full style={{ marginTop: 48 }} onClick={this._handleSubmit}>
Create address
</ButtonPrimary>
</div>

20
components/system/modules/CreateFilecoinStorageDeal.js
View File

@ -1,11 +1,8 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import {
ButtonPrimary,
ButtonSecondary,
} from "~/components/system/components/Buttons";
import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_CONTAINER = css`
@ -92,12 +89,7 @@ export class CreateFilecoinStorageDeal extends React.Component {
render() {
return (
<div css={STYLES_CONTAINER}>
<input
css={STYLES_FILE_HIDDEN}
type="file"
id="file"
onChange={this._handleUpload}
/>
<input css={STYLES_FILE_HIDDEN} type="file" id="file" onChange={this._handleUpload} />
{this.state.file ? (
<div style={{ marginBottom: 24 }}>
<div css={STYLES_ITEM}>
@ -115,11 +107,7 @@ export class CreateFilecoinStorageDeal extends React.Component {
Add file
</ButtonSecondary>
{this.state.file ? (
<ButtonPrimary
full
style={{ marginTop: 24 }}
onClick={this._handleSubmit}
>
<ButtonPrimary full style={{ marginTop: 24 }} onClick={this._handleSubmit}>
Make storage deal
</ButtonPrimary>
) : null}

6
components/system/modules/CreateToken.js
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import Odometer from "~/vendor/odometer";
@ -76,9 +76,7 @@ export const CreateToken = (props) => {
<div css={STYLES_CREATE_TOKEN}>
<div css={STYLES_CREATE_TOKEN_TOP}>
<div ref={odometerNode} onClick={handleCopy} />
<span css={STYLES_CREATE_TOKEN_COPY_INFO}>
{isCopied ? "Copied" : "Copy"}
</span>
<span css={STYLES_CREATE_TOKEN_COPY_INFO}>{isCopied ? "Copied" : "Copy"}</span>
</div>
<div css={STYLES_CREATE_TOKEN_BOTTOM}>
<ButtonPrimary full onClick={props.onClick}>

6
components/system/modules/FilecoinBalancesList.js
View File

@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import { Table } from "~/components/system/components/Table";
import { css } from "@emotion/react";
import { css } from "@emotion/core";
const STYLES_CONTAINER = css`
font-family: ${Constants.font.text};
@ -41,9 +41,7 @@ export const FilecoinBalancesList = (props) => {
rows: props.data.map((each) => {
return {
id: each.addr.addr,
balance: Strings.formatAsFilecoin(
Strings.formatNumber(each.balance)
),
balance: Strings.formatAsFilecoin(Strings.formatNumber(each.balance)),
address: each.addr.addr,
name: each.addr.name,
type: each.addr.type,

2
components/system/modules/FilecoinDealsList.js
View File

@ -2,7 +2,7 @@ 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/core";
import { Table } from "~/components/system/components/Table";
import Group from "~/components/system/Group";

Some files were not shown because too many files have changed in this diff Show More