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..9c6bbacf 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,13 +72,21 @@ background-color: $green; border: 1px solid $green; + h3 { + color: $white; + } + .button { display: none; } } .button { - margin-top: 15px; + margin-top: 20px; + + @media (min-width: $largebp) { + margin-top: 30px; + } } } @@ -65,14 +94,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 +150,82 @@ 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; + } + } +} 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' 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 +};