Merge pull request #8 from NebulousLabs/robbys3

fix code editor

packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss

@@ -18,6 +18,11 @@
     background-color: #343734;
     transition: 0.2s line-height, 0.2s background-color, 0.2s color;
     text-align: center;
+    font-size: 14px;
+
+    @media (min-width: 360px) {
+      font-size: 16px;
+    }
 
     @media (min-width: $largebp) {
       padding: 0 32px;

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

@@ -1,33 +1,33 @@
-import React, { Component } from "react";
+import React, { Component } from 'react'
-import classNames from "classnames";
+import classNames from 'classnames'
-import Dropzone from "react-dropzone";
+import Dropzone from 'react-dropzone'
-import Reveal from "react-reveal/Reveal";
+import Reveal from 'react-reveal/Reveal'
 
-import { Button, UploadFile } from "../";
+import { Button, UploadFile } from '../'
-import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
+import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg'
-import "./HomeUpload.scss";
+import './HomeUpload.scss'
 
 export default class HomeUpload extends Component {
-  state = { files: [] };
+  state = { files: [] }
 
   handleDrop = async acceptedFiles => {
     this.setState({
       files: [
         ...acceptedFiles.map(file => {
-          return { file, status: "uploading" };
+          return { file, status: 'uploading' }
         }),
-        ...this.state.files
+        ...this.state.files,
-      ]
+      ],
-    });
+    })
 
     acceptedFiles.forEach(async file => {
-      const url = `/api/skyfile?filename=${file.name}`;
+      const url = `/api/skyfile?filename=${file.name}`
-      const fd = new FormData();
+      const fd = new FormData()
-      fd.append("file", file);
+      fd.append('file', file)
 
       const onComplete = (status, skylink) => {
         this.setState(state => {
-          const index = state.files.findIndex(f => f.file === file);
+          const index = state.files.findIndex(f => f.file === file)
 
           return {
             files: [
@@ -35,36 +35,36 @@ export default class HomeUpload extends Component {
               {
                 ...state.files[index],
                 status,
-                url: `https://siasky.net/${skylink}`
+                url: `https://siasky.net/${skylink}`,
               },
-              ...state.files.slice(index + 1)
+              ...state.files.slice(index + 1),
-            ]
+            ],
-          };
+          }
-        });
+        })
-      };
+      }
 
       try {
         const response = await fetch(url, {
-          method: "POST",
+          method: 'POST',
           body: fd,
-          mode: "cors"
+          mode: 'cors',
-        });
+        })
-        const { skylink } = await response.json();
+        const { skylink } = await response.json()
 
-        onComplete("complete", skylink);
+        onComplete('complete', skylink)
       } catch (error) {
-        onComplete("error");
+        onComplete('error')
+      }
+    })
   }
-    });
-  };
 
-  handleSkylink = (event) => {
+  handleSkylink = event => {
-    event.preventDefault();
+    event.preventDefault()
 
-    const skylink = event.target.skylink.value.replace('sia://', '');
+    const skylink = event.target.skylink.value.replace('sia://', '')
 
-    if(skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
+    if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
-      window.open(`/${event.target.skylink.value}`, '_blank');
+      window.open(`/${event.target.skylink.value}`, '_blank')
     }
   }
 
@@ -75,14 +75,12 @@ export default class HomeUpload extends Component {
           <div className="home-upload-white fadeInUp delay4">
             <div className="home-upload-split">
               <div className="home-upload-box ">
-                <Dropzone
+                <Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
-                  onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
-                >
                   {({ getRootProps, getInputProps, isDragActive }) => (
                     <>
                       <div
-                        className={classNames("home-upload-dropzone", {
+                        className={classNames('home-upload-dropzone', {
-                          "drop-active": isDragActive
+                          'drop-active': isDragActive,
                         })}
                         {...getRootProps()}
                       >
@@ -99,14 +97,6 @@ export default class HomeUpload extends Component {
                     </>
                   )}
                 </Dropzone>
-
-                {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">
@@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
                 </div>
               </div>
             </div>
+
+            {this.state.files.length > 0 && (
+              <div className="home-uploaded-files">
+                {this.state.files.map((file, i) => {
+                  return <UploadFile key={i} {...file} />
+                })}
+              </div>
+            )}
           </div>
 
           <p className="bottom-text fadeInUp delay5">
-            Once a file has been uploaded, a 46 byte link called a 'Skylink' is
+            Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
-            generated. That link can then be shared with anyone to fetch the
+            with anyone to fetch the file from Skynet.
-            file from Skynet.
           </p>
 
           <Deco3 className="deco-3 fadeInUp delay6" />
@@ -136,6 +133,6 @@ export default class HomeUpload extends Component {
           <Deco5 className="deco-5 fadeInUp delay6" />
         </div>
       </Reveal>
-    );
+    )
   }
 }