Add End-of-life informational modal

konradkalemba · Apr 8, 2021 · dd07da5 · dd07da5 · vercel · Apr 8, 2021
1 parent 1a0238d
commit dd07da5
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 28 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,37 +3,84 @@
   <head>
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/images/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/images/favicon-16x16.png">
-    <link rel="manifest" id="manifest">
-
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Mapa potwierdzonych przypadków koronawirusa w Polsce. Aktualizowana na bieżąco.">
-    <meta name="keywords" content="koronawirus, mapa, polska, koronawirus w polsce, mapa koronawirus polska, koronawirus polska mapa, mapa przypadków koronawirusa w polsce, mapa koronawirusa">
-
-    <meta property="og:title" content="Mapa - Koronawirus w Polsce">
-    <meta property="og:description" content="Mapa potwierdzonych przypadków koronawirusa w Polsce. Aktualizowana na bieżąco.">
-    <meta property="og:url" content="https://korona.ws/">
-    <meta property="og:type" content="website">
-    <meta property="og:image" content="https://korona.ws/images/icon-512x512.png">
-
-    <meta property="fbb:app_id" content="0">
-
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:creator" content="@kalembakonrad">
+    <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/images/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/images/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/images/favicon-16x16.png"
+    />
+    <link rel="manifest" id="manifest" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Mapa potwierdzonych przypadków koronawirusa w Polsce. Aktualizowana na bieżąco."
+    />
+    <meta
+      name="keywords"
+      content="koronawirus, mapa, polska, koronawirus w polsce, mapa koronawirus polska, koronawirus polska mapa, mapa przypadków koronawirusa w polsce, mapa koronawirusa"
+    />
+
+    <meta property="og:title" content="Mapa - Koronawirus w Polsce" />
+    <meta
+      property="og:description"
+      content="Mapa potwierdzonych przypadków koronawirusa w Polsce. Aktualizowana na bieżąco."
+    />
+    <meta property="og:url" content="https://korona.ws/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://korona.ws/images/icon-512x512.png"
+    />
+
+    <meta property="fbb:app_id" content="0" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content="@kalembakonrad" />
 
     <title>Mapa – Koronawirus w Polsce</title>
-
-    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link href='https://unpkg.com/[email protected]/dist/leaflet.css' rel='stylesheet'>
-    <link href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" rel="stylesheet">
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <noscript>Musisz włączyć JavaScript by korzystać z tej strony. You need to enable JavaScript to run this app.</noscript>
+    <noscript
+      >Musisz włączyć JavaScript by korzystać z tej strony. You need to enable
+      JavaScript to run this app.</noscript
+    >
+
+    <a href="https://kalimba.space" class="button" target="_blank"
+      >Kalimba Space - Kalimba Tabs & Reviews</a
+    >
     <div id="root"></div>
     <div id="fb-root"></div>
-    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v6.0&appId=1523752931189973&autoLogAppEvents=1"></script>
+    <script
+      async
+      defer
+      crossorigin="anonymous"
+      src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v6.0&appId=1523752931189973&autoLogAppEvents=1"
+    ></script>
   </body>
 </html>
diff --git 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() {
                           </Block>
                         </Layer>
                       )}
+
+                      <Layer>
+                        <Modal
+                          isOpen={isEolModalOpen}
+                          closeable
+                          onClose={() => setIsEolModalOpen(false)}
+                        >
+                          <ModalHeader>End-of-life</ModalHeader>
+                          <ModalBody>
+                            <ParagraphMedium $style={{ textAlign: 'justify' }}>
+                              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ą{' '}
+                              <StyledLink
+                                target='_blank'
+                                rel='nofollow'
+                                href='https://www.gov.pl/web/koronawirus/wykaz-zarazen-koronawirusem-sars-cov-2'
+                              >
+                                tutaj
+                              </StyledLink>
+                              .
+                              <br />
+                              <br />
+                              Dziękuję wszystkim kontrybutorom!
+                            </ParagraphMedium>
+
+                            <Contributors />
+                          </ModalBody>
+                          <ModalFooter></ModalFooter>
+                        </Modal>
+                      </Layer>
                     </BaseProvider>
                   )}
                 </ThemeContext.Consumer>

diff --git 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;
+}