From 6f58745c1f2fabc9ecc76daee68fdffe7f7b5274 Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Tue, 30 Mar 2021 12:56:05 +0200
Subject: [PATCH] animate processing bar

---
 .../FooterNavigation/FooterNavigation.js      |  5 +--
 .../src/components/Navigation/Navigation.js   | 14 +++----
 .../src/components/Uploader/Uploader.js       |  2 +-
 packages/website/src/pages/developers.js      | 39 +++++++++++++------
 packages/website/src/styles/global.css        | 14 +++++++
 5 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/packages/website/src/components/FooterNavigation/FooterNavigation.js b/packages/website/src/components/FooterNavigation/FooterNavigation.js
index d19e8124..afef46df 100644
--- a/packages/website/src/components/FooterNavigation/FooterNavigation.js
+++ b/packages/website/src/components/FooterNavigation/FooterNavigation.js
@@ -23,8 +23,7 @@ const sections = [
     header: "Developers",
     links: [
       { title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
-      { title: "API Documentation", href: "https://siasky.net/docs/", ...external },
-      { title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
+      { title: "API and SDK Documentation", href: "https://siasky.net/docs/", ...external },
       { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
     ],
   },
@@ -44,7 +43,7 @@ const sections = [
       { title: "Sia Foundation", href: "https://sia.tech", ...external },
       { title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external },
       { title: "SiaStats", href: "https://siastats.info", ...external },
-      { title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external },
+      { title: "Skynet AppStore", href: "https://skyapps.hns.siasky.net/", ...external },
     ],
   },
   {
diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js
index 8a10f017..6f14f09e 100644
--- a/packages/website/src/components/Navigation/Navigation.js
+++ b/packages/website/src/components/Navigation/Navigation.js
@@ -10,10 +10,10 @@ import DiscordSmall from "../Icons/DiscordSmall.svg";
 import { useWindowSize, useWindowScroll } from "react-use";
 
 const routes = [
-  { title: "Home", route: "/" },
-  { title: "About", route: "/about" },
-  { title: "Developers", route: "/developers" },
-  { title: "News", route: "/news" },
+  { title: "Home", to: "/" },
+  { title: "About", to: "/about" },
+  { title: "Developers", to: "/developers" },
+  { title: "News", to: "/news" },
 ];
 
 const LogInLink = () => (
@@ -99,10 +99,10 @@ const Navigation = ({ mode }) => {
           </div>
 
           <div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12">
-            {routes.map(({ title, route }) => (
+            {routes.map(({ title, to }) => (
               <Link
-                key={route}
-                to={route}
+                key={to}
+                to={to}
                 activeClassName="underline-navigation"
                 className={classnames("text-sm font-light transition-colors duration-500", {
                   "text-white": mode === "dark",
diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js
index 41b76a1a..8f758af8 100644
--- a/packages/website/src/components/Uploader/Uploader.js
+++ b/packages/website/src/components/Uploader/Uploader.js
@@ -129,7 +129,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
       <div
         className={classnames("flex bg-palette-200 mt-1", {
           "bg-error-dashed opacity-20": status === "error",
-          "bg-primary-dashed opacity-20": status === "processing",
+          "bg-primary-dashed move opacity-20": status === "processing",
         })}
         style={{ height: "5px" }}
       >
diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js
index 6d59ecae..1ba8f0ab 100644
--- a/packages/website/src/pages/developers.js
+++ b/packages/website/src/pages/developers.js
@@ -7,10 +7,10 @@ import Link from "../components/Link";
 
 const LearnMoreButton = () => (
   <Link
-    href="https://secure.siasky.net"
-    className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
+    href="https://support.siasky.net/the-technology/developing-on-skynet"
     target="_blank"
     rel="noopener noreferrer"
+    className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
   >
     Learn more
   </Link>
@@ -50,26 +50,41 @@ const reasonCards = [
 ];
 
 const resources = [
-  { title: "Skynet Developer Guide", description: "Developer portal for resources and guides.", href: "" },
-  { title: "Skynet SDK Docs", description: "SDKs in Javascript, Go, Python and more.", href: "" },
-  { title: "Skynet Playground", description: "Interact with the core of Skynet, no code needed. ", href: "" },
-  { title: "Skapp.io", description: "Explore webs apps in the ecosystem, many open source.", href: "" },
-  { title: "Skynet Core Repo", description: "The code base that makes the rest tick.", href: "" },
+  {
+    title: "Skynet Developer Guide",
+    description: "Developer portal for resources and guides.",
+    href: "https://support.siasky.net/the-technology/developing-on-skynet",
+  },
+  {
+    title: "Skynet SDK Docs",
+    description: "SDKs in Javascript, Go, Python and more.",
+    href: "https://siasky.net/docs/",
+  },
+  {
+    title: "Skynet AppStore",
+    description: "Explore webs apps in the ecosystem, many open source.",
+    href: "https://skyapps.hns.siasky.net",
+  },
+  {
+    title: "Skynet Core Repo",
+    description: "The code base that makes the rest tick.",
+    href: "https://gitlab.com/skynetlabs/skyd",
+  },
   {
     title: "Skynet on Github",
     description: "Includes SDKs, resources, and web portal. PR’s always welcome.",
-    href: "",
+    href: "https://github.com/NebulousLabs",
   },
   {
     title: "Join us on Discord",
     description: "A generous developer community, ready to solve hard problems.",
-    href: "",
+    href: "https://discordapp.com/invite/sia",
   },
 ];
 
 const docs = [
-  { name: "Developer Guide", href: "" },
-  { name: "Skynet SDK Docs", href: "" },
+  { name: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet" },
+  { name: "Skynet SDK Docs", href: "https://siasky.net/docs/" },
 ];
 
 const DevelopersPage = () => (
@@ -146,6 +161,8 @@ const DevelopersPage = () => (
             <li key={index}>
               <Link
                 href={href}
+                target="_blank"
+                rel="noopener noreferrer"
                 className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
               >
                 <div className="font-semibold text-lg">{title}</div>
diff --git a/packages/website/src/styles/global.css b/packages/website/src/styles/global.css
index 06442205..c6bfd8f0 100644
--- a/packages/website/src/styles/global.css
+++ b/packages/website/src/styles/global.css
@@ -10,8 +10,22 @@
   background-size: 2px 2px;
 }
 
+@keyframes bg-primary-dashed-animation {
+  0% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: 15px;
+  }
+}
+
 .bg-primary-dashed {
   background: repeating-linear-gradient(to right, #00c65e, #00c65e 10px, transparent 10px, transparent 15px);
+  background-size: 15px 15px;
+}
+
+.bg-primary-dashed.move {
+  animation: bg-primary-dashed-animation 0.3s infinite linear forwards;
 }
 
 .bg-error-dashed {