From dd07da5f988fa64330cba571dc99de35e95defef Mon Sep 17 00:00:00 2001 From: Konrad Kalemba Date: Thu, 8 Apr 2021 22:22:19 +0200 Subject: [PATCH] Add End-of-life informational modal --- public/index.html | 99 ++++++++++++++++++++++++++++---------- src/containers/App/App.jsx | 41 +++++++++++++++- src/index.css | 47 ++++++++++++++++++ 3 files changed, 159 insertions(+), 28 deletions(-) diff --git a/public/index.html b/public/index.html index 89a92ab..1bc0cc2 100644 --- a/public/index.html +++ b/public/index.html @@ -3,37 +3,84 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + Mapa – Koronawirus w Polsce - - - - + + + + - + + + Kalimba Space - Kalimba Tabs & Reviews
- + diff --git a/src/containers/App/App.jsx b/src/containers/App/App.jsx index 30e7126..f4ac506 100644 --- a/src/containers/App/App.jsx +++ b/src/containers/App/App.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Client as Styletron } from 'styletron-engine-atomic'; import { Provider as StyletronProvider } from 'styletron-react'; @@ -21,8 +21,10 @@ import { Block } from 'baseui/block'; import { Layer } from 'baseui/layer'; import { StyledLink } from 'baseui/link'; -import { Layout } from '../../components'; +import { Contributors, Layout } from '../../components'; import useWindowDimensions from '../../hooks/window-dimensions'; +import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'; +import { ParagraphMedium } from 'baseui/typography'; const engine = new Styletron(); @@ -39,6 +41,7 @@ const darkTheme = createTheme( export default function App() { const { t } = useTranslation(); + const [isEolModalOpen, setIsEolModalOpen] = useState(true); const { width } = useWindowDimensions(); return ( @@ -132,6 +135,40 @@ export default function App() { )} + + + setIsEolModalOpen(false)} + > + End-of-life + + + Projekt zakonczył swą działalność i nie jest już + rozwijany. Dane prezentowane na mapie są + nieaktualne i nieaktualizowane. Do śledzenia + obecnej sytuacji dot. koronawirusa w Polsce + polecam oficjalną stronę Ministerstwa Zdrowia + dostępną{' '} + + tutaj + + . +
+
+ Dziękuję wszystkim kontrybutorom! + + + + + + + )} diff --git a/src/index.css b/src/index.css index f8e3c1b..687c8ab 100644 --- a/src/index.css +++ b/src/index.css @@ -95,3 +95,50 @@ svg.marker text { [data-theme='light'] *::-webkit-scrollbar-thumb { background-color: #cccccc; } + +.button { + -webkit-font-smoothing: antialiased; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + font-family: Rubik; + border-radius: 4px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + cursor: pointer; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); + outline: none; + background-color: rgb(0, 0, 0); + padding-left: 8px; + font-weight: 500; + margin-top: 0px; + margin-right: 0px; + display: inline-flex; + border-left-width: 0px; + border-top-width: 0px; + border-right-width: 0px; + border-bottom-width: 0px; + border-left-style: none; + border-top-style: none; + border-right-style: none; + border-bottom-style: none; + outline-offset: -3px; + text-decoration: none; + appearance: none; + transition-property: background; + margin-bottom: 0px; + font-size: 12px; + line-height: 16px; + padding-top: 6px; + padding-bottom: 6px; + padding-right: 8px; + margin-left: 10px; + color: rgb(255, 255, 255); + position: absolute; + right: 20px; + bottom: 60px; +} \ No newline at end of file