diff --git a/client/index.pug b/client/index.pug index bd099072..4f5a8e84 100644 --- a/client/index.pug +++ b/client/index.pug @@ -35,6 +35,13 @@ head body(lang=lang, dir=dir) #explorer!= prerender_html || '' + if process.env.MENU_ACTIVE === 'Liquid' + script. + if (document.cookie.indexOf('liquid_banner_dismissed=1') !== -1) { + var el = document.querySelector('.announcement-banner'); + if (el) el.style.display = 'none'; + } + if !noscript script(src=staticRoot+'app.js', async) != process.env.FOOT_HTML diff --git a/client/src/app.js b/client/src/app.js index 73060394..a5ff5f08 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -863,6 +863,12 @@ export default function main( burgerMenu.classList.toggle('open-menu'); }) + on('.announcement-banner-close', 'click').subscribe(_ => { + document.cookie = 'liquid_banner_dismissed=1; path=/; max-age=31536000; SameSite=Lax' + const banner = document.querySelector('.announcement-banner') + if (banner) banner.style.display = 'none' + }) + const closeNetworkMenus = () => { document.querySelectorAll('.nav-item.open-network-menu').forEach(menu => { menu.classList.remove('open-network-menu') diff --git a/client/src/components/icons.js b/client/src/components/icons.js index 22883416..6c8a5205 100644 --- a/client/src/components/icons.js +++ b/client/src/components/icons.js @@ -110,3 +110,8 @@ export const ChevronUpIcon = ({ className } = {}) => + +export const CloseIcon = ({ className } = {}) => + diff --git a/client/src/views/announcement-banner.js b/client/src/views/announcement-banner.js new file mode 100644 index 00000000..9141e424 --- /dev/null +++ b/client/src/views/announcement-banner.js @@ -0,0 +1,16 @@ +import { CloseIcon } from '../components/icons' + +const isLiquidMainnet = process.env.MENU_ACTIVE === 'Liquid' + +export default () => + isLiquidMainnet + ?
+

+ Issued-asset transfers have resumed. LBTC transfers and peg-out operations remain paused. Updates:{' '} + @Liquid_BTC +

+ +
+ : "" diff --git a/client/src/views/layout.js b/client/src/views/layout.js index 893816ed..a801363b 100644 --- a/client/src/views/layout.js +++ b/client/src/views/layout.js @@ -1,6 +1,7 @@ import navbar from './navbar' import footer from './footer' import subnav from './sub-navbar' +import announcementBanner from './announcement-banner' export default (body, opt) => { const mainKey = opt.view || opt.activeTab || opt.page && opt.page.pathname || 'main' @@ -8,6 +9,7 @@ export default (body, opt) => { return
{ navbar(opt) } { subnav(opt.t, opt.isTouch, opt.activeTab, opt.page) } + { announcementBanner() }
{ body }
diff --git a/flavors/liquid-mainnet/extras.css b/flavors/liquid-mainnet/extras.css index 2851dec5..1ab18b2b 100644 --- a/flavors/liquid-mainnet/extras.css +++ b/flavors/liquid-mainnet/extras.css @@ -12,4 +12,57 @@ .navbar { background-image: linear-gradient(-90deg, rgba(13, 141, 119, 1) 0%, rgba(17, 103, 97, 1) 16%, rgba(25, 68, 74, 1) 35%, rgba(29, 42, 48, 1) 57%, rgba(14, 16, 17, 1) 100%); +} + +.announcement-banner { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + width: 100%; + margin-top: 24px; + padding: 16px 60px; + background: var(--danger-color); + border-radius: 12px; + box-sizing: border-box; +} + +@media only screen and (max-width: 900px) { + .announcement-banner { + padding: 14px 20px; + } +} + +.announcement-banner-message { + margin: 0; + color: #fff; + text-align: center; + font-size: 15px; + line-height: 1.4; +} + +.announcement-banner-message a { + color: #fff; + font-weight: 700; + text-decoration: underline; +} + +.announcement-banner-message a:hover { + text-decoration: none; +} + +.announcement-banner-close { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + padding: 4px; + cursor: pointer; + color: #fff; +} + +.announcement-banner-close:hover { + color: rgba(255, 255, 255, 0.7); } \ No newline at end of file