Skip to content

Commit

Permalink
sunset banner
Browse files Browse the repository at this point in the history
  • Loading branch information
manveru committed Jan 26, 2024
1 parent a65938a commit 81e4cf5
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 4 deletions.
5 changes: 4 additions & 1 deletion source/features/i18n/translations/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down
5 changes: 4 additions & 1 deletion source/features/i18n/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down
5 changes: 4 additions & 1 deletion source/features/i18n/translations/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,10 @@
},
"header": {
"epochsBlocks": "エポックおよびブロック",
"explorer": "ブロックチェーンエクスプローラー"
"explorer": "ブロックチェーンエクスプローラー",
"sunsetPre": "こちらのエクスプローラーのサービスはまもなく終了いたします。新しい",
"sunsetPost": "(カルダノエクスプローラー)のベータ版をお試しください。",
"cardanoExplorer": "Cardano Explorer"
},
"index": {
"pageTitle": "$t(productTitle)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
height: 30px;
position: absolute;
right: 61px;
top: 53px;
top: 5rem;
min-width: 90px;
z-index: 9999;

Expand Down
34 changes: 34 additions & 0 deletions source/widgets/layout/Header.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
14 changes: 14 additions & 0 deletions source/widgets/layout/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
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';
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 {
Expand All @@ -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();
Expand Down Expand Up @@ -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}>
Expand Down

0 comments on commit 81e4cf5

Please sign in to comment.