updated mobile view

packages/website/package.json

@@ -11,6 +11,7 @@
     "autoprefixer": "^10.2.5",
     "bytes": "^3.1.0",
     "classnames": "^2.2.6",
+    "copy-text-to-clipboard": "^3.0.1",
     "framer-motion": "^4.0.3",
     "gatsby": "^3.0.1",
     "gatsby-background-image": "^1.5.0",

packages/website/src/components/Uploader/Uploader.js

@@ -4,6 +4,7 @@ import { Add, Cloud, ArrowUpCircle, CheckCircle } from "../Icons";
 import bytes from "bytes";
 import classNames from "classnames";
 import { getReasonPhrase, StatusCodes } from "http-status-codes";
+import copy from "copy-text-to-clipboard";
 import path from "path-browserify";
 import { useDropzone } from "react-dropzone";
 import { SkynetClient } from "skynet-js";
@@ -55,23 +56,23 @@ const createUploadErrorMessage = (error) => {
 
 const client = new SkynetClient("https://siasky.net");
 
-const UploadElement = ({ file, progress, status, url }) => {
+const UploadElement = ({ file, status, url = "", progress = 0 }) => {
   const handleCopy = (url) => {
-    console.log(url);
+    copy(url);
   };
 
   return (
     <div>
       <div className="flex items-center">
-        {status === "uploading" && <ArrowUpCircle />}
+        {status === "uploading" && <ArrowUpCircle className="flex-shrink-0" />}
-        {status === "processing" && <ArrowUpCircle />}
+        {status === "processing" && <ArrowUpCircle className="flex-shrink-0" />}
-        {status === "complete" && <CheckCircle />}
+        {status === "complete" && <CheckCircle className="flex-shrink-0" />}
-        <div className="flex flex-col flex-grow ml-3">
+        <div className="flex flex-col flex-grow ml-3 overflow-hidden">
           <div className="text-palette-600 text-sm font-light">{file.name}</div>
-          <div className="flex justify-between text-palette-400 text-xs">
+          <div className="flex justify-between text-palette-400 text-xs space-x-2">
-            <div className="font-content">
+            <div className="font-content truncate">
               {status === "uploading" && (
-                <span>
+                <span className="tabular-nums">
                   Uploading {bytes(file.size * progress)} of {bytes(file.size)}
                 </span>
               )}
@@ -85,10 +86,15 @@ const UploadElement = ({ file, progress, status, url }) => {
               )}
             </div>
             <div>
-              {status === "uploading" && <span className="uppercase">{Math.floor(progress * 100)}% completed</span>}
+              {status === "uploading" && (
+                <span className="uppercase tabular-nums">
+                  {Math.floor(progress * 100)}%<span className="hidden desktop:inline"> completed</span>
+                </span>
+              )}
               {status === "complete" && (
                 <button className="uppercase" onClick={() => handleCopy(url)}>
-                  Copy link
+                  <span className="hidden desktop:inline">Copy link</span>
+                  <span className="inline desktop:hidden">Copy</span>
                 </button>
               )}
             </div>
@@ -177,32 +183,36 @@ const Uploader = () => {
   const inputElement = inputRef.current;
 
   React.useEffect(() => {
-    if (mode === "directory") {
+    if (!inputElement) return;
-      inputElement.setAttribute("webkitdirectory", "true");
+    if (mode === "directory") inputElement.setAttribute("webkitdirectory", "true");
-    } else {
+    if (mode === "file") inputElement.removeAttribute("webkitdirectory");
-      inputElement.removeAttribute("webkitdirectory");
+  }, [inputElement, mode]);
-    }
-  }, [mode, inputElement]);
 
   return (
-    <div className="px-8 py-12">
+    <div className="dekstop:px-8 py-12">
       <div className="max-w-content mx-auto rounded-lg shadow bg-white z-0 relative">
         <div className="flex">
           <button
-            className={classnames("uppercase text-xxs desktop:text-xs w-1/2 p-3 rounded-tl-lg leading-8", {
+            className={classnames(
-              "bg-primary": mode === "file",
+              "uppercase text-xxs desktop:text-xs w-1/2 p-2 desktop:p-3 rounded-tl-lg leading-6 desktop:leading-8",
-              "bg-palette-200": mode === "directory",
+              {
-            })}
+                "bg-primary": mode === "file",
+                "bg-palette-200": mode === "directory",
+              }
+            )}
             onClick={() => setMode("file")}
           >
             <span className="hidden desktop:inline">Try it now and upload your files</span>
             <span className="inline desktop:hidden">Upload files</span>
           </button>
           <button
-            className={classnames("uppercase text-xxs desktop:text-xs w-1/2 p-3 rounded-tr-lg leading-8", {
+            className={classnames(
-              "bg-primary": mode === "directory",
+              "uppercase text-xxs desktop:text-xs w-1/2 p-2 desktop:p-3 rounded-tr-lg leading-6 desktop:leading-8",
-              "bg-palette-200": mode === "file",
+              {
-            })}
+                "bg-primary": mode === "directory",
+                "bg-palette-200": mode === "file",
+              }
+            )}
             onClick={() => setMode("directory")}
           >
             <span className="hidden desktop:inline">Do you want to upload an entire directory?</span>
@@ -224,7 +234,7 @@ const Uploader = () => {
               }
             )}
           >
-            <Cloud />
+            {files.length === 0 && <Cloud />}
             <h4 className="font-light text-palette-600 text-lg mt-2 text-center">
               Add or drop your files here to pin to Skynet
             </h4>
@@ -237,7 +247,7 @@ const Uploader = () => {
         </div>
 
         {files.length > 0 && (
-          <div className="flex flex-col space-y-5 p-14">
+          <div className="flex flex-col space-y-5 px-4 py-10 desktop:p-14">
             {files.map((file, index) => (
               <UploadElement key={index} {...file} />
             ))}

packages/website/src/pages/index.js

@@ -18,20 +18,20 @@ import {
 } from "../components/Icons";
 import classnames from "classnames";
 
-const Section = ({ children, className, ...props }) => (
+const Section = React.forwardRef(({ children, className, ...props }, ref) => (
-  <div className={classnames("p-8", className)} {...props}>
+  <div ref={ref} className={classnames("p-8", className)} {...props}>
     <div className="max-w-content mx-auto">{children}</div>
   </div>
-);
+));
 
-const BigIcon = ({ Icon, text }) => (
+const EtosCard = ({ Icon, text }) => (
   <div className="flex flex-col items-center">
     <Icon height="142" />
     <p className="text-center mt-4 font-light text-palette-600 text-lg">{text}</p>
   </div>
 );
 
-const SmallIconCard = ({ Icon, title, text }) => (
+const EcosystemCard = ({ Icon, title, text }) => (
   <div className="flex flex-col">
     <Icon />
     <h3 className="font-light text-lg mt-6">{title}</h3>
@@ -54,87 +54,114 @@ const SectionTitle = ({ children, className, ...props }) => (
   </h2>
 );
 
-const IndexPage = () => (
+const etosCards = [
-  <Layout>
+  {
-    <SEO title="Home" />
+    Icon: SkynetToolBig,
+    title: "Build a freer future",
+  },
+  {
+    Icon: SkynetUserBig,
+    title: "Fight corporate control of user data",
+  },
+  {
+    Icon: SkynetPowerBig,
+    title: "Empower global citizens",
+  },
+];
 
-    <Section>
+const ecosystemCards = [
-      <HeroStartPage />
+  {
-    </Section>
+    Icon: SkynetUsageSmall,
+    title: "Easy to use",
+    text:
+      "Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.",
+  },
+  {
+    Icon: SkynetSpeedSmall,
+    title: "Fast",
+    text:
+      "Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!",
+  },
+  {
+    Icon: SkynetSiaSmall,
+    title: "Free to use",
+    text:
+      "Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it.",
+  },
+  {
+    Icon: SkynetMonetizationSmall,
+    title: "Monetization",
+    text:
+      "Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.",
+  },
+  {
+    Icon: SkynetPersistenceSmall,
+    title: "Persistence",
+    text:
+      "Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.",
+  },
+];
 
-    <Section className="relative">
+const IndexPage = () => {
-      {/* <div className="absolute inset-x-0 bg-white bottom-0" style={{ top: 256 }}></div> */}
+  return (
-      <Uploader />
+    <Layout>
-    </Section>
+      <SEO title="Home" />
 
-    <Section className="bg-white py-32">
+      <Section>
-      <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>
+        <HeroStartPage />
+      </Section>
 
-      <div className="grid grid-cols-1 gap-8 desktop:grid-cols-3">
+      <Section className="relative">
-        <BigIcon Icon={SkynetToolBig} text="Build a freer future" />
+        <div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div>
-        <BigIcon Icon={SkynetUserBig} text="Fight corporate control of user data" />
+        <Uploader />
-        <BigIcon Icon={SkynetPowerBig} text="Empower global citizens" />
+      </Section>
-      </div>
 
-      <div className="flex flex-col items-center mt-16">
+      <Section className="bg-white py-32">
-        <p className="max-w-screen-md text-center text-base font-content text-palette-400">
+        <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>
-          Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join
-          our decentralized ecosystem and revolution.
-        </p>
 
-        <a href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
+        <div className="grid grid-cols-1 gap-8 desktop:grid-cols-3">
-          Try Skynet Apps <ArrowRight />
+          {etosCards.map((card, index) => (
-        </a>
+            <EtosCard key={index} {...card} />
-      </div>
+          ))}
-    </Section>
-
-    <Section className="bg-palette-100 py-32">
-      <SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle>
-
-      <div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3 desktop:grid-rows-2">
-        <div className="hidden desktop:inline-block">
-          <SectionTitle>Ready to build your application?</SectionTitle>
-
-          <LearnMoreButton />
         </div>
 
-        <SmallIconCard
+        <div className="flex flex-col items-center mt-16">
-          Icon={SkynetUsageSmall}
+          <p className="max-w-screen-md text-center text-base font-content text-palette-400">
-          title="Easy to use"
+            Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join
-          text="Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps. "
+            our decentralized ecosystem and revolution.
-        />
+          </p>
-        <SmallIconCard
-          Icon={SkynetSpeedSmall}
-          title="Fast"
-          text="Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!"
-        />
-        <SmallIconCard
-          Icon={SkynetSiaSmall}
-          title="Free to use"
-          text="Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it."
-        />
-        <SmallIconCard
-          Icon={SkynetMonetizationSmall}
-          title="Monetization"
-          text="Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers."
-        />
-        <SmallIconCard
-          Icon={SkynetPersistenceSmall}
-          title="Persistence"
-          text="Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down."
-        />
-      </div>
 
-      <div className="desktop:hidden mt-12 text-center">
+          <a href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
-        <LearnMoreButton />
+            Try Skynet Apps <ArrowRight />
-      </div>
+          </a>
-    </Section>
+        </div>
+      </Section>
 
-    <Section className="py-24 bg-primary">
+      <Section className="bg-palette-100 py-32">
-      <CommunitySection />
+        <SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle>
-    </Section>
 
-    {/* <h1>Hi people</h1>
+        <div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3 desktop:grid-rows-2">
+          <div className="hidden desktop:inline-block">
+            <SectionTitle>Ready to build your application?</SectionTitle>
+
+            <LearnMoreButton />
+          </div>
+
+          {ecosystemCards.map((card, index) => (
+            <EcosystemCard key={index} {...card} />
+          ))}
+        </div>
+
+        <div className="desktop:hidden mt-12 text-center">
+          <LearnMoreButton />
+        </div>
+      </Section>
+
+      <Section className="py-24 bg-primary">
+        <CommunitySection />
+      </Section>
+
+      {/* <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
     <StaticImage
@@ -149,7 +176,8 @@ const IndexPage = () => (
       <Link to="/page-2/">Go to page 2</Link> <br />
       <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
     </p> */}
-  </Layout>
+    </Layout>
-);
+  );
+};
 
 export default IndexPage;