Merge pull request #6 from NebulousLabs/robbys2

Creates the retrieve file box up top
This commit is contained in:
Karol Wypchło 2020-02-13 18:34:38 -05:00 committed by GitHub
commit c3c39a5969
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 289 additions and 73 deletions

View File

@ -1,28 +1,41 @@
import React from 'react' import React from "react";
import classNames from 'classnames' import classNames from "classnames";
import './Button.scss' import "./Button.scss";
export default function Button({ href, type, children, full, className, ...rest }) { export default function Button({
const classes = classNames('button', { full }, className) href,
type,
children,
full,
className,
iconLeft,
iconRight,
...rest
}) {
const classes = classNames(
"button",
{ iconLeft, iconRight, full },
className
);
if (href) { if (href) {
return ( return (
<a href={href} className={classes} {...rest}> <a href={href} className={classes} {...rest}>
{children} {children}
</a> </a>
) );
} else if (type) { } else if (type) {
return ( return (
<button type={type} className={classes} {...rest}> <button type={type} className={classes} {...rest}>
{children} {children}
</button> </button>
) );
} else { } else {
return ( return (
<button type="button" className={classes} {...rest}> <button type="button" className={classes} {...rest}>
{children} {children}
</button> </button>
) );
} }
} }

View File

@ -1,4 +1,4 @@
@import '../../variables.scss'; @import "../../variables.scss";
.button { .button {
display: inline-block; display: inline-block;
@ -19,4 +19,18 @@
background-color: $greenHover; background-color: $greenHover;
transform: translateY(-2px); transform: translateY(-2px);
} }
svg {
display: inline-block;
vertical-align: middle;
margin-top: -2px;
}
&.iconLeft svg {
margin-right: 12px;
}
&.iconRight svg {
margin-left: 12px;
}
} }

View File

@ -4,7 +4,7 @@ import Dropzone from "react-dropzone";
import Reveal from "react-reveal/Reveal"; import Reveal from "react-reveal/Reveal";
import { Button, UploadFile } from "../"; import { Button, UploadFile } from "../";
import { Deco3, Deco4, Deco5 } from "../../svg"; import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
import "./HomeUpload.scss"; import "./HomeUpload.scss";
export default class HomeUpload extends Component { export default class HomeUpload extends Component {
@ -58,37 +58,71 @@ export default class HomeUpload extends Component {
}); });
}; };
handleSkylink = (event) => {
event.preventDefault();
const skylink = event.target.skylink.value.replace('sia://', '');
if(skylink.length === 46) {
window.open(`/${event.target.skylink.value}`, '_blank');
}
}
render() { render() {
return ( return (
<Reveal effect="active"> <Reveal effect="active">
<div className="home-upload"> <div className="home-upload">
<div className="home-upload-box fadeInUp delay4"> <div className="home-upload-white fadeInUp delay4">
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}> <div className="home-upload-split">
{({ getRootProps, getInputProps, isDragActive }) => ( <div className="home-upload-box ">
<> <Dropzone
<div onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
className={classNames("home-upload-dashed", { >
"drop-active": isDragActive {({ getRootProps, getInputProps, isDragActive }) => (
})} <>
{...getRootProps()} <div
> className={classNames("home-upload-dropzone", {
<span className="home-upload-text"> "drop-active": isDragActive
Drag &amp; drop your file(s) here to pin })}
</span> {...getRootProps()}
<Button>Browse</Button> >
</div> <span className="home-upload-text">
<input {...getInputProps()} className="offscreen" /> <h3>Pin a File</h3>
</> Drag &amp; drop your file(s) here to pin
)} </span>
</Dropzone> <Button iconLeft>
<Folder />
Browse
</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
)}
</Dropzone>
{this.state.files.length > 0 && ( {this.state.files.length > 0 && (
<div className="home-uploaded-files"> <div className="home-uploaded-files">
{this.state.files.map((file, i) => { {this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />; return <UploadFile key={i} {...file} />;
})} })}
</div>
)}
</div> </div>
)}
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3>Have a Skylink?</h3>
<p>Enter the ID to retrieve the file</p>
<form className="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
<input name="skylink" type="text" placeholder="sia://" />
<button type="submit">
<DownArrow />
</button>
</form>
</div>
</div>
</div>
</div> </div>
<p className="bottom-text fadeInUp delay5"> <p className="bottom-text fadeInUp delay5">

View File

@ -16,26 +16,47 @@
} }
} }
.home-upload-box { .home-upload-white {
transition: 0.2s background-color, 0.2s border, 0.2s color;
background: $white; background: $white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15),
0 2px 4px 0 rgba(0, 0, 0, 0.05); 0 2px 4px 0 rgba(0, 0, 0, 0.05);
padding: 16px; padding: 16px;
opacity: 0;
transform: translateY(40px);
transition: 0.7s opacity, 0.7s transform;
} }
.home-upload-dashed { .home-upload-split {
border: 1px dashed #c5cec7; border: 1px dashed #c5cec7;
border-radius: 4px; border-radius: 4px;
padding: 0 20px; padding: 20px;
height: 210px;
@media (min-width: $largebp) {
display: flex;
}
}
.home-upload-box {
padding-bottom: 20px;
@media (min-width: $largebp) {
width: 50%;
padding-bottom: 0;
padding-right: 20px;
}
}
.home-upload-dropzone {
border-radius: 4px;
height: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
outline: none; outline: none;
transition: 0.2s background-color, 0.2s border, 0.2s color;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
@ -51,13 +72,21 @@
background-color: $green; background-color: $green;
border: 1px solid $green; border: 1px solid $green;
h3 {
color: $white;
}
.button { .button {
display: none; display: none;
} }
} }
.button { .button {
margin-top: 15px; margin-top: 20px;
@media (min-width: $largebp) {
margin-top: 30px;
}
} }
} }
@ -65,14 +94,25 @@
color: $gray; color: $gray;
display: block; display: block;
transition: 0.2s color; transition: 0.2s color;
font-size: 13px;
@media (min-width: $largebp) { @media (min-width: $largebp) {
font-size: 18px; font-size: 14px;
} }
.drop-active & { .drop-active & {
color: $white; color: $white;
} }
h3 {
font-size: 16px;
margin-bottom: 5px;
color: $darkGray;
@media (min-width: $largebp) {
font-size: 18px;
}
}
} }
.deco-3 { .deco-3 {
@ -110,3 +150,82 @@
border-top: 1px solid rgba(197, 206, 199, 0.4); border-top: 1px solid rgba(197, 206, 199, 0.4);
} }
} }
.home-upload-retrieve {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
border-top: 1px dashed #c5cec7;
height: 200px;
padding: 40px 20px;
@media (min-width: $largebp) {
width: 50%;
padding: 20px 40px;
border-top: 0;
border-left: 1px dashed #c5cec7;
}
.home-upload-text {
width: 100%;
}
}
.home-upload-retrieve-form {
width: 100%;
margin-top: 3px;
position: relative;
margin-top: 20px;
@media (min-width: $largebp) {
margin-top: 30px;
}
input {
border: 1px solid #cbd3cd;
border-radius: 4px;
line-height: 46px;
transition: 0.2s border-color;
padding: 0 64px 0 16px;
font-size: 13px;
@media (min-width: $largebp) {
font-size: 14px;
}
}
input:hover,
input:hover + button {
border-color: rgb(143, 143, 143);
}
input:focus,
input:focus + button {
border-color: $green;
}
button {
border-left: 1px solid #cbd3cd;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width: 46px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
color: #cbd3cd;
transition: 0.2s background-color, 0.2s border-color, 0.2s color;
&:hover {
background: $green;
color: $white;
border-color: $green;
}
}
}

View File

@ -1,4 +1,4 @@
import React, { Component } from 'react' import React from 'react'
import MailchimpSubscribe from 'react-mailchimp-subscribe' import MailchimpSubscribe from 'react-mailchimp-subscribe'
import classNames from 'classnames' import classNames from 'classnames'

View File

@ -0,0 +1,17 @@
import React from "react";
export default function DownArrow(props) {
return (
<svg width={12} height={13} viewBox="0 0 12 13" {...props}>
<path
d="M6 1v11M1 7l5 5 5-5"
stroke="currentColor"
strokeWidth={2}
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

View File

@ -0,0 +1,15 @@
import React from "react";
export default function Folder(props) {
return (
<svg width={14} height={12} viewBox="0 0 14 12" {...props}>
<path
d="M2 1h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 008.414 3H12a1 1 0 011 1v6a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1z"
stroke="currentColor"
strokeWidth={2}
fill="none"
fillRule="evenodd"
/>
</svg>
);
}

View File

@ -1,32 +1,34 @@
import Logo from './Logo' import Logo from "./Logo";
import Download from './Download' import Download from "./Download";
import DoubleRight from './DoubleRight' import DoubleRight from "./DoubleRight";
import Github from './Github' import Github from "./Github";
import Twitter from './Twitter' import Twitter from "./Twitter";
import Discord from './Discord' import Discord from "./Discord";
import Arrow from './Arrow' import Arrow from "./Arrow";
import Cylinder from './Cylinder' import Cylinder from "./Cylinder";
import SmallOrb from './SmallOrb' import SmallOrb from "./SmallOrb";
import Pyramid from './Pyramid' import Pyramid from "./Pyramid";
import LogoSolid from './LogoSolid' import LogoSolid from "./LogoSolid";
import File from './File' import File from "./File";
import FileCheck from './FileCheck' import FileCheck from "./FileCheck";
import FileError from './FileError' import FileError from "./FileError";
import Loading from './Loading' import Loading from "./Loading";
import Skynet from './Skynet' import Skynet from "./Skynet";
import Copy from './Copy' import Copy from "./Copy";
import FooterOrb from './FooterOrb' import FooterOrb from "./FooterOrb";
import FooterCube from './FooterCube' import FooterCube from "./FooterCube";
import Built from './Built' import Built from "./Built";
import DownArrow from "./DownArrow";
import Folder from "./Folder";
import Deco1 from './Deco1' import Deco1 from "./Deco1";
import Deco2 from './Deco2' import Deco2 from "./Deco2";
import Deco3 from './Deco3' import Deco3 from "./Deco3";
import Deco4 from './Deco4' import Deco4 from "./Deco4";
import Deco5 from './Deco5' import Deco5 from "./Deco5";
import Deco6 from './Deco6' import Deco6 from "./Deco6";
import Deco7 from './Deco7' import Deco7 from "./Deco7";
import Deco8 from './Deco8' import Deco8 from "./Deco8";
export { export {
Logo, Logo,
@ -49,6 +51,8 @@ export {
FooterOrb, FooterOrb,
FooterCube, FooterCube,
Built, Built,
DownArrow,
Folder,
Deco1, Deco1,
Deco2, Deco2,
Deco3, Deco3,
@ -56,5 +60,5 @@ export {
Deco5, Deco5,
Deco6, Deco6,
Deco7, Deco7,
Deco8, Deco8
} };