diff --git a/package.json b/package.json index d3c86de1..df77f5b0 100644 --- a/package.json +++ b/package.json @@ -145,6 +145,6 @@ "webpack": "4.43.0" }, "engines": { - "node": "^10 || ^12" + "node": "^10 || ^12 || ^16" } } 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 (
+
+ +

+ {translate('header.sunsetPre')} + + {translate("header.cardanoExplorer")} + + {translate('header.sunsetPost')} +

+