From a35d66a1cb3b02bf5ba2587d3f56634cb2574b9b Mon Sep 17 00:00:00 2001 From: Robby Klein Date: Wed, 12 Feb 2020 14:13:34 -0800 Subject: [PATCH 1/2] faster animations and copy button --- .../src/components/Footer/Footer.js | 22 ++-- .../src/components/HomeBuilt/HomeBuilt.js | 18 +-- .../src/components/HomeNetwork/HomeNetwork.js | 117 ++++++++++-------- .../src/components/HomeSamples/HomeSamples.js | 41 +++--- .../src/components/HomeStay/HomeStay.js | 36 +++--- .../src/components/HomeTop/HomeTop.js | 19 +-- .../src/components/HomeTop/HomeTop.scss | 10 +- .../src/components/HomeUpload/HomeUpload.js | 89 +++++++------ .../src/components/HomeUpload/HomeUpload.scss | 11 +- .../src/components/UploadFile/UploadFile.js | 71 ++++++----- .../src/components/UploadFile/UploadFile.scss | 32 ++++- packages/sia-skynet/src/global.scss | 48 +++---- packages/sia-skynet/src/svg/Copy.js | 9 +- 13 files changed, 300 insertions(+), 223 deletions(-) diff --git a/packages/sia-skynet/src/components/Footer/Footer.js b/packages/sia-skynet/src/components/Footer/Footer.js index 96f96cff..578df28a 100644 --- a/packages/sia-skynet/src/components/Footer/Footer.js +++ b/packages/sia-skynet/src/components/Footer/Footer.js @@ -1,24 +1,24 @@ -import React from 'react' -import Fade from 'react-reveal/Fade' -import Reveal from 'react-reveal/Reveal' +import React from "react"; +import Fade from "react-reveal/Fade"; +import Reveal from "react-reveal/Reveal"; -import { Arrow, FooterOrb, FooterCube, Built } from '../../svg' -import './Footer.scss' -import { Mailing } from '..' +import { Arrow, FooterOrb, FooterCube, Built } from "../../svg"; +import "./Footer.scss"; +import { Mailing } from ".."; export default function Footer() { return (
- +
- +

Sia Elsewhere

    @@ -48,7 +48,7 @@ export default function Footer() {
- +

Social

  • @@ -77,7 +77,7 @@ export default function Footer() {
- +

Stay up-to-date with Skynet updates

 @@ -88,5 +88,5 @@ export default function Footer() {
- ) + ); } diff --git a/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js index 9950bb14..4bec746f 100644 --- a/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js +++ b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js @@ -1,15 +1,15 @@ -import React from 'react' -import Fade from 'react-reveal/Fade' +import React from "react"; +import Fade from "react-reveal/Fade"; -import './HomeBuilt.scss' -import { CircleIcon, CodeExamples } from '../' -import { Cylinder, SmallOrb } from '../../svg' +import "./HomeBuilt.scss"; +import { CircleIcon, CodeExamples } from "../"; +import { Cylinder, SmallOrb } from "../../svg"; export default function HomeBuilt() { return (
- +
@@ -22,7 +22,7 @@ export default function HomeBuilt() {
- +

Infrastructure built for
@@ -31,9 +31,9 @@ export default function HomeBuilt() {

- +
- ) + ); } diff --git a/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js index b2734321..4e210c4a 100644 --- a/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js +++ b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js @@ -1,36 +1,36 @@ -import React, { Component } from 'react' -import CountUp from 'react-countup' -import VisibilitySensor from 'react-visibility-sensor' -import Fade from 'react-reveal/Fade' +import React, { Component } from "react"; +import CountUp from "react-countup"; +import VisibilitySensor from "react-visibility-sensor"; +import Fade from "react-reveal/Fade"; -import './HomeNetwork.scss' -import { CircleIcon, FAQ } from '../' -import { SmallOrb, LogoSolid, Arrow, Deco6, Deco7, Deco8 } from '../../svg' +import "./HomeNetwork.scss"; +import { CircleIcon, FAQ } from "../"; +import { SmallOrb, LogoSolid, Arrow, Deco6, Deco7, Deco8 } from "../../svg"; const stats = [ - { name: 'TB Used', value: 664 }, - { name: 'TB Capacity', value: 2315 }, - { name: 'Hosts', value: 335 }, - { name: 'Storage/TB', value: 91, cent: true }, - { name: 'Bandwidth/TB', value: 18, cent: true }, -] + { name: "TB Used", value: 664 }, + { name: "TB Capacity", value: 2315 }, + { name: "Hosts", value: 335 }, + { name: "Storage/TB", value: 91, cent: true }, + { name: "Bandwidth/TB", value: 18, cent: true } +]; export default class HomeNetwork extends Component { state = { - visable: false, - } + visable: false + }; onChange = isVisible => { if (isVisible && !this.state.visable) { - this.setState({ visable: true }) + this.setState({ visable: true }); } - } + }; render() { return (
- +
@@ -40,7 +40,7 @@ export default class HomeNetwork extends Component {
- +

Sia
@@ -49,16 +49,25 @@ export default class HomeNetwork extends Component {

- - + +
{stats.map((stat, i) => (

- {this.state.visable ? : 0} - {stat.cent && '¢'} + {this.state.visable ? ( + + ) : ( + 0 + )} + {stat.cent && "¢"}

{stat.name}
@@ -75,25 +84,31 @@ export default class HomeNetwork extends Component {
- +

- Skynet Webportal is a low cost server that sits between Skynet and everyday users, enabling them to - access Skynet content without needing to operate any special software. Once the Skylinks are generated, - they can be shared with anyone to fetch data from Skynet. The original uploader does not need to stay - online in order for the file to remain available. The Sia network handles all of the pinning, - guaranteeing both high speeds and excellent uptime. A typical Skynet download starts in under 500 - milliseconds and can stream at rates as high as 1 gigabit per second. The Sia network serves as the - backend storage layer for Skynet. + Skynet Webportal is a low cost server that sits between Skynet + and everyday users, enabling them to access Skynet content + without needing to operate any special software. Once the + Skylinks are generated, they can be shared with anyone to fetch + data from Skynet. The original uploader does not need to stay + online in order for the file to remain available. The Sia + network handles all of the pinning, guaranteeing both high + speeds and excellent uptime. A typical Skynet download starts in + under 500 milliseconds and can stream at rates as high as 1 + gigabit per second. The Sia network serves as the backend + storage layer for Skynet.

- +

- Sia is the leading decentralized cloud storage platform. No signups, no servers, no trusted third - parties. Sia leverages blockchain technology to create a data storage marketplace that is more robust - and more affordable than traditional cloud storage providers. Storage costs are as much as 10x lower - than traditional infrastructure, bandwidth costs as much as 100x lower, all without sacrificing - performance or reliability. + Sia is the leading decentralized cloud storage platform. No + signups, no servers, no trusted third parties. Sia leverages + blockchain technology to create a data storage marketplace that + is more robust and more affordable than traditional cloud + storage providers. Storage costs are as much as 10x lower than + traditional infrastructure, bandwidth costs as much as 100x + lower, all without sacrificing performance or reliability.

@@ -104,41 +119,45 @@ export default class HomeNetwork extends Component {

- +

- Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer - took a galley of type and scrambled it to make. + Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type + and scrambled it to make.

- +

- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Sed posuere consectetur est at lobortis.

- +

- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Sed posuere consectetur est at lobortis.

- +

- Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer - took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book.

- + View more faq @@ -147,6 +166,6 @@ export default class HomeNetwork extends Component {
- ) + ); } } diff --git a/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js index 96658b57..9d9efa4d 100644 --- a/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js +++ b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js @@ -1,37 +1,42 @@ -import React from 'react' -import Fade from 'react-reveal/Fade' -import Reveal from 'react-reveal/Reveal' +import React from "react"; +import Fade from "react-reveal/Fade"; +import Reveal from "react-reveal/Reveal"; -import './HomeSamples.scss' -import { Sample } from '../' +import "./HomeSamples.scss"; +import { Sample } from "../"; const samples = [ - { type: 'HTML', url: '#' }, - { type: 'PDF', url: '#' }, - { type: 'Image', url: '#' }, - { type: 'Audio', url: '#' }, - { type: 'Video', url: '#' }, - { type: 'JSON', url: '#' }, - { type: 'Dapps', url: '#' }, -] + { type: "HTML", url: "#" }, + { type: "PDF", url: "#" }, + { type: "Image", url: "#" }, + { type: "Audio", url: "#" }, + { type: "Video", url: "#" }, + { type: "JSON", url: "#" }, + { type: "Dapps", url: "#" } +]; export default function HomeSamples() { return (
- +

- Skynet has SDKs for popular programming languages which integrate seamlessly with existing applications. Above - are a few code snippets for uploading and downloading data from Skynet. + Skynet has SDKs for popular programming languages which integrate + seamlessly with existing applications. Above are a few code snippets + for uploading and downloading data from Skynet.

{samples.map((sample, i) => ( - + ))}
- ) + ); } diff --git a/packages/sia-skynet/src/components/HomeStay/HomeStay.js b/packages/sia-skynet/src/components/HomeStay/HomeStay.js index 136aa15d..6e3263b3 100644 --- a/packages/sia-skynet/src/components/HomeStay/HomeStay.js +++ b/packages/sia-skynet/src/components/HomeStay/HomeStay.js @@ -1,16 +1,16 @@ -import React, { Component } from 'react' -import Fade from 'react-reveal/Fade' +import React, { Component } from "react"; +import Fade from "react-reveal/Fade"; -import './HomeStay.scss' -import { SocialLink, CircleIcon, Mailing } from '../' -import { SmallOrb, Pyramid } from '../../svg' +import "./HomeStay.scss"; +import { SocialLink, CircleIcon, Mailing } from "../"; +import { SmallOrb, Pyramid } from "../../svg"; export default class HomeStay extends Component { render() { return (
- +
@@ -20,7 +20,7 @@ export default class HomeStay extends Component {
- +

Stay up to date with
@@ -31,27 +31,27 @@ export default class HomeStay extends Component {
- +

- Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac - facilisis in. + Integer posuere erat a ante venenatis dapibus posuere velit + aliquet. Cras justo odio, dapibus ac facilisis in.

- + - +

- Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac - facilisis in. + Integer posuere erat a ante venenatis dapibus posuere velit + aliquet. Cras justo odio, dapibus ac facilisis in.

    - +
    • - +
    • - +

- ) + ); } } diff --git a/packages/sia-skynet/src/components/HomeTop/HomeTop.js b/packages/sia-skynet/src/components/HomeTop/HomeTop.js index 74bbfd71..05cd71c4 100644 --- a/packages/sia-skynet/src/components/HomeTop/HomeTop.js +++ b/packages/sia-skynet/src/components/HomeTop/HomeTop.js @@ -1,8 +1,8 @@ -import React from 'react' -import Reveal from 'react-reveal/Reveal' +import React from "react"; +import Reveal from "react-reveal/Reveal"; -import './HomeTop.scss' -import { Skynet, Deco1, Deco2 } from '../../svg' +import "./HomeTop.scss"; +import { Skynet, Deco1, Deco2 } from "../../svg"; export default function HomeTop() { return ( @@ -12,11 +12,14 @@ export default function HomeTop() {

Build the Future Web.

-

Skynet is a decentralized file sharing and content distribution protocol.

+

+ Skynet is a decentralized file sharing and content distribution + protocol. +

- - + +
- ) + ); } diff --git a/packages/sia-skynet/src/components/HomeTop/HomeTop.scss b/packages/sia-skynet/src/components/HomeTop/HomeTop.scss index c2039359..b2b32b22 100644 --- a/packages/sia-skynet/src/components/HomeTop/HomeTop.scss +++ b/packages/sia-skynet/src/components/HomeTop/HomeTop.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@import "../../variables.scss"; .home-top { text-align: center; @@ -47,8 +47,8 @@ .deco-1 { position: absolute; left: 100%; - bottom: 54%; - margin-left: -20px; + bottom: 25%; + margin-left: 20px; animation: 6s float infinite; @media (min-width: 591px) { @@ -59,8 +59,8 @@ .deco-2 { position: absolute; left: 100%; - bottom: 34%; - margin-left: -40px; + bottom: 5%; + margin-left: -15px; animation: 8s float infinite; @media (min-width: 591px) { diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js index ea97c59a..f38f4264 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -1,43 +1,47 @@ -import React, { Component } from 'react' -import classNames from 'classnames' -import Dropzone from 'react-dropzone' -import Reveal from 'react-reveal/Reveal' +import React, { Component } from "react"; +import classNames from "classnames"; +import Dropzone from "react-dropzone"; +import Reveal from "react-reveal/Reveal"; -import { Button, UploadFile } from '../' -import { Deco3, Deco4, Deco5 } from '../../svg' -import './HomeUpload.scss' +import { Button, UploadFile } from "../"; +import { Deco3, Deco4, Deco5 } from "../../svg"; +import "./HomeUpload.scss"; export default class HomeUpload extends Component { - state = { files: [] } + state = { files: [] }; handleDrop = async acceptedFiles => { this.setState({ files: [ ...acceptedFiles.map(file => { - return { file, status: 'uploading' } + return { file, status: "uploading" }; }), - ...this.state.files, - ], - }) + ...this.state.files + ] + }); - acceptedFiles.forEach(async (file) => { - const url = `https://siasky.net/api/skyfile?filename=${file.name}` - const fd = new FormData() - fd.append("file", file) + acceptedFiles.forEach(async file => { + const url = `https://siasky.net/api/skyfile?filename=${file.name}`; + const fd = new FormData(); + fd.append("file", file); const onComplete = (status, skylink) => { - this.setState((state) => { - const index = state.files.findIndex((f) => f.file === file); + this.setState(state => { + const index = state.files.findIndex(f => f.file === file); - return { - files: [ + return { + files: [ ...state.files.slice(0, index), - { ...state.files[index], status, url: `https://siasky.net/${skylink}` }, + { + ...state.files[index], + status, + url: `https://siasky.net/${skylink}` + }, ...state.files.slice(index + 1) ] - } - }) - } + }; + }); + }; try { const response = await fetch(url, { @@ -47,26 +51,30 @@ export default class HomeUpload extends Component { }); const { skylink } = await response.json(); - onComplete('complete', skylink); - } catch(error) { - onComplete('error'); + onComplete("complete", skylink); + } catch (error) { + onComplete("error"); } - }) - } + }); + }; render() { return (
-
+
this.handleDrop(acceptedFiles)}> {({ getRootProps, getInputProps, isDragActive }) => ( <>
- Drag & drop your file(s) here to pin + + Drag & drop your file(s) here to pin +
@@ -77,22 +85,23 @@ export default class HomeUpload extends Component { {this.state.files.length > 0 && (
{this.state.files.map((file, i) => { - return + return ; })}
)}
-

- Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared - with anyone to fetch the file from Skynet. +

+ Once a file has been uploaded, a 46 byte link called a 'Skylink' is + generated. That link can then be shared with anyone to fetch the + file from Skynet.

- - - + + +
- ) + ); } } diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss index 567701cc..90bcd0db 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@import "../../variables.scss"; .home-upload { position: relative; @@ -19,7 +19,8 @@ .home-upload-box { background: $white; border-radius: 12px; - box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), + 0 2px 4px 0 rgba(0, 0, 0, 0.05); padding: 16px; } @@ -97,10 +98,14 @@ .home-uploaded-files { border: solid 1px #c5cec7; - padding: 0 40px; + padding: 0 20px; margin-top: 10px; border-radius: 4px; + @media (min-width: $largebp) { + padding: 0 40px; + } + .upload-file + .upload-file { border-top: 1px solid rgba(197, 206, 199, 0.4); } diff --git a/packages/sia-skynet/src/components/UploadFile/UploadFile.js b/packages/sia-skynet/src/components/UploadFile/UploadFile.js index 75db53bf..3683835d 100644 --- a/packages/sia-skynet/src/components/UploadFile/UploadFile.js +++ b/packages/sia-skynet/src/components/UploadFile/UploadFile.js @@ -1,73 +1,82 @@ -import React, { Component } from 'react' +import React, { Component } from "react"; -import './UploadFile.scss' -import { LoadingSpinner } from '../' -import { File, FileCheck, FileError, Copy } from '../../svg' +import "./UploadFile.scss"; +import { LoadingSpinner } from "../"; +import { File, FileCheck, FileError, Copy } from "../../svg"; export default class UploadFile extends Component { state = { - copied: false, - } + copied: false + }; getIcon = () => { - const { status } = this.props + // const { status } = this.props; + const status = "complete"; - if (status === 'uploading' || status === 'processing') { - return - } else if (status === 'error') { - return + if (status === "uploading" || status === "processing") { + return ; + } else if (status === "error") { + return ; } else { - return + return ; } - } + }; copyToClipboard = e => { - this.urlRef.current.select() - document.execCommand('copy') - e.target.focus() + this.urlRef.current.select(); + document.execCommand("copy"); + e.target.focus(); this.setState({ copied: true }, () => { setTimeout(() => { - this.setState({ copied: false }) - }, 1500) - }) - } + this.setState({ copied: false }); + }, 1500); + }); + }; - urlRef = React.createRef() + urlRef = React.createRef(); render() { - const { file, url, status } = this.props - const copyText = this.state.copied ? 'Copied!' : 'Copy to clipboard' + const { file, url } = this.props; + + const status = "complete"; + + const copyText = this.state.copied ? "Copied!" : "Copy to clipboard"; return (
{this.getIcon()}
 - {(status === 'uploading' || status === 'processing') && ( + {(status === "uploading" || status === "processing") && (
)} - {status === 'complete' && ( + {status === "complete" && (