From 81e4cf53d8ec1bc1845d04bca4b1ff8f77f5c377 Mon Sep 17 00:00:00 2001
From: Michael Fellinger <michael.fellinger@iohk.io>
Date: Fri, 26 Jan 2024 15:58:14 +0100
Subject: [PATCH] sunset banner

---
 source/features/i18n/translations/de.json     |  5 ++-
 source/features/i18n/translations/en.json     |  5 ++-
 source/features/i18n/translations/ja.json     |  5 ++-
 .../LanguageSwitcher.module.scss              |  2 +-
 source/widgets/layout/Header.module.scss      | 34 +++++++++++++++++++
 source/widgets/layout/Header.tsx              | 14 ++++++++
 6 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/source/features/i18n/translations/de.json b/source/features/i18n/translations/de.json
index 0dda8320..bb63c736 100644
--- a/source/features/i18n/translations/de.json
+++ b/source/features/i18n/translations/de.json
@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "Epochen & Blöcke",
-    "explorer": "Blockchain Explorer"
+    "explorer": "Blockchain Explorer",
+    "sunsetPre": "Dieser Explorer wird bald außer Betrieb genommen. Probier jetzt die Beta-Version des neuen ",
+    "sunsetPost": " aus.",
+    "cardanoExplorer": "Cardano Explorers"
   },
   "index": {
     "pageTitle": "$t(productTitle)"
diff --git a/source/features/i18n/translations/en.json b/source/features/i18n/translations/en.json
index 4ac75690..2d81b68b 100644
--- a/source/features/i18n/translations/en.json
+++ b/source/features/i18n/translations/en.json
@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "Epochs & Blocks",
-    "explorer": "Blockchain Explorer"
+    "explorer": "Blockchain Explorer",
+    "sunsetPre": "We’ll be sunsetting this Explorer soon. Try out the beta of the new ",
+    "sunsetPost": ".",
+    "cardanoExplorer": "Cardano Explorer"
   },
   "index": {
     "pageTitle": "$t(productTitle)"
diff --git a/source/features/i18n/translations/ja.json b/source/features/i18n/translations/ja.json
index 1397c1ec..ae67e5dc 100644
--- a/source/features/i18n/translations/ja.json
+++ b/source/features/i18n/translations/ja.json
@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "エポックおよびブロック",
-    "explorer": "ブロックチェーンエクスプローラー"
+    "explorer": "ブロックチェーンエクスプローラー",
+    "sunsetPre": "こちらのエクスプローラーのサービスはまもなく終了いたします。新しい",
+    "sunsetPost": "（カルダノエクスプローラー）のベータ版をお試しください。",
+    "cardanoExplorer": "Cardano Explorer"
   },
   "index": {
     "pageTitle": "$t(productTitle)"
diff --git a/source/widgets/language-switcher/LanguageSwitcher.module.scss b/source/widgets/language-switcher/LanguageSwitcher.module.scss
index 9c5501bb..3dce10ba 100644
--- a/source/widgets/language-switcher/LanguageSwitcher.module.scss
+++ b/source/widgets/language-switcher/LanguageSwitcher.module.scss
@@ -7,7 +7,7 @@
   height: 30px;
   position: absolute;
   right: 61px;
-  top: 53px;
+  top: 5rem;
   min-width: 90px;
   z-index: 9999;
 
diff --git a/source/widgets/layout/Header.module.scss b/source/widgets/layout/Header.module.scss
index ef101adf..22b759cc 100644
--- a/source/widgets/layout/Header.module.scss
+++ b/source/widgets/layout/Header.module.scss
@@ -3,6 +3,40 @@
   width: 100%;
 
   &.enlargedHeaderContainer {
+    .hiddenNoticeContainer {
+      display: none;
+    }
+
+    .noticeContainer {
+      background: var(--secondary-highlight-color);
+      color: var(--primary-bg-color);
+      padding: 1rem;
+      margin: 1rem 0;
+      width: 100%;
+      text-align: center;
+
+      @media (min-width: 1049px) {
+        width: 100%;
+      }
+
+      @media (max-width: 768px) {
+        width: calc(100vw - 5rem);
+      }
+
+      a {
+        color: #fff !important;
+        text-decoration: underline;
+      }
+
+      .closeButton {
+        cursor: pointer;
+        float:right;
+        display:inline-block;
+        padding:2px 5px;
+        margin: 1px;
+      }
+    }
+
     .brandType {
       flex-direction: column;
 
diff --git a/source/widgets/layout/Header.tsx b/source/widgets/layout/Header.tsx
index e6b886d3..cdf25168 100644
--- a/source/widgets/layout/Header.tsx
+++ b/source/widgets/layout/Header.tsx
@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useState } from 'react';
 import { BrandType, CardanoEra, CardanoNetwork } from '../../constants';
 import { environment } from '../../environment';
 import { useI18nFeature } from '../../features/i18n/context';
@@ -8,6 +9,7 @@ import { useNavigationFeatureOptionally } from '../../features/navigation';
 import { LocalizedLink } from '../../features/navigation/ui/LocalizedLink';
 import { SearchBar } from '../../features/search/ui/SearchBar';
 import CardanoLogo from '../../public/assets/images/header/cardano-logo.svg';
+import DeleteButton from '../../public/assets/images/delete.svg';
 import styles from './Header.module.scss';
 
 export interface IHeaderProps {
@@ -16,6 +18,7 @@ export interface IHeaderProps {
 }
 
 export const Header = observer((props: IHeaderProps) => {
+  const [open, setOpen] = useState(true)
   const { translate } = useI18nFeature().store;
   const { brandType } = props;
   const navigation = useNavigationFeatureOptionally();
@@ -47,8 +50,19 @@ export const Header = observer((props: IHeaderProps) => {
     styles.triangleSign,
     stakePoolTriangleStyle,
   ]);
+
   return (
     <header className={headerContainerStyles}>
+      <div className={open ? styles.noticeContainer : styles.hiddenNoticeContainer}>
+        <button className={styles.closeButton} onClick={() => setOpen(!open)}><DeleteButton/></button>
+        <p>
+          {translate('header.sunsetPre')}
+          <a href="https://beta.explorer.cardano.org/en/">
+            <span className={styles.cardanoExplorer}>{translate("header.cardanoExplorer")}</span>
+          </a>
+          {translate('header.sunsetPost')}
+        </p>
+      </div>
       <div className={styles.contentContainer}>
         <div className={styles.brandType}>
           <div className={styles.logoContainer}>