From 81ba0391dcafdb29e0622ca418e95fdd72c02a8e Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Mon, 13 Jul 2020 12:11:04 +0200
Subject: [PATCH] add info message about 1.5.0

---
 src/components/App/App.js                     | 34 +++++++++++--------
 src/components/Footer/Footer.js               |  2 +-
 .../StickyTopMessage/StickyTopMessage.js      | 13 +++++++
 .../StickyTopMessage/StickyTopMessage.scss    | 24 +++++++++++++
 4 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/components/StickyTopMessage/StickyTopMessage.js
 create mode 100644 src/components/StickyTopMessage/StickyTopMessage.scss

diff --git a/src/components/App/App.js b/src/components/App/App.js
index 36bdde8e..fe00c456 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -1,29 +1,33 @@
 import React from "react";
 import TopSwoosh from "../../svg/TopSwoosh";
 import "./App.scss";
+import StickyTopMessage from "../StickyTopMessage/StickyTopMessage";
 import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../";
 
 function App() {
   return (
-    <div className="app">
-      <TopSwoosh className="top-swoosh" />
+    <React.Fragment>
+      <StickyTopMessage />
+      <div className="app">
+        <TopSwoosh className="top-swoosh" />
 
-      <div className="width">
-        <HomeTop />
-        <HomeUpload />
-        <HomeBuilt />
-        <HomeSamples />
-      </div>
-
-      <div className="home-white">
         <div className="width">
-          <HomeStay />
-          <HomeNetwork />
+          <HomeTop />
+          <HomeUpload />
+          <HomeBuilt />
+          <HomeSamples />
         </div>
-      </div>
 
-      <Footer />
-    </div>
+        <div className="home-white">
+          <div className="width">
+            <HomeStay />
+            <HomeNetwork />
+          </div>
+        </div>
+
+        <Footer />
+      </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 93164c94..34177c9e 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -9,7 +9,7 @@ import { Mailing } from "..";
 export default function Footer() {
   return (
     <Reveal effect="active">
-      <footer className="footer">
+      <footer className="footer" id="footer">
         <div className="width">
           <Fade duration={700} distance="40px" bottom>
             <div className="footer-column">
diff --git a/src/components/StickyTopMessage/StickyTopMessage.js b/src/components/StickyTopMessage/StickyTopMessage.js
new file mode 100644
index 00000000..ddf5513e
--- /dev/null
+++ b/src/components/StickyTopMessage/StickyTopMessage.js
@@ -0,0 +1,13 @@
+import React from "react";
+import "./StickyTopMessage.scss";
+
+export default function StickyTopMessage() {
+  return (
+    <div className="sticky-top-message" role="alert">
+      <p>
+        We are working on improved performance as part of the upcoming Sia v1.5.0 release. In the meantime, you can try
+        other webportals listed at the <a href="#footer">bottom</a>.
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/StickyTopMessage/StickyTopMessage.scss b/src/components/StickyTopMessage/StickyTopMessage.scss
new file mode 100644
index 00000000..594e404a
--- /dev/null
+++ b/src/components/StickyTopMessage/StickyTopMessage.scss
@@ -0,0 +1,24 @@
+@import "../../variables.scss";
+
+.sticky-top-message {
+  position: sticky;
+  top: 0;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px;
+  font-weight: bold;
+  z-index: 999;
+  background-color: #fbe6e6;
+  border-bottom: 1px solid #e65c5c;
+  color: $red;
+
+  a {
+    color: $red;
+    text-decoration: underline;
+
+    &:hover {
+      color: darken($red, 15%);
+      transition: color 0.2s ease;
+    }
+  }
+}