Merge pull request #6 from NebulousLabs/robbys2

Creates the retrieve file box up top
2020-02-13 18:34:38 -05:00 · 2020-02-13 18:34:38 -05:00 · c3c39a5969
parent 3e604657b8 0fbdd8fd01
commit c3c39a5969
8 changed files with 289 additions and 73 deletions
--- 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 (
      <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>
-    )
+    );
  }
 }
--- 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;
+  }
 }
--- 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 {
@ -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">
--- 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;
+    }
+  }
+}
--- 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'

--- a/packages/sia-skynet/src/svg/DownArrow.js
+++ b/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>
+  );
+}
--- a/packages/sia-skynet/src/svg/Folder.js
+++ b/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>
+  );
+}
--- 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
+};