MT-3256 network offline banner (#29)

* add network offline banner

* remove @types/react-router lib

Author: yulia-dnistrian

package.json

@@ -17,6 +17,7 @@
     "react": "^16.13.1",
     "react-axe": "^3.5.2",
     "react-cool-onclickoutside": "^1.5.2",
+    "react-detect-offline": "^2.4.0",
     "react-dom": "^16.13.1",
     "react-responsive-modal": "^4.0.1",
     "react-router-dom": "^5.2.0",

src/AppHeader.scss

@@ -1,5 +1,7 @@
+@import './theme/common';
 
 .appheader {
+  position: relative;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -21,4 +23,18 @@
   &__moltincartcontainer {
     flex: 0 0 auto;
   }
+
+  &__networkoffline {
+    width: 50%;
+    padding: 15px;
+    position: absolute;
+    top: 100%;
+    left: 25%;
+    text-align: center;
+    z-index: 1;
+    border-radius: 3px;
+    color: $secondAccentColor;
+    background-color: adjust-color($color: $secondAccentColor, $lightness: 65%);
+    border: 1px solid adjust-color($color: $secondAccentColor, $lightness: 60%);
+  }
 }

src/AppHeader.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Link } from "react-router-dom";
+// @ts-ignore
+import { Offline } from 'react-detect-offline';
 import { ImageContainer } from './ImageContainer';
 import { useTranslation } from './app-state';
 import { LanguageDropdown } from './LanguageDropdown';
@@ -28,6 +30,13 @@ export const AppHeader: React.FC = () => {
       <div className="appheader__moltincartcontainer">
         <span className="moltin-cart-button"></span>
       </div>
+      <Offline>
+        <div className="appheader__networkoffline">
+          <strong>
+            {t('network-offline')}
+          </strong>
+        </div>
+      </Offline>
     </div>
   );
 };

src/locales/en.json

@@ -85,5 +85,6 @@
   "email-slash-username": "Email/Username",
   "password-confirmation": "Password Confirmation",
   "submit": "Submit",
-  "required": "Required"
+  "required": "Required",
+  "network-offline": "Network Offline"
 }

src/locales/fr.json

@@ -85,5 +85,6 @@
   "email-slash-username": "ÉÉɱåîîļ⁄Ûššéŕññåɱé",
   "password-confirmation": "ÞÞåššŵŵöŕð ÇÇöñƒƒîŕɱɱåţţîöñ",
   "submit": "ŠŠûƀɱɱîţ",
-  "required": "ŔŔéǫûîîŕéð"
+  "required": "ŔŔéǫûîîŕéð",
+  "network-offline": "ÑÑéţŵŵöŕķ ÖÖƒƒļļîñé"
 }

src/theme/common.scss

@@ -30,6 +30,7 @@ $fifthComplimentBackground: #C5C5C5;
 $accountTreeActive: #E1F0F7;
 
 $firstAccentColor: #78B13F;
+$secondAccentColor: #004085;
 
 $mainErrorColor: #E00646;
 

yarn.lock

@@ -9204,6 +9204,11 @@ react-cool-onclickoutside@^1.5.2:
   resolved "https://registry.yarnpkg.com/react-cool-onclickoutside/-/react-cool-onclickoutside-1.5.2.tgz#4a1500b54f3933af2227032975841a5fe3f9a0e8"
   integrity sha512-aOJ3fH9fjQqQ3IASsfXdgH5dmujX/bX4Vj0K6sfsx2dKjBbJ+WmX3nGFfRc3V130onRV93zWjW6WQQrO1Huo6w==
 
+react-detect-offline@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-detect-offline/-/react-detect-offline-2.4.0.tgz#e40f5a588ffb0680bcbcfa33e4d9d39ad805c3ff"
+  integrity sha512-OHglQ8bpbM4x8m23RhRCm1e1cYtuCoLQ7NKHsC0zzm1z2vQIrNTq7MvhZTQ7TsbgK1XapMewLxGW9QEW3DXC9A==
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"