LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

faster animations and copy button

This commit is contained in:
Robby Klein 2020-02-12 14:13:34 -08:00
parent 6d89dbaef8
commit a35d66a1cb
13 changed files with 300 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/sia-skynet/src/components/Footer/Footer.js
View File

@ -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 (
<Reveal effect="active">
<footer className="footer">
<div className="width">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<div className="footer-column">
<Built />
</div>
</Fade>
<div className="footer-column">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>Sia Elsewhere</h2>
<ul>
@ -48,7 +48,7 @@ export default function Footer() {
</div>
<div className="footer-column">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>Social</h2>
<ul>
<li>
@ -77,7 +77,7 @@ export default function Footer() {
</div>
<div className="footer-column">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>Stay up-to-date with Skynet updates</h2>
<Mailing id="check2" light />
</Fade>
@ -88,5 +88,5 @@ export default function Footer() {
<FooterOrb className="footer-orb fadeInUp delay2" />
</footer>
</Reveal>
)
);
}

18
packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js
View File

@ -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 (
<div className="home-built">
<header className="home-built-header">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<div className="home-built-divider">
<div className="small-divider" />
<div className="divider" />
@ -22,7 +22,7 @@ export default function HomeBuilt() {
<div className="small-divider" />
</div>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>
Infrastructure built for
<br />
@ -31,9 +31,9 @@ export default function HomeBuilt() {
</Fade>
</header>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<CodeExamples />
</Fade>
</div>
)
);
}

117
packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js
View File

@ -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 (
<div className="home-network">
<header className="home-network-header">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<div className="home-network-divider">
<CircleIcon>
<LogoSolid />
@ -40,7 +40,7 @@ export default class HomeNetwork extends Component {
<div className="small-divider"></div>
</div>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>
Sia
<br />
@ -49,16 +49,25 @@ export default class HomeNetwork extends Component {
</Fade>
</header>
<Fade distance="40px" bottom>
<VisibilitySensor onChange={this.onChange} partialVisibility offset={{ bottom: 100 }} scrollThrottle={50}>
<Fade duration={700} distance="40px" bottom>
<VisibilitySensor
onChange={this.onChange}
partialVisibility
offset={{ bottom: 100 }}
scrollThrottle={50}
>
<div className="home-network-stats">
{stats.map((stat, i) => (
<React.Fragment key={i}>
<div key={i} className="home-network-stat">
<div className="inner">
<h3>
{this.state.visable ? <CountUp end={stat.value} duration={3.2} /> : 0}
{stat.cent && '¢'}
{this.state.visable ? (
<CountUp end={stat.value} duration={3.2} />
) : (
0
)}
{stat.cent && "¢"}
</h3>
<span className="network-stat-name">{stat.name}</span>
</div>
@ -75,25 +84,31 @@ export default class HomeNetwork extends Component {
<div className="home-network-columns">
<div className="home-network-column left">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<p>
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.
</p>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<p>
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.
</p>
<p>
@ -104,41 +119,45 @@ export default class HomeNetwork extends Component {
</Fade>
</div>
<div className="home-network-column">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<FAQ title="What does pinning mean?">
<p>
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.
</p>
</FAQ>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<FAQ title="Is my data secure?">
<p>
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.
</p>
</FAQ>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<FAQ title="How does Sia compare to other decentralized storage solutions?">
<p>
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.
</p>
</FAQ>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<FAQ title="How long will my files be available?">
<p>
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.
</p>
</FAQ>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<a className="more more-faq" href="https://support.sia.tech/">
View more faq
<Arrow />
@ -147,6 +166,6 @@ export default class HomeNetwork extends Component {
</div>
</div>
</div>
)
);
}
}

41
packages/sia-skynet/src/components/HomeSamples/HomeSamples.js
View File

@ -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 (
<div className="home-samples">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<p>
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.
</p>
</Fade>
<Reveal effect="active">
<div className="home-samples-samples">
{samples.map((sample, i) => (
<Sample className={`fadeInUp delay${(i + 1) * 2}`} key={`${i}-${sample.url}`} {...sample} />
<Sample
className={`fadeInUp delay${i + 1}`}
key={`${i}-${sample.url}`}
{...sample}
/>
))}
</div>
</Reveal>
</div>
)
);
}

36
packages/sia-skynet/src/components/HomeStay/HomeStay.js
View File

@ -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 (
<div className="home-stay">
<header className="home-stay-header">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<div className="home-stay-divider">
<CircleIcon>
<Pyramid />
@ -20,7 +20,7 @@ export default class HomeStay extends Component {
<div className="small-divider" />
</div>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<h2>
Stay up to date with
<br />
@ -31,27 +31,27 @@ export default class HomeStay extends Component {
<div className="home-stay-flex">
<div className="home-stay-left">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<p>
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.
</p>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<Mailing id="check1" />
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<p className="disclaimer-text">
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.
</p>
</Fade>
</div>
<ul className="home-stay-right">
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="github"
@ -65,7 +65,7 @@ export default class HomeStay extends Component {
/>
</li>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="discord"
@ -75,7 +75,7 @@ export default class HomeStay extends Component {
/>
</li>
</Fade>
<Fade distance="40px" bottom>
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="twitter"
@ -88,6 +88,6 @@ export default class HomeStay extends Component {
</ul>
</div>
</div>
)
);
}
}

19
packages/sia-skynet/src/components/HomeTop/HomeTop.js
View File

@ -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() {
<h1 className="fadeInUp delay2">Build the Future Web.</h1>
<p className="fadeInUp delay4">Skynet is a decentralized file sharing and content distribution protocol.</p>
<p className="fadeInUp delay3">
Skynet is a decentralized file sharing and content distribution
protocol.
</p>
<Deco1 className="deco-1 fadeInUp delay8" />
<Deco2 className="deco-2 fadeInUp delay8" />
<Deco1 className="deco-1 fadeInUp delay6" />
<Deco2 className="deco-2 fadeInUp delay6" />
</div>
</Reveal>
)
);
}

10
packages/sia-skynet/src/components/HomeTop/HomeTop.scss
View File

@ -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) {

83
packages/sia-skynet/src/components/HomeUpload/HomeUpload.js
View File

@ -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: [
...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);
onComplete("complete", skylink);
} catch (error) {
onComplete('error');
}
})
onComplete("error");
}
});
};
render() {
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-box fadeInUp delay6">
<div className="home-upload-box fadeInUp delay4">
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames('home-upload-dashed', { 'drop-active': isDragActive })}
className={classNames("home-upload-dashed", {
"drop-active": isDragActive
})}
{...getRootProps()}
>
<span className="home-upload-text">Drag &amp; drop your file(s) here to pin</span>
<span className="home-upload-text">
Drag &amp; drop your file(s) here to pin
</span>
<Button>Browse</Button>
</div>
<input {...getInputProps()} className="offscreen" />
@ -77,22 +85,23 @@ export default class HomeUpload extends Component {
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />
return <UploadFile key={i} {...file} />;
})}
</div>
)}
</div>
<p className="bottom-text fadeInUp delay8">
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.
<p className="bottom-text fadeInUp delay5">
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.
</p>
<Deco3 className="deco-3 fadeInUp delay8" />
<Deco4 className="deco-4 fadeInUp delay8" />
<Deco5 className="deco-5 fadeInUp delay8" />
<Deco3 className="deco-3 fadeInUp delay6" />
<Deco4 className="deco-4 fadeInUp delay6" />
<Deco5 className="deco-5 fadeInUp delay6" />
</div>
</Reveal>
)
);
}
}

11
packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss
View File

@ -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);
}

69
packages/sia-skynet/src/components/UploadFile/UploadFile.js
View File

@ -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 <File />
} else if (status === 'error') {
return <FileError />
if (status === "uploading" || status === "processing") {
return <File />;
} else if (status === "error") {
return <FileError />;
} else {
return <FileCheck />
}
return <FileCheck />;
}
};
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 (
<div className="upload-file">
<div className="upload-file-icon">{this.getIcon()}</div>
<div className="upload-file-text">
<h3>{file.name}</h3>
<p>
{status === 'uploading' && 'Uploading...'}
{status === 'processing' && 'Processing...'}
{status === 'error' && <span className="red-text">Error processing file.</span>}
{status === 'complete' && (
{status === "uploading" && "Uploading..."}
{status === "processing" && "Processing..."}
{status === "error" && (
<span className="red-text">Error processing file.</span>
)}
{status === "complete" && (
<a href={url} className="url green-text">
{url}
</a>
)}
</p>
</div>
{(status === 'uploading' || status === 'processing') && (
{(status === "uploading" || status === "processing") && (
<div className="upload-file-loading">
<LoadingSpinner />
</div>
)}
{status === 'complete' && (
{status === "complete" && (
<button onClick={this.copyToClipboard} className="upload-file-copy">
<p className="upload-file-copy-tooltip">{copyText}</p>
<div className="upload-file-copy-button">
Copy Link
<Copy />
</div>
<textarea value={url} ref={this.urlRef} />
</button>
)}
</div>
)
);
}
}

32
packages/sia-skynet/src/components/UploadFile/UploadFile.scss
View File

@ -1,4 +1,4 @@
@import '../../variables.scss';
@import "../../variables.scss";
.upload-file {
display: flex;
@ -97,8 +97,36 @@
top: 100%;
left: 50%;
margin-left: -6px;
content: '';
content: "";
position: absolute;
box-shadow: 0 2px 8px 0 rgba(23, 25, 23, 0.2);
}
}
.upload-file-copy-button {
border: 1px solid $green;
border-radius: 3px;
color: $green;
line-height: 40px;
font-size: 13px;
padding: 0 10px;
display: inline-flex;
align-items: center;
font-weight: 700;
transition: 0.2s color, 0.2s background-color;
@media (min-width: $largebp) {
font-size: 14px;
padding: 0 15px;
line-height: 46px;
}
&:hover {
background-color: $green;
color: $white;
}
svg {
margin-left: 10px;
}
}

48
packages/sia-skynet/src/global.scss
View File

@ -1,41 +1,41 @@
@import './variables.scss';
@import "./variables.scss";
@font-face {
font-family: 'Haas Grot Disp';
src: url('/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2') format('woff2'),
url('/fonts/hinted-subset-HaasGrotDispR-55Roman.woff') format('woff');
font-family: "Haas Grot Disp";
src: url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Haas Grot Disp';
src: url('/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2') format('woff2'),
url('/fonts/hinted-subset-HaasGrotDispR-65Medium.woff') format('woff');
font-family: "Haas Grot Disp";
src: url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Haas Grot Text';
src: url('/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2') format('woff2'),
url('/fonts/hinted-subset-HaasGrotTextR-75Bold.woff') format('woff');
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Haas Grot Text';
src: url('/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2') format('woff2'),
url('/fonts/hinted-subset-HaasGrotTextR-65Medium.woff') format('woff');
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Haas Grot Text';
src: url('/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2') format('woff2'),
url('/fonts/hinted-subset-HaasGrotTextR-55Roman.woff') format('woff');
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@ -88,10 +88,10 @@ textarea {
font-size: 16px;
}
input[type='email'],
input[type='text'],
input[type='password'],
input[type='search'] {
input[type="email"],
input[type="text"],
input[type="password"],
input[type="search"] {
display: block;
width: 100%;
}
@ -99,9 +99,9 @@ input[type='search'] {
a,
button,
label,
input[type='submit'],
input[type='checkbox'],
input[type='radio'] {
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
cursor: pointer;
}
@ -181,7 +181,7 @@ svg {
.fadeInUp {
transform: translateY(40px);
opacity: 0;
transition: 1s opacity, 1s transform;
transition: 0.7s opacity, 0.7s transform;
.active & {
opacity: 1;

9
packages/sia-skynet/src/svg/Copy.js
View File

@ -1,17 +1,16 @@
import React from 'react'
import React from "react";
export default function Copy(props) {
return (
<svg width={18} height={18} viewBox="0 0 18 18" {...props}>
<svg width={12} height={14} viewBox="0 0 12 14" {...props}>
<path
d="M15 13v2a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2h2m2.464 3.293L6.05 7.707a3 3 0 104.243 4.243l1.414-1.414h0m-1.414-7.072l1.414-1.414a3 3 0 114.243 4.243l-1.414 1.414h0M8.879 9.121L13.12 4.88"
d="M8 1H4a3 3 0 00-3 3v6h0m4-6h5a1 1 0 011 1v7a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z"
stroke="currentColor"
strokeWidth={2}
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
);
}