From bb67bdcfcc3b4fc214ac614ebe8382d87f3e231b Mon Sep 17 00:00:00 2001 From: Robby Klein Date: Thu, 13 Feb 2020 14:07:42 -0800 Subject: [PATCH 1/4] retrieve file --- .../src/components/Button/Button.js | 29 +++-- .../src/components/Button/Button.scss | 16 ++- .../src/components/HomeUpload/HomeUpload.js | 76 +++++++---- .../src/components/HomeUpload/HomeUpload.scss | 123 +++++++++++++++++- packages/sia-skynet/src/svg/DownArrow.js | 17 +++ packages/sia-skynet/src/svg/Folder.js | 15 +++ packages/sia-skynet/src/svg/index.js | 64 ++++----- 7 files changed, 269 insertions(+), 71 deletions(-) create mode 100644 packages/sia-skynet/src/svg/DownArrow.js create mode 100644 packages/sia-skynet/src/svg/Folder.js diff --git a/packages/sia-skynet/src/components/Button/Button.js b/packages/sia-skynet/src/components/Button/Button.js index 9bad3f96..3731cddd 100644 --- a/packages/sia-skynet/src/components/Button/Button.js +++ b/packages/sia-skynet/src/components/Button/Button.js @@ -1,28 +1,41 @@ -import React from 'react' -import classNames from 'classnames' +import React from "react"; +import classNames from "classnames"; -import './Button.scss' +import "./Button.scss"; -export default function Button({ href, type, children, full, className, ...rest }) { - const classes = classNames('button', { full }, className) +export default function Button({ + href, + type, + children, + full, + className, + iconLeft, + iconRight, + ...rest +}) { + const classes = classNames( + "button", + { iconLeft, iconRight, full }, + className + ); if (href) { return ( {children} - ) + ); } else if (type) { return ( - ) + ); } else { return ( - ) + ); } } diff --git a/packages/sia-skynet/src/components/Button/Button.scss b/packages/sia-skynet/src/components/Button/Button.scss index bc270d88..d382ab34 100644 --- a/packages/sia-skynet/src/components/Button/Button.scss +++ b/packages/sia-skynet/src/components/Button/Button.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@import "../../variables.scss"; .button { display: inline-block; @@ -19,4 +19,18 @@ background-color: $greenHover; transform: translateY(-2px); } + + svg { + display: inline-block; + vertical-align: middle; + margin-top: -2px; + } + + &.iconLeft svg { + margin-right: 12px; + } + + &.iconRight svg { + margin-left: 12px; + } } diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js index 96aa152e..79106db3 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -4,7 +4,7 @@ import Dropzone from "react-dropzone"; import Reveal from "react-reveal/Reveal"; import { Button, UploadFile } from "../"; -import { Deco3, Deco4, Deco5 } from "../../svg"; +import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg"; import "./HomeUpload.scss"; export default class HomeUpload extends Component { @@ -62,33 +62,57 @@ export default class HomeUpload extends Component { return (
-
- this.handleDrop(acceptedFiles)}> - {({ getRootProps, getInputProps, isDragActive }) => ( - <> -
- - Drag & drop your file(s) here to pin - - -
- - - )} - +
+
+
+ this.handleDrop(acceptedFiles)} + > + {({ getRootProps, getInputProps, isDragActive }) => ( + <> +
+ +

Pin a File

+ Drag & drop your file(s) here to pin + + +
+ + + )} + - {this.state.files.length > 0 && ( -
- {this.state.files.map((file, i) => { - return ; - })} + {this.state.files.length > 0 && ( +
+ {this.state.files.map((file, i) => { + return ; + })} +
+ )}
- )} + +
+
+

Have a File ID?

+

Enter the ID to retrieve the file

+ +
+ + +
+
+
+

diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss index 90bcd0db..bcfbc887 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss @@ -16,26 +16,47 @@ } } -.home-upload-box { +.home-upload-white { + transition: 0.2s background-color, 0.2s border, 0.2s color; 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); 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-radius: 4px; - padding: 0 20px; - height: 210px; + padding: 20px; + + @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; flex-direction: column; justify-content: center; align-items: center; text-align: center; outline: none; - transition: 0.2s background-color, 0.2s border, 0.2s color; &:hover { background-color: rgba(0, 0, 0, 0.03); @@ -51,6 +72,10 @@ background-color: $green; border: 1px solid $green; + h3 { + color: $white; + } + .button { display: none; } @@ -65,14 +90,25 @@ color: $gray; display: block; transition: 0.2s color; + font-size: 13px; @media (min-width: $largebp) { - font-size: 18px; + font-size: 14px; } .drop-active & { color: $white; } + + h3 { + font-size: 16px; + margin-bottom: 5px; + color: $darkGray; + + @media (min-width: $largebp) { + font-size: 18px; + } + } } .deco-3 { @@ -110,3 +146,78 @@ 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: 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; + } + } +} diff --git a/packages/sia-skynet/src/svg/DownArrow.js b/packages/sia-skynet/src/svg/DownArrow.js new file mode 100644 index 00000000..b7085fb6 --- /dev/null +++ b/packages/sia-skynet/src/svg/DownArrow.js @@ -0,0 +1,17 @@ +import React from "react"; + +export default function DownArrow(props) { + return ( + + + + ); +} diff --git a/packages/sia-skynet/src/svg/Folder.js b/packages/sia-skynet/src/svg/Folder.js new file mode 100644 index 00000000..70155a5d --- /dev/null +++ b/packages/sia-skynet/src/svg/Folder.js @@ -0,0 +1,15 @@ +import React from "react"; + +export default function Folder(props) { + return ( + + + + ); +} diff --git a/packages/sia-skynet/src/svg/index.js b/packages/sia-skynet/src/svg/index.js index 1f3fae60..a46738d1 100644 --- a/packages/sia-skynet/src/svg/index.js +++ b/packages/sia-skynet/src/svg/index.js @@ -1,32 +1,34 @@ -import Logo from './Logo' -import Download from './Download' -import DoubleRight from './DoubleRight' -import Github from './Github' -import Twitter from './Twitter' -import Discord from './Discord' -import Arrow from './Arrow' -import Cylinder from './Cylinder' -import SmallOrb from './SmallOrb' -import Pyramid from './Pyramid' -import LogoSolid from './LogoSolid' -import File from './File' -import FileCheck from './FileCheck' -import FileError from './FileError' -import Loading from './Loading' -import Skynet from './Skynet' -import Copy from './Copy' -import FooterOrb from './FooterOrb' -import FooterCube from './FooterCube' -import Built from './Built' +import Logo from "./Logo"; +import Download from "./Download"; +import DoubleRight from "./DoubleRight"; +import Github from "./Github"; +import Twitter from "./Twitter"; +import Discord from "./Discord"; +import Arrow from "./Arrow"; +import Cylinder from "./Cylinder"; +import SmallOrb from "./SmallOrb"; +import Pyramid from "./Pyramid"; +import LogoSolid from "./LogoSolid"; +import File from "./File"; +import FileCheck from "./FileCheck"; +import FileError from "./FileError"; +import Loading from "./Loading"; +import Skynet from "./Skynet"; +import Copy from "./Copy"; +import FooterOrb from "./FooterOrb"; +import FooterCube from "./FooterCube"; +import Built from "./Built"; +import DownArrow from "./DownArrow"; +import Folder from "./Folder"; -import Deco1 from './Deco1' -import Deco2 from './Deco2' -import Deco3 from './Deco3' -import Deco4 from './Deco4' -import Deco5 from './Deco5' -import Deco6 from './Deco6' -import Deco7 from './Deco7' -import Deco8 from './Deco8' +import Deco1 from "./Deco1"; +import Deco2 from "./Deco2"; +import Deco3 from "./Deco3"; +import Deco4 from "./Deco4"; +import Deco5 from "./Deco5"; +import Deco6 from "./Deco6"; +import Deco7 from "./Deco7"; +import Deco8 from "./Deco8"; export { Logo, @@ -49,6 +51,8 @@ export { FooterOrb, FooterCube, Built, + DownArrow, + Folder, Deco1, Deco2, Deco3, @@ -56,5 +60,5 @@ export { Deco5, Deco6, Deco7, - Deco8, -} + Deco8 +}; From 926ea7d90a64cc0eadea091f1e303951b83c6ec0 Mon Sep 17 00:00:00 2001 From: Robby Klein Date: Thu, 13 Feb 2020 14:15:25 -0800 Subject: [PATCH 2/4] equal margins --- .../src/components/HomeUpload/HomeUpload.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss index bcfbc887..9c6bbacf 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss @@ -82,7 +82,11 @@ } .button { - margin-top: 15px; + margin-top: 20px; + + @media (min-width: $largebp) { + margin-top: 30px; + } } } @@ -174,7 +178,11 @@ width: 100%; margin-top: 3px; position: relative; - margin-top: 30px; + margin-top: 20px; + + @media (min-width: $largebp) { + margin-top: 30px; + } input { border: 1px solid #cbd3cd; From 756df40d6e1429fe87eb071673ea263309f52fb5 Mon Sep 17 00:00:00 2001 From: Robby Klein Date: Thu, 13 Feb 2020 14:28:16 -0800 Subject: [PATCH 3/4] change copy --- packages/sia-skynet/src/components/HomeUpload/HomeUpload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js index 79106db3..82d91b1c 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -101,7 +101,7 @@ export default class HomeUpload extends Component {

-

Have a File ID?

+

Have a Skylink?

Enter the ID to retrieve the file

From 0fbdd8fd01affde5efb831e7ef96997cb937d529 Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 13 Feb 2020 18:30:36 -0500 Subject: [PATCH 4/4] wire up skylink input --- .../src/components/HomeUpload/HomeUpload.js | 14 ++++++++++++-- .../sia-skynet/src/components/Mailing/Mailing.js | 2 +- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js index 82d91b1c..54db6493 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -58,6 +58,16 @@ 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() { return ( @@ -104,8 +114,8 @@ export default class HomeUpload extends Component {

Have a Skylink?

Enter the ID to retrieve the file

- - + + diff --git a/packages/sia-skynet/src/components/Mailing/Mailing.js b/packages/sia-skynet/src/components/Mailing/Mailing.js index 3b5257ca..9fc1dda8 100644 --- a/packages/sia-skynet/src/components/Mailing/Mailing.js +++ b/packages/sia-skynet/src/components/Mailing/Mailing.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import MailchimpSubscribe from 'react-mailchimp-subscribe' import classNames from 'classnames'