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 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 (
       <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,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() {
     return (
       <Reveal effect="active">
         <div className="home-upload">
-          <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
-                    })}
-                    {...getRootProps()}
-                  >
-                    <span className="home-upload-text">
-                      Drag &amp; drop your file(s) here to pin
-                    </span>
-                    <Button>Browse</Button>
-                  </div>
-                  <input {...getInputProps()} className="offscreen" />
-                </>
-              )}
-            </Dropzone>
+          <div className="home-upload-white fadeInUp delay4">
+            <div className="home-upload-split">
+              <div className="home-upload-box ">
+                <Dropzone
+                  onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
+                >
+                  {({ getRootProps, getInputProps, isDragActive }) => (
+                    <>
+                      <div
+                        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 iconLeft>
+                          <Folder />
+                          Browse
+                        </Button>
+                      </div>
+                      <input {...getInputProps()} className="offscreen" />
+                    </>
+                  )}
+                </Dropzone>
 
-            {this.state.files.length > 0 && (
-              <div className="home-uploaded-files">
-                {this.state.files.map((file, i) => {
-                  return <UploadFile key={i} {...file} />;
-                })}
+                {this.state.files.length > 0 && (
+                  <div className="home-uploaded-files">
+                    {this.state.files.map((file, i) => {
+                      return <UploadFile key={i} {...file} />;
+                    })}
+                  </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>
 
           <p className="bottom-text fadeInUp delay5">

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

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