From 317e6eaad623e76c8899072f887b17be6e55eb0b Mon Sep 17 00:00:00 2001 From: "@wwwjim" Date: Wed, 4 Nov 2020 09:55:48 -0800 Subject: [PATCH 1/2] Removes unused emotion dependencies, Excited about a cleaner css prop implementation --- common/styles/global.js | 2 +- components/core/Alert.js | 2 +- components/core/ApplicationHeader.js | 2 +- components/core/ApplicationLayout.js | 2 +- components/core/ApplicationNavigation.js | 15 +- components/core/ApplicationUserControls.js | 13 +- components/core/Avatar.js | 5 +- components/core/CarouselSidebarData.js | 2 +- components/core/CarouselSidebarSlate.js | 2 +- components/core/CircleButtonGray.js | 2 +- components/core/CircleButtonLight.js | 2 +- components/core/CodeTerminal.js | 6 +- components/core/DataMeter.js | 2 +- components/core/DataView.js | 2 +- components/core/EmptyState.js | 2 +- components/core/FilePreviewBubble.js | 2 +- components/core/NewWebsitePrototypeFooter.js | 2 +- components/core/NewWebsitePrototypeHeader.js | 2 +- components/core/OnboardingModal.js | 2 +- components/core/Pill.js | 8 +- components/core/Profile.js | 36 ++-- components/core/ScenePage.js | 2 +- components/core/ScenePageHeader.js | 2 +- components/core/SearchDropdown.js | 15 +- components/core/SearchModal.js | 2 +- components/core/Section.js | 2 +- components/core/SlateLayout.js | 14 +- components/core/SlateLayoutMobile.js | 2 +- components/core/SlateMediaObject.js | 2 +- components/core/SlateMediaObjectPreview.js | 22 +- components/core/SlatePicker.js | 2 +- components/core/SlatePreviewBlock.js | 10 +- components/core/TabGroup.js | 6 +- components/core/Table.js | 5 +- components/core/TestnetBanner.js | 6 +- components/core/Tooltip.js | 7 +- components/core/ViewAll.js | 2 +- components/core/WarningMessage.js | 11 +- components/core/WebsitePrototypeFooter.js | 2 +- components/core/WebsitePrototypeHeader.js | 2 +- .../core/WebsitePrototypeHeaderGeneric.js | 2 +- components/core/marketing/CodeTerminal.js | 2 +- components/core/marketing/Issue.js | 8 +- components/core/marketing/IssuesList.js | 4 +- components/sidebars/SidebarAddFileToBucket.js | 26 +-- components/sidebars/SidebarAddFileToSlate.js | 2 +- components/sidebars/SidebarAddMiner.js | 2 +- components/sidebars/SidebarAddPeer.js | 2 +- .../sidebars/SidebarCreatePaymentChannel.js | 8 +- components/sidebars/SidebarCreateSlate.js | 2 +- .../sidebars/SidebarCreateWalletAddress.js | 8 +- .../sidebars/SidebarDeleteWalletAddress.js | 14 +- components/sidebars/SidebarDragDropNotice.js | 5 +- .../sidebars/SidebarFileRetrievalDeal.js | 2 +- components/sidebars/SidebarFileStorageDeal.js | 11 +- components/sidebars/SidebarFilecoinArchive.js | 2 +- components/sidebars/SidebarHelp.js | 10 +- components/sidebars/SidebarNotifications.js | 6 +- .../sidebars/SidebarRedeemPaymentChannel.js | 2 +- .../sidebars/SidebarSingleSlateSettings.js | 2 +- components/sidebars/SidebarWalletSendFunds.js | 12 +- components/stats/CreateChart.js | 33 +-- components/system/CodeBlock.js | 8 +- components/system/Group.js | 2 +- components/system/SystemPage.js | 2 +- components/system/ViewSourceLink.js | 4 +- components/system/components/AvatarGroup.js | 11 +- components/system/components/Buttons.js | 62 +----- components/system/components/CardTabGroup.js | 9 +- components/system/components/CheckBox.js | 2 +- components/system/components/CodeTextarea.js | 2 +- components/system/components/DatePicker.js | 34 +--- .../system/components/GlobalCarousel.js | 2 +- components/system/components/GlobalModal.js | 2 +- .../system/components/GlobalNotification.js | 11 +- components/system/components/HoverTile.js | 11 +- .../system/components/HoverTileColorful.js | 16 +- components/system/components/Input.js | 2 +- components/system/components/ListEditor.js | 11 +- components/system/components/Loaders.js | 19 +- .../system/components/PopoverNavigation.js | 2 +- components/system/components/RadioGroup.js | 7 +- components/system/components/SelectMenus.js | 17 +- components/system/components/Slider.js | 16 +- components/system/components/Stat.js | 2 +- components/system/components/TabGroup.js | 2 +- components/system/components/Table.js | 17 +- components/system/components/Textarea.js | 2 +- components/system/components/Toggle.js | 2 +- components/system/components/Typography.js | 2 +- .../system/components/fragments/CodeText.js | 2 +- .../components/fragments/DescriptionGroup.js | 7 +- .../components/fragments/GlobalTooltip.js | 35 +--- .../components/fragments/TableComponents.js | 2 +- .../components/fragments/TooltipAnchor.js | 6 +- .../system/modules/CreateFilecoinAddress.js | 8 +- .../modules/CreateFilecoinStorageDeal.js | 20 +- components/system/modules/CreateToken.js | 6 +- .../system/modules/FilecoinBalancesList.js | 6 +- .../system/modules/FilecoinDealsList.js | 2 +- components/system/modules/FilecoinSettings.js | 44 ++-- components/system/modules/FriendsList.js | 18 +- components/system/modules/PeersList.js | 2 +- .../system/modules/SendAddressFilecoin.js | 15 +- package.json | 10 +- pages/403.js | 8 +- pages/404.js | 8 +- pages/_/_backup/index.js | 20 +- pages/_/integration-page.js | 2 +- pages/_/old.js | 70 +++---- pages/_/profile.js | 2 +- pages/_/slate.js | 2 +- pages/_/system/colors.js | 8 +- pages/_/system/icons.js | 8 +- pages/_/system/tooltips.js | 57 ++---- pages/_/system/typography.js | 6 +- pages/_/test.js | 18 +- pages/_app.js | 7 +- pages/_document.js | 34 ---- pages/community.js | 2 +- pages/guidelines.js | 2 +- pages/index.js | 2 +- pages/maintenance.js | 2 +- pages/marketing-v1/download.js | 24 +-- pages/marketing-v1/guidelines-v1.js | 179 +++++++---------- pages/marketing-v1/index-v1.js | 109 ++++++---- pages/marketing-v1/terms-v1.js | 188 ++++++++---------- pages/slate-for-chrome.js | 2 +- pages/terms.js | 2 +- scenes/SceneActivity.js | 2 +- scenes/SceneArchive.js | 2 +- scenes/SceneDeals.js | 2 +- scenes/SceneDirectory.js | 2 +- scenes/SceneEditAccount.js | 2 +- scenes/SceneEncryptedData.js | 9 +- scenes/SceneFile.js | 2 +- scenes/SceneFilesFolder.js | 2 +- scenes/SceneHome.js | 2 +- scenes/SceneLocalData.js | 2 +- scenes/SceneLogs.js | 2 +- scenes/SceneMakeFilecoinDeal.js | 2 +- scenes/SceneMiners.js | 2 +- scenes/ScenePaymentChannels.js | 2 +- scenes/ScenePeers.js | 2 +- scenes/SceneProfile.js | 2 +- scenes/ScenePublicProfile.js | 2 +- scenes/ScenePublicSlate.js | 2 +- scenes/SceneSentinel.js | 2 +- scenes/SceneSettings.js | 2 +- scenes/SceneSettingsDeveloper.js | 2 +- scenes/SceneSignIn.js | 2 +- scenes/SceneSlate.js | 2 +- scenes/SceneSlates.js | 2 +- scenes/SceneStats.js | 8 +- scenes/SceneStatus.js | 6 +- scenes/SceneStorageMarket.js | 2 +- scenes/SceneTara.js | 2 +- scenes/SceneWallet.js | 2 +- 158 files changed, 630 insertions(+), 1063 deletions(-) delete mode 100644 pages/_document.js diff --git a/common/styles/global.js b/common/styles/global.js index 3ed0a977..5b2b59a0 100644 --- a/common/styles/global.js +++ b/common/styles/global.js @@ -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` diff --git a/components/core/Alert.js b/components/core/Alert.js index acf9a863..c167b299 100644 --- a/components/core/Alert.js +++ b/components/core/Alert.js @@ -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 = ` diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js index 772ef382..52f4b40b 100644 --- a/components/core/ApplicationHeader.js +++ b/components/core/ApplicationHeader.js @@ -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"; diff --git a/components/core/ApplicationLayout.js b/components/core/ApplicationLayout.js index 074d7248..c29f4ba7 100644 --- a/components/core/ApplicationLayout.js +++ b/components/core/ApplicationLayout.js @@ -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"; diff --git a/components/core/ApplicationNavigation.js b/components/core/ApplicationNavigation.js index 866cfa06..9041f79c 100644 --- a/components/core/ApplicationNavigation.js +++ b/components/core/ApplicationNavigation.js @@ -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 ( - - + + - - {this.props.viewer.username} - + {this.props.viewer.username}
diff --git a/components/core/Avatar.js b/components/core/Avatar.js index bcf2b10c..f49dd29e 100644 --- a/components/core/Avatar.js +++ b/components/core/Avatar.js @@ -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 ? : null} diff --git a/components/core/CarouselSidebarData.js b/components/core/CarouselSidebarData.js index 1ae34e62..2301bb59 100644 --- a/components/core/CarouselSidebarData.js +++ b/components/core/CarouselSidebarData.js @@ -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"; diff --git a/components/core/CarouselSidebarSlate.js b/components/core/CarouselSidebarSlate.js index bb094790..7f1e3eb2 100644 --- a/components/core/CarouselSidebarSlate.js +++ b/components/core/CarouselSidebarSlate.js @@ -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"; diff --git a/components/core/CircleButtonGray.js b/components/core/CircleButtonGray.js index bb31d88e..7f22a3ea 100644 --- a/components/core/CircleButtonGray.js +++ b/components/core/CircleButtonGray.js @@ -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}; diff --git a/components/core/CircleButtonLight.js b/components/core/CircleButtonLight.js index 3198e559..5298d441 100644 --- a/components/core/CircleButtonLight.js +++ b/components/core/CircleButtonLight.js @@ -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}; diff --git a/components/core/CodeTerminal.js b/components/core/CodeTerminal.js index 0fe725ba..ce278359 100644 --- a/components/core/CodeTerminal.js +++ b/components/core/CodeTerminal.js @@ -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 = () => {
Cat
-
- npm install --save slate-react-system -
+
npm install --save slate-react-system
); diff --git a/components/core/DataMeter.js b/components/core/DataMeter.js index 489b73a8..bfde79f2 100644 --- a/components/core/DataMeter.js +++ b/components/core/DataMeter.js @@ -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; diff --git a/components/core/DataView.js b/components/core/DataView.js index 015fc4c3..aa27e0ad 100644 --- a/components/core/DataView.js +++ b/components/core/DataView.js @@ -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"; diff --git a/components/core/EmptyState.js b/components/core/EmptyState.js index 77837996..4a6795e3 100644 --- a/components/core/EmptyState.js +++ b/components/core/EmptyState.js @@ -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%; diff --git a/components/core/FilePreviewBubble.js b/components/core/FilePreviewBubble.js index e3ed7793..a30488ab 100644 --- a/components/core/FilePreviewBubble.js +++ b/components/core/FilePreviewBubble.js @@ -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` diff --git a/components/core/NewWebsitePrototypeFooter.js b/components/core/NewWebsitePrototypeFooter.js index d508ea99..f089f15c 100644 --- a/components/core/NewWebsitePrototypeFooter.js +++ b/components/core/NewWebsitePrototypeFooter.js @@ -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; diff --git a/components/core/NewWebsitePrototypeHeader.js b/components/core/NewWebsitePrototypeHeader.js index 5978787e..adfa3c22 100644 --- a/components/core/NewWebsitePrototypeHeader.js +++ b/components/core/NewWebsitePrototypeHeader.js @@ -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` diff --git a/components/core/OnboardingModal.js b/components/core/OnboardingModal.js index e7227bf0..de727d5a 100644 --- a/components/core/OnboardingModal.js +++ b/components/core/OnboardingModal.js @@ -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"; diff --git a/components/core/Pill.js b/components/core/Pill.js index cac6e838..88278bc2 100644 --- a/components/core/Pill.js +++ b/components/core/Pill.js @@ -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 ( -
+
{this.props.children}
); diff --git a/components/core/Profile.js b/components/core/Profile.js index ac6d587c..9ced9fd8 100644 --- a/components/core/Profile.js +++ b/components/core/Profile.js @@ -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 {
{Strings.getPresentationName(data)}
- { - data.data.body ? ( -
- -
- ) : null - //
- // - //
+ {data.data.body ? ( +
+ +
+ ) : null + //
+ // + //
}
{this.props.buttons}
@@ -234,15 +233,14 @@ export default class Profile extends React.Component {
{Strings.getPresentationName(data)}
- { - data.data.body ? ( -
- -
- ) : null - //
- // - //
+ {data.data.body ? ( +
+ +
+ ) : null + //
+ // + //
}
diff --git a/components/core/ScenePage.js b/components/core/ScenePage.js index 14491a4b..824253c0 100644 --- a/components/core/ScenePage.js +++ b/components/core/ScenePage.js @@ -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; diff --git a/components/core/ScenePageHeader.js b/components/core/ScenePageHeader.js index 0c15c814..618f62d7 100644 --- a/components/core/ScenePageHeader.js +++ b/components/core/ScenePageHeader.js @@ -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"; diff --git a/components/core/SearchDropdown.js b/components/core/SearchDropdown.js index e2a9d309..1493c6d0 100644 --- a/components/core/SearchDropdown.js +++ b/components/core/SearchDropdown.js @@ -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)} diff --git a/components/core/SearchModal.js b/components/core/SearchModal.js index 681261dc..88bac84b 100644 --- a/components/core/SearchModal.js +++ b/components/core/SearchModal.js @@ -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"; diff --git a/components/core/Section.js b/components/core/Section.js index 910e8ab3..388238f4 100644 --- a/components/core/Section.js +++ b/components/core/Section.js @@ -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; diff --git a/components/core/SlateLayout.js b/components/core/SlateLayout.js index 5b493010..107198f8 100644 --- a/components/core/SlateLayout.js +++ b/components/core/SlateLayout.js @@ -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; diff --git a/components/core/SlateLayoutMobile.js b/components/core/SlateLayoutMobile.js index fead54d5..c6580499 100644 --- a/components/core/SlateLayoutMobile.js +++ b/components/core/SlateLayoutMobile.js @@ -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; diff --git a/components/core/SlateMediaObject.js b/components/core/SlateMediaObject.js index 876e0bf5..b951a014 100644 --- a/components/core/SlateMediaObject.js +++ b/components/core/SlateMediaObject.js @@ -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}; diff --git a/components/core/SlateMediaObjectPreview.js b/components/core/SlateMediaObjectPreview.js index 3f2cee82..ecdeb540 100644 --- a/components/core/SlateMediaObjectPreview.js +++ b/components/core/SlateMediaObjectPreview.js @@ -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 ( @@ -112,9 +111,7 @@ export default class SlateMediaObjectPreview extends React.Component { }} > - {this.props.iconOnly ? null : ( -
File not found
- )} + {this.props.iconOnly ? null :
File not found
}
) : this.state.showImage ? (
- {this.props.iconOnly ? null : ( -
File not found
- )} + {this.props.iconOnly ? null :
File not found
}
) : this.state.showImage ? ( ) : ( -
+
)} ); @@ -189,9 +181,7 @@ export default class SlateMediaObjectPreview extends React.Component { return (
{element}
- {this.props.title && !this.props.iconOnly ? ( -
{title}
- ) : null} + {this.props.title && !this.props.iconOnly ?
{title}
: null}
); } diff --git a/components/core/SlatePicker.js b/components/core/SlatePicker.js index 45a86dda..7111c030 100644 --- a/components/core/SlatePicker.js +++ b/components/core/SlatePicker.js @@ -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` diff --git a/components/core/SlatePreviewBlock.js b/components/core/SlatePreviewBlock.js index f754e30a..5cfbb4b2 100644 --- a/components/core/SlatePreviewBlock.js +++ b/components/core/SlatePreviewBlock.js @@ -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 + }` ), }, ] diff --git a/components/core/TabGroup.js b/components/core/TabGroup.js index d4c5b150..29de5c0f 100644 --- a/components/core/TabGroup.js +++ b/components/core/TabGroup.js @@ -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}
diff --git a/components/core/Table.js b/components/core/Table.js index d92062ae..56deb114 100644 --- a/components/core/Table.js +++ b/components/core/Table.js @@ -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%"; } diff --git a/components/core/TestnetBanner.js b/components/core/TestnetBanner.js index 7c107d66..ecfa270c 100644 --- a/components/core/TestnetBanner.js +++ b/components/core/TestnetBanner.js @@ -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 (
- You are - on the Filecoin Testnet.{" "} + You are on the Filecoin + Testnet.{" "} {this.props.balance ? `You have ${this.props.balance} to use for testing.` diff --git a/components/core/Tooltip.js b/components/core/Tooltip.js index c0e9da4a..48b38707 100644 --- a/components/core/Tooltip.js +++ b/components/core/Tooltip.js @@ -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 (
- + {props.children}
diff --git a/components/core/ViewAll.js b/components/core/ViewAll.js index 87bba9ab..5a4862c9 100644 --- a/components/core/ViewAll.js +++ b/components/core/ViewAll.js @@ -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` diff --git a/components/core/WarningMessage.js b/components/core/WarningMessage.js index c2d97e04..28e846ca 100644 --- a/components/core/WarningMessage.js +++ b/components/core/WarningMessage.js @@ -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 (
- 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.
); @@ -32,10 +31,6 @@ export class WarningMessage extends React.Component { export class SidebarWarningMessage extends React.Component { render() { - return ( - - ); + return ; } } diff --git a/components/core/WebsitePrototypeFooter.js b/components/core/WebsitePrototypeFooter.js index c562992f..d0afa936 100644 --- a/components/core/WebsitePrototypeFooter.js +++ b/components/core/WebsitePrototypeFooter.js @@ -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; diff --git a/components/core/WebsitePrototypeHeader.js b/components/core/WebsitePrototypeHeader.js index d1d2d529..32baf0f7 100644 --- a/components/core/WebsitePrototypeHeader.js +++ b/components/core/WebsitePrototypeHeader.js @@ -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; diff --git a/components/core/WebsitePrototypeHeaderGeneric.js b/components/core/WebsitePrototypeHeaderGeneric.js index 462d93e6..1e007992 100644 --- a/components/core/WebsitePrototypeHeaderGeneric.js +++ b/components/core/WebsitePrototypeHeaderGeneric.js @@ -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; diff --git a/components/core/marketing/CodeTerminal.js b/components/core/marketing/CodeTerminal.js index 9c7862a5..4ee65d03 100644 --- a/components/core/marketing/CodeTerminal.js +++ b/components/core/marketing/CodeTerminal.js @@ -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% { diff --git a/components/core/marketing/Issue.js b/components/core/marketing/Issue.js index f0803962..1699b1ce 100644 --- a/components/core/marketing/Issue.js +++ b/components/core/marketing/Issue.js @@ -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 (
- +
{this.props.title}
diff --git a/components/core/marketing/IssuesList.js b/components/core/marketing/IssuesList.js index 68a95d76..a507fd22 100644 --- a/components/core/marketing/IssuesList.js +++ b/components/core/marketing/IssuesList.js @@ -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 (
- {issues.map(issue => { + {issues.map((issue) => { return ( {" "} - to{" "} - - {Strings.getPresentationSlateName(this.props.current)} - + to {Strings.getPresentationSlateName(this.props.current)} ) : ( "" @@ -158,18 +155,12 @@ export default class SidebarAddFileToBucket extends React.Component { - + Add file
- {this.props.fileLoading && - Object.keys(this.props.fileLoading).length ? ( + {this.props.fileLoading && Object.keys(this.props.fileLoading).length ? (
{Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)} @@ -226,13 +217,8 @@ export default class SidebarAddFileToBucket extends React.Component { {file.name}
- {file.loaded === file.total || - file.failed || - file.cancelled ? ( -
+ {file.loaded === file.total || file.failed || file.cancelled ? ( +
) : ( Total Filecoin
- + Send diff --git a/components/sidebars/SidebarCreateSlate.js b/components/sidebars/SidebarCreateSlate.js index f66e561b..86eb57d1 100644 --- a/components/sidebars/SidebarCreateSlate.js +++ b/components/sidebars/SidebarCreateSlate.js @@ -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; diff --git a/components/sidebars/SidebarCreateWalletAddress.js b/components/sidebars/SidebarCreateWalletAddress.js index e33b139e..7729272b 100644 --- a/components/sidebars/SidebarCreateWalletAddress.js +++ b/components/sidebars/SidebarCreateWalletAddress.js @@ -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} - + Cancel
diff --git a/components/sidebars/SidebarDeleteWalletAddress.js b/components/sidebars/SidebarDeleteWalletAddress.js index 59569f03..e56e134e 100644 --- a/components/sidebars/SidebarDeleteWalletAddress.js +++ b/components/sidebars/SidebarDeleteWalletAddress.js @@ -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? - + Delete - + Cancel
diff --git a/components/sidebars/SidebarDragDropNotice.js b/components/sidebars/SidebarDragDropNotice.js index c467914d..f77695d2 100644 --- a/components/sidebars/SidebarDragDropNotice.js +++ b/components/sidebars/SidebarDragDropNotice.js @@ -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 {
- Drag and drop a file anywhere on the screen to add it to your data.{" "} -
+ Drag and drop a file anywhere on the screen to add it to your data.

Dropping a file while on a slate page will add it to that slate. diff --git a/components/sidebars/SidebarFileRetrievalDeal.js b/components/sidebars/SidebarFileRetrievalDeal.js index b29a915b..5cd8f234 100644 --- a/components/sidebars/SidebarFileRetrievalDeal.js +++ b/components/sidebars/SidebarFileRetrievalDeal.js @@ -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 = {}; diff --git a/components/sidebars/SidebarFileStorageDeal.js b/components/sidebars/SidebarFileStorageDeal.js index 71ff8dec..436c5c3e 100644 --- a/components/sidebars/SidebarFileStorageDeal.js +++ b/components/sidebars/SidebarFileStorageDeal.js @@ -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 { {!this.props.sidebarLoading ? ( - + Cancel deal ) : null} diff --git a/components/sidebars/SidebarFilecoinArchive.js b/components/sidebars/SidebarFilecoinArchive.js index 93ddbad2..783ec0ca 100644 --- a/components/sidebars/SidebarFilecoinArchive.js +++ b/components/sidebars/SidebarFilecoinArchive.js @@ -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."; diff --git a/components/sidebars/SidebarHelp.js b/components/sidebars/SidebarHelp.js index a7db23b6..7f980291 100644 --- a/components/sidebars/SidebarHelp.js +++ b/components/sidebars/SidebarHelp.js @@ -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", }, }, }); diff --git a/components/sidebars/SidebarNotifications.js b/components/sidebars/SidebarNotifications.js index 4176eb05..31e87f8a 100644 --- a/components/sidebars/SidebarNotifications.js +++ b/components/sidebars/SidebarNotifications.js @@ -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 (
-
- {Strings.toDate(n.createdAt)} -
+
{Strings.toDate(n.createdAt)}
{n.text}
); diff --git a/components/sidebars/SidebarRedeemPaymentChannel.js b/components/sidebars/SidebarRedeemPaymentChannel.js index 342de7ea..35c0a179 100644 --- a/components/sidebars/SidebarRedeemPaymentChannel.js +++ b/components/sidebars/SidebarRedeemPaymentChannel.js @@ -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 = {}; diff --git a/components/sidebars/SidebarSingleSlateSettings.js b/components/sidebars/SidebarSingleSlateSettings.js index 18d19e2d..d7ce4792 100644 --- a/components/sidebars/SidebarSingleSlateSettings.js +++ b/components/sidebars/SidebarSingleSlateSettings.js @@ -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; diff --git a/components/sidebars/SidebarWalletSendFunds.js b/components/sidebars/SidebarWalletSendFunds.js index da36a75d..c8866766 100644 --- a/components/sidebars/SidebarWalletSendFunds.js +++ b/components/sidebars/SidebarWalletSendFunds.js @@ -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 {
-
- {Strings.formatNumber(this.state.amount)} -
+
{Strings.formatNumber(this.state.amount)}
Total Filecoin
@@ -137,11 +135,7 @@ export default class SidebarWalletSendFunds extends React.Component { Send - + Cancel diff --git a/components/stats/CreateChart.js b/components/stats/CreateChart.js index 5dbd674b..971df5a3 100644 --- a/components/stats/CreateChart.js +++ b/components/stats/CreateChart.js @@ -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 ( - - ); + return ; }); ReactDOM.render(allCircles, document.getElementById("circles")); }; @@ -95,11 +80,7 @@ export default class CreateChart extends React.Component { i[`id`] = o.id; }); let polyLine = ( - + ); return polyLine; }; @@ -138,12 +119,12 @@ export default class CreateChart extends React.Component { return (
- - + + - +
); diff --git a/components/system/CodeBlock.js b/components/system/CodeBlock.js index 5504ea09..958d5b48 100644 --- a/components/system/CodeBlock.js +++ b/components/system/CodeBlock.js @@ -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 ( -
+
{textMap.map((element, index) => { return (
diff --git a/components/system/Group.js b/components/system/Group.js index 04cebb95..887e4a67 100644 --- a/components/system/Group.js +++ b/components/system/Group.js @@ -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); diff --git a/components/system/SystemPage.js b/components/system/SystemPage.js index b5820375..b25e5472 100644 --- a/components/system/SystemPage.js +++ b/components/system/SystemPage.js @@ -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}; diff --git a/components/system/ViewSourceLink.js b/components/system/ViewSourceLink.js index 8f47cb01..8a605330 100644 --- a/components/system/ViewSourceLink.js +++ b/components/system/ViewSourceLink.js @@ -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}; diff --git a/components/system/components/AvatarGroup.js b/components/system/components/AvatarGroup.js index 8ea8309c..267d2e44 100644 --- a/components/system/components/AvatarGroup.js +++ b/components/system/components/AvatarGroup.js @@ -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}`, }} - > + /> ); })} { if (props.loading) { return (
); })} diff --git a/components/system/components/HoverTile.js b/components/system/components/HoverTile.js index 05950f46..00b1207b 100644 --- a/components/system/components/HoverTile.js +++ b/components/system/components/HoverTile.js @@ -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} > -
+
{this.props.children}
diff --git a/components/system/components/HoverTileColorful.js b/components/system/components/HoverTileColorful.js index d3be1827..5d477cc0 100644 --- a/components/system/components/HoverTileColorful.js +++ b/components/system/components/HoverTileColorful.js @@ -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} > -
+
{this.props.children}
diff --git a/components/system/components/Input.js b/components/system/components/Input.js index 6cb09d23..3a8395dd 100644 --- a/components/system/components/Input.js +++ b/components/system/components/Input.js @@ -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"; diff --git a/components/system/components/ListEditor.js b/components/system/components/ListEditor.js index 15c74d38..083a5c60 100644 --- a/components/system/components/ListEditor.js +++ b/components/system/components/ListEditor.js @@ -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, }} >
{item}
- this._handleDelete(i)} - /> + this._handleDelete(i)} />
)); diff --git a/components/system/components/Loaders.js b/components/system/components/Loaders.js index 8caeef9a..0d6f6724 100644 --- a/components/system/components/Loaders.js +++ b/components/system/components/Loaders.js @@ -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) => ( -
-); +export const LoaderProgress = (props) =>
; -export const LoaderSpinner = (props) => ( -
-); +export const LoaderSpinner = (props) =>
; export const LoaderCircles = () => (
diff --git a/components/system/components/PopoverNavigation.js b/components/system/components/PopoverNavigation.js index cf8a220a..d5dd42d8 100644 --- a/components/system/components/PopoverNavigation.js +++ b/components/system/components/PopoverNavigation.js @@ -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}; diff --git a/components/system/components/RadioGroup.js b/components/system/components/RadioGroup.js index f436b16e..6bf824e8 100644 --- a/components/system/components/RadioGroup.js +++ b/components/system/components/RadioGroup.js @@ -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 (
+
{
+ {this.state.file ? (
@@ -115,11 +107,7 @@ export class CreateFilecoinStorageDeal extends React.Component { Add file {this.state.file ? ( - + Make storage deal ) : null} diff --git a/components/system/modules/CreateToken.js b/components/system/modules/CreateToken.js index 9030ecec..e9ad5834 100644 --- a/components/system/modules/CreateToken.js +++ b/components/system/modules/CreateToken.js @@ -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) => {
- - {isCopied ? "Copied" : "Copy"} - + {isCopied ? "Copied" : "Copy"}
diff --git a/components/system/modules/FilecoinBalancesList.js b/components/system/modules/FilecoinBalancesList.js index 3a0e940a..4b87e43c 100644 --- a/components/system/modules/FilecoinBalancesList.js +++ b/components/system/modules/FilecoinBalancesList.js @@ -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, diff --git a/components/system/modules/FilecoinDealsList.js b/components/system/modules/FilecoinDealsList.js index 97808c71..4ff8acc1 100644 --- a/components/system/modules/FilecoinDealsList.js +++ b/components/system/modules/FilecoinDealsList.js @@ -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"; diff --git a/components/system/modules/FilecoinSettings.js b/components/system/modules/FilecoinSettings.js index 0ad88e86..724b7f91 100644 --- a/components/system/modules/FilecoinSettings.js +++ b/components/system/modules/FilecoinSettings.js @@ -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 { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup"; import { SelectMenu } from "~/components/system/components/SelectMenus"; import { Toggle } from "~/components/system/components/Toggle"; @@ -95,29 +95,23 @@ export class FilecoinSettings extends React.Component { unbundleConfig = () => { let config = { settings_hot_enabled: this.props.defaultStorageConfig.hot.enabled, - settings_hot_allow_unfreeze: this.props.defaultStorageConfig.hot - .allowUnfreeze, - settings_hot_ipfs_add_timeout: this.props.defaultStorageConfig.hot.ipfs - .addTimeout, + settings_hot_allow_unfreeze: this.props.defaultStorageConfig.hot.allowUnfreeze, + settings_hot_ipfs_add_timeout: this.props.defaultStorageConfig.hot.ipfs.addTimeout, settings_cold_enabled: this.props.defaultStorageConfig.cold.enabled, - settings_cold_default_address: this.props.defaultStorageConfig.cold - .filecoin.addr, - settings_cold_default_duration: this.props.defaultStorageConfig.cold - .filecoin.dealMinDuration, - settings_cold_default_replication_factor: this.props.defaultStorageConfig - .cold.filecoin.repFactor, - settings_cold_default_excluded_miners: this.props.defaultStorageConfig - .cold.filecoin.excludedMinersList, - settings_cold_default_trusted_miners: this.props.defaultStorageConfig.cold - .filecoin.trustedMinersList, - settings_cold_country_codes_list: this.props.defaultStorageConfig.cold - .filecoin.countryCodesList, - settings_cold_default_max_price: this.props.defaultStorageConfig.cold - .filecoin.maxPrice, - settings_cold_default_auto_renew: this.props.defaultStorageConfig.cold - .filecoin.renew.enabled, - settings_cold_default_auto_renew_threshold: this.props - .defaultStorageConfig.cold.filecoin.renew.threshold, + settings_cold_default_address: this.props.defaultStorageConfig.cold.filecoin.addr, + settings_cold_default_duration: this.props.defaultStorageConfig.cold.filecoin.dealMinDuration, + settings_cold_default_replication_factor: this.props.defaultStorageConfig.cold.filecoin + .repFactor, + settings_cold_default_excluded_miners: this.props.defaultStorageConfig.cold.filecoin + .excludedMinersList, + settings_cold_default_trusted_miners: this.props.defaultStorageConfig.cold.filecoin + .trustedMinersList, + settings_cold_country_codes_list: this.props.defaultStorageConfig.cold.filecoin + .countryCodesList, + settings_cold_default_max_price: this.props.defaultStorageConfig.cold.filecoin.maxPrice, + settings_cold_default_auto_renew: this.props.defaultStorageConfig.cold.filecoin.renew.enabled, + settings_cold_default_auto_renew_threshold: this.props.defaultStorageConfig.cold.filecoin + .renew.threshold, settings_repairable: this.props.defaultStorageConfig.repairable, fetchedConfig: true, }; @@ -309,9 +303,7 @@ export class FilecoinSettings extends React.Component { description="How long before a deal expires should it auto renew." name="settings_cold_default_auto_renew_threshold" pattern="^\d*$" - value={ - this.state.settings_cold_default_auto_renew_threshold - } + value={this.state.settings_cold_default_auto_renew_threshold} unit="[unit]" onChange={this._handleChange} /> diff --git a/components/system/modules/FriendsList.js b/components/system/modules/FriendsList.js index 8c092b7b..508a8e3a 100644 --- a/components/system/modules/FriendsList.js +++ b/components/system/modules/FriendsList.js @@ -3,11 +3,13 @@ import * as Constants from "~/common/constants"; import * as Strings from "~/common/strings"; import * as SVG from "~/common/svg"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import { Table } from "~/components/system/components/Table"; import { StatUpload, StatDownload } from "~/components/system/components/Stat"; -let genericImg = `${Constants.gateways.ipfs}/bafybeiblly23jomdjjiq7ilth667npcfm5llqb5xfstodbbfa5pxtoek7u`; +let genericImg = `${ + Constants.gateways.ipfs +}/bafybeiblly23jomdjjiq7ilth667npcfm5llqb5xfstodbbfa5pxtoek7u`; const STYLES_BUTTON = ` font-family: ${Constants.font.text}; @@ -158,11 +160,7 @@ export class FriendsList extends React.Component { borderRadius: "4px", }} > - +
), accept: ( @@ -224,11 +222,7 @@ export class FriendsList extends React.Component { borderRadius: "4px", }} > - +
), children: , diff --git a/components/system/modules/PeersList.js b/components/system/modules/PeersList.js index a96326db..93503acb 100644 --- a/components/system/modules/PeersList.js +++ b/components/system/modules/PeersList.js @@ -2,7 +2,7 @@ import * as React from "react"; import * as Constants from "~/common/constants"; 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}; diff --git a/components/system/modules/SendAddressFilecoin.js b/components/system/modules/SendAddressFilecoin.js index d28537cd..c53ae7b2 100644 --- a/components/system/modules/SendAddressFilecoin.js +++ b/components/system/modules/SendAddressFilecoin.js @@ -3,7 +3,7 @@ import * as Constants from "~/common/constants"; import { Input } from "~/components/system/components/Input"; import { ButtonPrimary } from "~/components/system/components/Buttons"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; const STYLES_CONTAINER = css` font-family: ${Constants.font.text}; @@ -41,12 +41,7 @@ export class SendAddressFilecoin extends React.Component { render() { return (
- + - + Send {this.state.amount} FIL
diff --git a/package.json b/package.json index a0c29f34..6668579c 100644 --- a/package.json +++ b/package.json @@ -32,11 +32,11 @@ }, "repository": "filecoin-project/slate", "dependencies": { - "@babel/plugin-transform-runtime": "^7.11.0", - "@babel/preset-env": "^7.11.0", - "@babel/register": "^7.10.5", - "@babel/runtime": "^7.11.2", - "@emotion/babel-preset-css-prop": "^10.0.27", + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/preset-env": "^7.12.1", + "@babel/register": "^7.12.1", + "@babel/runtime": "^7.12.5", + "@emotion/babel-preset-css-prop": "^10.1.0", "@emotion/cache": "11.0.0-next.12", "@emotion/core": "^10.0.28", "@emotion/css": "11.0.0-next.12", diff --git a/pages/403.js b/pages/403.js index ddea3271..bc657017 100644 --- a/pages/403.js +++ b/pages/403.js @@ -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 WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader"; @@ -130,11 +130,7 @@ export default class NotFoundPage extends React.Component { const url = "https://slate.host/403"; return ( - +
diff --git a/pages/404.js b/pages/404.js index f4554f38..fc3b5fd9 100644 --- a/pages/404.js +++ b/pages/404.js @@ -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 WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader"; @@ -130,11 +130,7 @@ export default class NotFoundPage extends React.Component { const url = "https://slate.host/404"; return ( - +
diff --git a/pages/_/_backup/index.js b/pages/_/_backup/index.js index dcec70fe..c53154ed 100644 --- a/pages/_/_backup/index.js +++ b/pages/_/_backup/index.js @@ -3,7 +3,7 @@ import * as Constants from "~/common/constants"; import * as Actions from "~/common/actions"; import * as System from "~/components/system"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader"; @@ -146,27 +146,23 @@ export default class IndexPage extends React.Component { render() { const title = `Slate`; - const description = - "The place for all of your assets. Powered by Textile and Filecoin."; + const description = "The place for all of your assets. Powered by Textile and Filecoin."; const url = "https://slate.host"; return ( - +

- Store your files, turn them into collections, and share them - with the world — with{" "} + Store your files, turn them into collections, and share them with the world — with{" "} + target="_blank" + > Filecoin & Slate . @@ -182,9 +178,7 @@ export default class IndexPage extends React.Component {

) : (
-
+
Slate is currently down for maintenance.
diff --git a/pages/_/integration-page.js b/pages/_/integration-page.js index 6300c83a..aacb915c 100644 --- a/pages/_/integration-page.js +++ b/pages/_/integration-page.js @@ -3,7 +3,7 @@ import * as Constants from "~/common/constants"; import * as System from "~/components/system"; import * as Actions from "~/common/actions"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_ITEM = css` diff --git a/pages/_/old.js b/pages/_/old.js index 7d357d57..f167bfe9 100644 --- a/pages/_/old.js +++ b/pages/_/old.js @@ -5,7 +5,7 @@ import * as System from "~/components/system"; import CodeBlock from "~/components/system/CodeBlock"; import ReactDOM from "react-dom"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; @@ -215,9 +215,9 @@ const STYLES_SECTION = css` `; const STYLES_CARD = css``; -export const getServerSideProps = async context => { +export const getServerSideProps = async (context) => { return { - props: { ...context.query } + props: { ...context.query }, }; }; @@ -235,7 +235,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/jimmylee", organization: "Slate", pic: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4" + "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", }, { id: 2, @@ -243,7 +243,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/martinalong", organization: "Slate", pic: - "https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4" + "https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4", }, { id: 3, @@ -251,7 +251,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/gndclouds", organization: "Slate", pic: - "https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4" + "https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4", }, { id: 4, @@ -259,7 +259,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/uonai", organization: "", pic: - "https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4" + "https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4", }, { id: 5, @@ -267,14 +267,14 @@ export default class IndexPage extends React.Component { url: "https://github.com/tarafanlin", organization: "Slate", pic: - "https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4" + "https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4", }, { id: 6, name: "jasonleyser", url: "https://github.com/", organization: "Slate", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 7, @@ -282,7 +282,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/akuokojnr", organization: "", pic: - "https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4" + "https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4", }, { id: 8, @@ -290,14 +290,14 @@ export default class IndexPage extends React.Component { url: "https://github.com/jordattebayo", organization: "", pic: - "https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4" + "https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4", }, { id: 9, name: "Pooja", url: "https://github.com/", organization: "", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 10, @@ -305,7 +305,7 @@ export default class IndexPage extends React.Component { url: "https://github.com/tmrtrn", organization: "", pic: - "https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4" + "https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4", }, { id: 11, @@ -313,43 +313,43 @@ export default class IndexPage extends React.Component { url: "https://github.com/motdde", organization: "", pic: - "https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4" + "https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4", }, { id: 12, name: "harisbutt", url: "https://github.com/harisbutt", organization: "", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 13, name: "andrewxhill", url: "https://github.com/andrewxhill", organization: "", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 14, name: "johannes-jp", url: "https://github.com/johannes-jp", organization: "", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 15, name: "Anish-Agnihotri", url: "https://github.com/anish-agnihotri", organization: "", - pic: "/static/a1.jpg" + pic: "/static/a1.jpg", }, { id: 16, name: "Aminejvm", url: "https://github.com/aminejvm", organization: "", - pic: "/static/a1.jpg" - } + pic: "/static/a1.jpg", + }, ]; addContributors = () => { @@ -371,29 +371,24 @@ export default class IndexPage extends React.Component { render() { const title = `Slate`; - const description = - "The place for all of your assets. Powered by Textile and Filecoin."; + const description = "The place for all of your assets. Powered by Textile and Filecoin."; const url = "https://slate.host/community"; return ( - +
- Slate is designed and built by a growing community of hackers, - artists, and creatives on the web. + Slate is designed and built by a growing community of hackers, artists, and + creatives on the web. ytu
{" "} -
+
@@ -401,8 +396,8 @@ export default class IndexPage extends React.Component {
Get Involved - Slate is a fully open-source file sharing network designed for - research and collaboration. + Slate is a fully open-source file sharing network designed for research and + collaboration.

@@ -426,8 +421,7 @@ export default class IndexPage extends React.Component { Contact
- Reach out to any of the core contributors, reach us on Twitter, - or join our Slack. + Reach out to any of the core contributors, reach us on Twitter, or join our Slack.

@@ -436,9 +430,7 @@ export default class IndexPage extends React.Component {
Integrate
- - Explore our API and SDK and build on top of Slate. - + Explore our API and SDK and build on top of Slate.

npm install --save slate-react-system @@ -447,9 +439,7 @@ export default class IndexPage extends React.Component {
Design System
- - Check out our open source design system for your projects - + Check out our open source design system for your projects

npm install --save slate-react-system diff --git a/pages/_/profile.js b/pages/_/profile.js index 5e63f49d..4818696f 100644 --- a/pages/_/profile.js +++ b/pages/_/profile.js @@ -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 { Alert } from "~/components/core/Alert"; import Profile from "~/components/core/Profile"; diff --git a/pages/_/slate.js b/pages/_/slate.js index b431e91b..6a940da8 100644 --- a/pages/_/slate.js +++ b/pages/_/slate.js @@ -4,7 +4,7 @@ import * as System from "~/components/system"; import * as Strings from "~/common/strings"; import * as Actions from "~/common/actions"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import { ProcessedText } from "~/components/system/components/Typography"; import { Alert } from "~/components/core/Alert"; import { ViewAllButton } from "~/components/core/ViewAll"; diff --git a/pages/_/system/colors.js b/pages/_/system/colors.js index 87f3e2f1..1c2d4f96 100644 --- a/pages/_/system/colors.js +++ b/pages/_/system/colors.js @@ -3,7 +3,7 @@ import * as Strings from "~/common/strings"; import * as System from "~/components/system"; import * as Constants from "~/common/constants"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; @@ -30,11 +30,7 @@ const STYLES_COLOR_TEXT = css` export default class SystemPageColors extends React.Component { render() { return ( - + Colors diff --git a/pages/_/system/icons.js b/pages/_/system/icons.js index cdd5d1d8..c79e1e30 100644 --- a/pages/_/system/icons.js +++ b/pages/_/system/icons.js @@ -3,7 +3,7 @@ import * as System from "~/components/system"; import * as SVG from "~/common/svg"; import * as Constants from "~/common/constants"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; @@ -46,11 +46,7 @@ const STYLES_ICON = css` export default class SystemPageIcons extends React.Component { render() { return ( - + Icons diff --git a/pages/_/system/tooltips.js b/pages/_/system/tooltips.js index ff97ddba..921c77b4 100644 --- a/pages/_/system/tooltips.js +++ b/pages/_/system/tooltips.js @@ -8,7 +8,7 @@ import ViewSourceLink from "~/components/system/ViewSourceLink"; import CodeBlock from "~/components/system/CodeBlock"; import { dispatchCustomEvent } from "~/common/custom-events"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; const STYLES_DEMO_TOOLTIP = { display: "flex", @@ -79,9 +79,8 @@ export default class SystemPageTooltips extends React.Component {

- The Tooltip component is used to provide the user with more - information in a message that appears when they interact with an - element. + The Tooltip component is used to provide the user with more information in a message that + appears when they interact with an element.
@@ -91,8 +90,7 @@ export default class SystemPageTooltips extends React.Component {

- Import the GlobalTooltip, TooltipWrapper, and optionally the - TooltipAnchor Components. + Import the GlobalTooltip, TooltipWrapper, and optionally the TooltipAnchor Components.

@@ -107,9 +105,9 @@ import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system

- Declare the GlobalTooltip at the - root level of your document (e.g. in index.js or App.js) so it is - accessible throughout and will not get buried in the DOM tree. + Declare the GlobalTooltip at the root level of your + document (e.g. in index.js or App.js) so it is accessible throughout and will not get + buried in the DOM tree.
@@ -125,17 +123,15 @@ import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system
- Then, wrap your desired anchor with a{" "} - TooltipWrapper. The wrapper's id - should match the id in the dispatchCustomEvent call. This id must be + Then, wrap your desired anchor with a TooltipWrapper. + The wrapper's id should match the id in the dispatchCustomEvent call. This id must be unique for each tooltip.
- The tooltip component, passed in as{" "} - content to{" "} - TooltipWrapper, will be displayed - when a dispatchCustomEvent is called with its id. + The tooltip component, passed in as content to{" "} + TooltipWrapper, will be displayed when a + dispatchCustomEvent is called with its id.

- For a pre-styled tooltip that accepts a string and handles - dispatchCustomEvent and styling for you, use the{" "} - TooltipAnchor component. Be sure to + For a pre-styled tooltip that accepts a string and handles dispatchCustomEvent and styling + for you, use the TooltipAnchor component. Be sure to give it a unique id.
- +

@@ -221,9 +212,9 @@ import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system You can set a tooltip to appear in a set orientation using the{" "} horizontal and{" "} - vertical props. These can be - applied to both the TooltipWrapper{" "} - and the TooltipAnchor components. + vertical props. These can be applied to both the{" "} + TooltipWrapper and the{" "} + TooltipAnchor components.
@@ -312,11 +303,7 @@ import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system rows: [ { id: 1, - a: ( - - id - - ), + a: id, b: "string", c: "null", d: "Unique id to identify the tooltip.", @@ -391,11 +378,7 @@ import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system rows: [ { id: 1, - a: ( - - id - - ), + a: id, b: "string", c: "null", d: "Unique id to identify the tooltip.", diff --git a/pages/_/system/typography.js b/pages/_/system/typography.js index 180e606c..37d97053 100644 --- a/pages/_/system/typography.js +++ b/pages/_/system/typography.js @@ -2,7 +2,7 @@ import * as React from "react"; import * as System from "~/components/system"; import * as Constants from "~/common/constants"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; @@ -64,8 +64,8 @@ export default class SystemPageTypography extends React.Component {

- Import React and the typography components. If needed, import the - ViewSourceLink component. + Import React and the typography components. If needed, import the ViewSourceLink + component.
diff --git a/pages/_/test.js b/pages/_/test.js index b9880fbc..d9d4159e 100644 --- a/pages/_/test.js +++ b/pages/_/test.js @@ -1,7 +1,7 @@ import * as React from "react"; import * as System from "~/dist"; -import { css } from "@emotion/react"; +import { css } from "@emotion/core"; const STYLES_FILE_HIDDEN = css` height: 1px; @@ -56,23 +56,13 @@ export default class SlateReactSystemPage extends React.Component {

- If this works. That means the component library bundle is working - correctly. + If this works. That means the component library bundle is working correctly.

- - + + Upload file To network with API diff --git a/pages/_app.js b/pages/_app.js index 7ef21139..8f74dca2 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,7 +1,6 @@ import * as React from "react"; -import { CacheProvider, Global } from "@emotion/react"; -import { cache } from "@emotion/css"; +import { css, Global } from "@emotion/core"; import App from "next/app"; import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global"; @@ -10,11 +9,11 @@ import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/globa // https://nextjs.org/docs/advanced-features/custom-app function MyApp({ Component, pageProps }) { return ( - + - + ); } diff --git a/pages/_document.js b/pages/_document.js deleted file mode 100644 index bf72a87c..00000000 --- a/pages/_document.js +++ /dev/null @@ -1,34 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from "next/document"; - -import { extractCritical } from "@emotion/server"; - -export default class MyDocument extends Document { - static async getInitialProps(ctx) { - const initialProps = await Document.getInitialProps(ctx); - const styles = extractCritical(initialProps.html); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} -