add info message about 1.5.0

This commit is contained in:
Karol Wypchlo 2020-07-13 12:11:04 +02:00
parent a2e2af3bf0
commit 81ba0391dc
4 changed files with 57 additions and 16 deletions

View File

@ -1,10 +1,13 @@
import React from "react"; import React from "react";
import TopSwoosh from "../../svg/TopSwoosh"; import TopSwoosh from "../../svg/TopSwoosh";
import "./App.scss"; import "./App.scss";
import StickyTopMessage from "../StickyTopMessage/StickyTopMessage";
import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../"; import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../";
function App() { function App() {
return ( return (
<React.Fragment>
<StickyTopMessage />
<div className="app"> <div className="app">
<TopSwoosh className="top-swoosh" /> <TopSwoosh className="top-swoosh" />
@ -24,6 +27,7 @@ function App() {
<Footer /> <Footer />
</div> </div>
</React.Fragment>
); );
} }

View File

@ -9,7 +9,7 @@ import { Mailing } from "..";
export default function Footer() { export default function Footer() {
return ( return (
<Reveal effect="active"> <Reveal effect="active">
<footer className="footer"> <footer className="footer" id="footer">
<div className="width"> <div className="width">
<Fade duration={700} distance="40px" bottom> <Fade duration={700} distance="40px" bottom>
<div className="footer-column"> <div className="footer-column">

View File

@ -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>
);
}

View File

@ -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;
}
}
}