Merge pull request #6 from NebulousLabs/robbys2

Creates the retrieve file box up top

packages/sia-skynet/src/components/Button/Button.js

@@ -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) {
     return (
       <a href={href} className={classes} {...rest}>
         {children}
       </a>
-    )
+    );
   } else if (type) {
     return (
       <button type={type} className={classes} {...rest}>
         {children}
       </button>
-    )
+    );
   } else {
     return (
       <button type="button" className={classes} {...rest}>
         {children}
       </button>
-    )
+    );
   }
 }

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;
+  }
 }

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 {
@@ -58,24 +58,42 @@ 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 (
       <Reveal effect="active">
         <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">
+              <div className="home-upload-box ">
+                <Dropzone
+                  onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
+                >
                   {({ getRootProps, getInputProps, isDragActive }) => (
                     <>
                       <div
-                    className={classNames("home-upload-dashed", {
+                        className={classNames("home-upload-dropzone", {
                           "drop-active": isDragActive
                         })}
                         {...getRootProps()}
                       >
                         <span className="home-upload-text">
+                          <h3>Pin a File</h3>
                           Drag &amp; drop your file(s) here to pin
                         </span>
-                    <Button>Browse</Button>
+                        <Button iconLeft>
+                          <Folder />
+                          Browse
+                        </Button>
                       </div>
                       <input {...getInputProps()} className="offscreen" />
                     </>
@@ -91,6 +109,22 @@ export default class HomeUpload extends Component {
                 )}
               </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>
+
           <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

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;
+  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;
   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;
+    }
+  }
+}

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'
 

packages/sia-skynet/src/svg/DownArrow.js

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

packages/sia-skynet/src/svg/Folder.js

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

packages/sia-skynet/src/svg/index.js

@@ -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 {
   Logo,
@@ -49,6 +51,8 @@ export {
   FooterOrb,
   FooterCube,
   Built,
+  DownArrow,
+  Folder,
   Deco1,
   Deco2,
   Deco3,
@@ -56,5 +60,5 @@ export {
   Deco5,
   Deco6,
   Deco7,
-  Deco8,
+  Deco8
-}
+};