diff --git a/CHANGELOG.md b/CHANGELOG.md index 7aaf2c67a2..1e1303d3b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ Changelog ### Chores +- Extended incident and alert newsfeed type ([PR 2099](https://github.com/input-output-hk/daedalus/pull/2099)) - Enable Cardano Explorer URLs for STN network ([PR 2098](https://github.com/input-output-hk/daedalus/pull/2098)) ## 1.6.0-STN5 diff --git a/source/renderer/app/api/utils/localStorage.js b/source/renderer/app/api/utils/localStorage.js index e8c2b83166..afba6887a2 100644 --- a/source/renderer/app/api/utils/localStorage.js +++ b/source/renderer/app/api/utils/localStorage.js @@ -2,7 +2,7 @@ /* eslint-disable consistent-return */ -import { includes } from 'lodash'; +import { includes, without } from 'lodash'; import { electronStoreConversation } from '../../ipc/electronStoreConversation'; import { WalletMigrationStatuses } from '../../stores/WalletMigrationStore'; import { @@ -188,6 +188,19 @@ export default class LocalStorageApi { return readNews; }; + markNewsAsUnread = async ( + newsTimestamp: NewsTimestamp + ): Promise => { + const readNews = (await LocalStorageApi.get(keys.READ_NEWS)) || []; + if (includes(readNews, newsTimestamp)) { + await LocalStorageApi.set( + keys.READ_NEWS, + without(readNews, newsTimestamp) + ); + } + return readNews; + }; + unsetReadNews = (): Promise => LocalStorageApi.unset(keys.READ_NEWS); getWalletMigrationStatus = (): Promise => diff --git a/source/renderer/app/components/news/IncidentOverlay.js b/source/renderer/app/components/news/IncidentOverlay.js index 88811eb5b5..e0aad3ba93 100644 --- a/source/renderer/app/components/news/IncidentOverlay.js +++ b/source/renderer/app/components/news/IncidentOverlay.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import moment from 'moment'; import { observer } from 'mobx-react'; -import { get } from 'lodash'; +import { get, camelCase } from 'lodash'; import ReactMarkdown from 'react-markdown'; +import classnames from 'classnames'; import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin'; import News from '../../domains/News'; import ButtonLink from '../widgets/ButtonLink'; @@ -59,8 +60,12 @@ export default class IncidentOverlay extends Component { render() { const { incident, currentDateFormat } = this.props; const { content, date, action, title } = incident; + const componentClasses = classnames([ + styles.component, + styles[camelCase(incident.color)], + ]); return ( -
+

{title}

{moment(date).format(currentDateFormat)} diff --git a/source/renderer/app/components/news/IncidentOverlay.scss b/source/renderer/app/components/news/IncidentOverlay.scss index c7fa5bb345..04ab86d577 100644 --- a/source/renderer/app/components/news/IncidentOverlay.scss +++ b/source/renderer/app/components/news/IncidentOverlay.scss @@ -62,7 +62,6 @@ max-height: 464px; max-width: 600px; min-width: 600px; - opacity: 0.8; overflow-y: scroll; padding: 12px 20px; word-break: break-word; @@ -129,6 +128,226 @@ } } + &.red { + background-color: var( + --theme-news-feed-incident-red-overlay-background-color + ); + color: var(--theme-news-feed-incident-red-overlay-text-color); + .actionBtn { + border: 1px solid var(--theme-news-feed-incident-red-overlay-button-color); + &:hover { + background-color: var( + --theme-news-feed-incident-red-overlay-button-color + ); + color: var(--theme-news-feed-incident-red-overlay-background-color); + svg { + g { + path { + stroke: var( + --theme-news-feed-incident-red-overlay-background-color + ); + } + } + } + } + .externalLink { + color: var(--theme-news-feed-incident-red-overlay-button-color); + &:after { + background-color: var( + --theme-news-feed-incident-red-overlay-button-color + ); + } + } + + &:hover { + background-color: var( + --theme-news-feed-incident-red-overlay-button-color + ); + .externalLink { + color: var(--theme-news-feed-incident-red-overlay-background-color); + &:after { + background-color: var( + --theme-news-feed-incident-red-overlay-background-color + ); + } + } + } + } + .content { + &::-webkit-scrollbar-thumb { + background-color: var( + --theme-news-feed-incident-red-overlay-scrollbar-thumb-background + ); + + &:hover { + background-color: var( + --theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hover + ); + } + } + p, + li { + color: var(--theme-news-feed-incident-red-overlay-content-list-color); + strong { + color: var(--theme-news-feed-incident-red-overlay-text-color); + } + } + + a { + border-bottom: 1px solid + var(--theme-news-feed-incident-red-overlay-text-color); + color: var(--theme-news-feed-incident-red-overlay-text-color); + } + } + } + + &.grey { + background-color: var( + --theme-news-feed-incident-grey-overlay-background-color + ); + color: var(--theme-news-feed-incident-grey-overlay-text-color); + .actionBtn { + border: 1px solid + var(--theme-news-feed-incident-grey-overlay-button-color); + &:hover { + background-color: var( + --theme-news-feed-incident-grey-overlay-button-color + ); + color: var(--theme-news-feed-incident-grey-overlay-background-color); + svg { + g { + path { + stroke: var( + --theme-news-feed-incident-grey-overlay-background-color + ); + } + } + } + } + .externalLink { + color: var(--theme-news-feed-incident-grey-overlay-button-color); + &:after { + background-color: var( + --theme-news-feed-incident-grey-overlay-button-color + ); + } + } + + &:hover { + background-color: var( + --theme-news-feed-incident-grey-overlay-button-color + ); + .externalLink { + color: var(--theme-news-feed-incident-grey-overlay-background-color); + &:after { + background-color: var( + --theme-news-feed-incident-grey-overlay-background-color + ); + } + } + } + } + .content { + &::-webkit-scrollbar-thumb { + background-color: var( + --theme-news-feed-incident-grey-overlay-scrollbar-thumb-background + ); + + &:hover { + background-color: var( + --theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hover + ); + } + } + p, + li { + color: var(--theme-news-feed-incident-grey-overlay-content-list-color); + strong { + color: var(--theme-news-feed-incident-grey-overlay-text-color); + } + } + + a { + border-bottom: 1px solid + var(--theme-news-feed-incident-grey-overlay-text-color); + color: var(--theme-news-feed-incident-grey-overlay-text-color); + } + } + } + + &.themeDefault { + background-color: var(--theme-news-feed-incident-overlay-background-color); + color: var(--theme-news-feed-incident-overlay-text-color); + .actionBtn { + background-color: var( + --theme-news-feed-incident-overlay-button-background + ); + border: 1px solid var(--theme-news-feed-incident-overlay-button-color); + &:hover { + background-color: var(--theme-news-feed-incident-overlay-button-color); + color: var(--theme-news-feed-incident-overlay-button-color-hover); + svg { + g { + path { + stroke: var( + --theme-news-feed-incident-overlay-button-color-hover + ); + } + } + } + } + .externalLink { + color: var(--theme-news-feed-incident-overlay-button-color); + &:after { + background-color: var( + --theme-news-feed-incident-overlay-button-color + ); + } + } + + &:hover { + background-color: var(--theme-news-feed-incident-overlay-button-color); + .externalLink { + color: var(--theme-news-feed-incident-overlay-button-color-hover); + &:after { + background-color: var( + --theme-news-feed-incident-overlay-button-color-hover + ); + } + } + } + } + .content { + background-color: var( + --theme-news-feed-incident-overlay-content-background + ); + &::-webkit-scrollbar-thumb { + background-color: var( + --theme-news-feed-incident-overlay-scrollbar-thumb-background + ); + + &:hover { + background-color: var( + --theme-news-feed-incident-overlay-scrollbar-thumb-background-hover + ); + } + } + p, + li { + color: var(--theme-news-feed-incident-overlay-content-list-color); + strong { + color: var(--theme-news-feed-incident-overlay-text-color); + } + } + + a { + border-bottom: 1px solid + var(--theme-news-feed-incident-overlay-text-color); + color: var(--theme-news-feed-incident-overlay-text-color); + } + } + } + .date { font-family: var(--font-medium); font-size: 14px; diff --git a/source/renderer/app/domains/News.js b/source/renderer/app/domains/News.js index 66540184ae..18fa2dbe8f 100644 --- a/source/renderer/app/domains/News.js +++ b/source/renderer/app/domains/News.js @@ -11,6 +11,8 @@ export type NewsAction = { event?: string, }; +export type IncidentColor = 'red' | 'theme-default' | 'grey'; + export const NewsTypes: { INCIDENT: NewsType, ALERT: NewsType, @@ -23,6 +25,16 @@ export const NewsTypes: { INFO: 'info', }; +export const IncidentColors: { + RED: IncidentColor, + THEME_DEFAULT: IncidentColor, + GREY: IncidentColor, +} = { + RED: 'red', + THEME_DEFAULT: 'theme-default', + GREY: 'grey', +}; + export type NewsTypesStateType = { all: Array, unread: Array, @@ -40,6 +52,8 @@ class News { @observable date: number; @observable type: NewsType; @observable read: boolean; + @observable color: ?IncidentColor; + @observable repeatOnStartup: ?boolean; constructor(data: { id: number, @@ -50,6 +64,8 @@ class News { date: number, type: NewsType, read: boolean, + color?: ?IncidentColor, + repeatOnStartup?: ?boolean, }) { Object.assign(this, data); } diff --git a/source/renderer/app/stores/NewsFeedStore.js b/source/renderer/app/stores/NewsFeedStore.js index f433827c9f..60cd39e2e9 100644 --- a/source/renderer/app/stores/NewsFeedStore.js +++ b/source/renderer/app/stores/NewsFeedStore.js @@ -8,7 +8,7 @@ import { NEWS_POLL_INTERVAL_ON_ERROR, NEWS_POLL_INTERVAL_ON_INCIDENT, } from '../config/timingConfig'; -import News, { NewsTypes } from '../domains/News'; +import News, { NewsTypes, IncidentColors } from '../domains/News'; import type { GetNewsResponse, GetReadNewsResponse, @@ -37,6 +37,10 @@ export default class NewsFeedStore extends Store { markNewsAsReadRequest: Request = new Request( this.api.localStorage.markNewsAsRead ); + @observable + markNewsAsUnreadRequest: Request = new Request( + this.api.localStorage.markNewsAsUnread + ); @observable openedAlert: ?News.News = null; @observable fetchLocalNews: boolean = false; @@ -46,7 +50,7 @@ export default class NewsFeedStore extends Store { setup() { // Fetch news on app start - this.getNews(); + this.getNews({ isInit: true }); if (!isTest) { // Refetch news every 30 mins this.pollingNewsIntervalId = setInterval( @@ -56,7 +60,7 @@ export default class NewsFeedStore extends Store { } } - @action getNews = async () => { + @action getNews = async (params?: { isInit: boolean }) => { let rawNews; try { rawNews = await this.getNewsRequest.execute().promise; @@ -66,6 +70,21 @@ export default class NewsFeedStore extends Store { news => news.type === NewsTypes.INCIDENT ); + // Check for "Alerts" with repeatable state and set as unread + if (params && params.isInit && rawNews) { + const repeatableNews = find( + rawNews.items, + news => news.type === NewsTypes.ALERT && news.repeatOnStartup + ); + if (repeatableNews) { + const mainIdentificator = repeatableNews.id || repeatableNews.date; + // Mark Alert as unread in LC if "repeatOnStartup" parameter set + await this.markNewsAsUnreadRequest.execute(mainIdentificator); + // Get all read news to force @computed change + await this.getReadNewsRequest.execute(); + } + } + // Reset "getNews" fast polling interval if set and set regular polling interval if (!isTest && this.pollingNewsOnErrorIntervalId) { // Reset fast error interval @@ -218,7 +237,7 @@ export default class NewsFeedStore extends Store { news = map(this.rawNews, item => { // Match old and new newsfeed JSON format const mainIdentificator = item.id || item.date; - return { + let newsfeedItem = { ...item, id: mainIdentificator, title: item.title[currentLocale], @@ -232,6 +251,22 @@ export default class NewsFeedStore extends Store { date: get(item, ['publishedAt', currentLocale], item.date), read: readNews.includes(mainIdentificator), }; + // Exclude "color" parameter from news that are not incidents + if (item.type === NewsTypes.INCIDENT) { + newsfeedItem = { + ...newsfeedItem, + color: get(item, 'color', IncidentColors.RED), + }; + } + + // Exclude "repeatOnStartup" parameter from news that are not alerts + if (item.type === NewsTypes.ALERT) { + newsfeedItem = { + ...newsfeedItem, + repeatOnStartup: get(item, 'repeatOnStartup', false), + }; + } + return newsfeedItem; }); } return new News.NewsCollection(news); diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js index 7e1bf05508..66e94d5f3c 100644 --- a/source/renderer/app/themes/daedalus/cardano.js +++ b/source/renderer/app/themes/daedalus/cardano.js @@ -380,6 +380,42 @@ export const CARDANO_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#ffffff', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(32, 34, 37, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(32, 34, 37, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js index d386ab3cfe..5373518aa2 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.js +++ b/source/renderer/app/themes/daedalus/dark-blue.js @@ -384,6 +384,42 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(38, 51, 69, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#e9f4fe', + '--theme-news-feed-incident-overlay-button-color': '#e9f4fe', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(233, 244, 254, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(233, 244, 254, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(233, 244, 254, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(38, 51, 69, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js index 0973bb65d4..e4b6db7a23 100644 --- a/source/renderer/app/themes/daedalus/dark-cardano.js +++ b/source/renderer/app/themes/daedalus/dark-cardano.js @@ -361,6 +361,42 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/flight-candidate.js b/source/renderer/app/themes/daedalus/flight-candidate.js index f2b37d3cfe..94be928790 100644 --- a/source/renderer/app/themes/daedalus/flight-candidate.js +++ b/source/renderer/app/themes/daedalus/flight-candidate.js @@ -361,6 +361,42 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.js b/source/renderer/app/themes/daedalus/incentivized-testnet.js index 0f9f1b3e45..52afaa43f1 100644 --- a/source/renderer/app/themes/daedalus/incentivized-testnet.js +++ b/source/renderer/app/themes/daedalus/incentivized-testnet.js @@ -362,6 +362,42 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js index 69e766e494..833e34b510 100644 --- a/source/renderer/app/themes/daedalus/light-blue.js +++ b/source/renderer/app/themes/daedalus/light-blue.js @@ -379,6 +379,42 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(36, 62, 98, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#fafbfc', + '--theme-news-feed-incident-overlay-button-color': '#fafbfc', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(250, 251, 252, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(250, 251, 252, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(250, 251, 252, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(36, 62, 98, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.js b/source/renderer/app/themes/daedalus/shelley-testnet.js index 06c34e58e5..f1b6a8c3b5 100644 --- a/source/renderer/app/themes/daedalus/shelley-testnet.js +++ b/source/renderer/app/themes/daedalus/shelley-testnet.js @@ -361,6 +361,42 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(42, 43, 60, 0.98)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js index 68284a552d..a2576609b1 100644 --- a/source/renderer/app/themes/daedalus/white.js +++ b/source/renderer/app/themes/daedalus/white.js @@ -366,6 +366,42 @@ export const WHITE_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(41, 181, 149, 0.1)', '--theme-news-feed-no-fetch-color': '#2d2d2d', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(255, 255, 255, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#2d2d2d', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(41, 181, 149, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(255, 255, 255, 1)', + '--theme-news-feed-incident-overlay-button-color': '#29b595', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(45, 45, 45, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(45, 45, 45, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(45, 45, 45, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(41, 181, 149, 0.1)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js index 657d7f62c7..1da362bae7 100644 --- a/source/renderer/app/themes/daedalus/yellow.js +++ b/source/renderer/app/themes/daedalus/yellow.js @@ -369,6 +369,42 @@ export const YELLOW_THEME_OUTPUT = { '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#2d2d2d', + '--theme-news-feed-incident-overlay-background-color': + 'rgba(255, 185, 35, 0.98)', + '--theme-news-feed-incident-overlay-text-color': '#2d2d2d', + '--theme-news-feed-incident-overlay-button-color': '#2d2d2d', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': + 'rgba(45, 45, 45, 0.3)', + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': + 'rgba(45, 45, 45, 0.5)', + '--theme-news-feed-incident-overlay-content-list-color': + 'rgba(45, 45, 45, 0.7)', + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': + 'rgba(255, 255, 255, 1)', + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-grey-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-button-color': '#ffffff', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': + 'rgba(255, 255, 255, 0.3)', + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': + 'rgba(255, 255, 255, 0.5)', + '--theme-news-feed-incident-red-overlay-content-list-color': + 'rgba(255, 255, 255, 0.7)', }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js index 23e5463256..99d8739411 100644 --- a/source/renderer/app/themes/utils/createTheme.js +++ b/source/renderer/app/themes/utils/createTheme.js @@ -657,6 +657,53 @@ export const createDaedalusComponentsTheme = ( '--theme-news-feed-icon-toggle-hover-background-color': 'rgba(0, 0, 0, 0.1)', '--theme-news-feed-no-fetch-color': '#fafbfc', + '--theme-news-feed-incident-overlay-background-color': `${chroma( + background.secondary.regular + ).alpha(0.96)}`, + '--theme-news-feed-incident-overlay-text-color': `${text.primary}`, + '--theme-news-feed-incident-overlay-button-color': `${text.primary}`, + '--theme-news-feed-incident-overlay-scrollbar-thumb-background': `${chroma( + text.primary + ).alpha(0.3)}`, + '--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove': `${chroma( + text.primary + ).alpha(0.3)}`, + '--theme-news-feed-incident-overlay-content-list-color': `${chroma( + text.primary + ).alpha(0.7)}`, + '--theme-news-feed-incident-overlay-content-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-background': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-incident-overlay-button-color-hover': `${chroma( + background.secondary.regular + ).alpha(0.96)}`, + '--theme-news-feed-incident-grey-overlay-background-color': + 'rgba(68, 68, 68, 0.98)', + '--theme-news-feed-incident-grey-overlay-text-color': `${text.primary}`, + '--theme-news-feed-incident-grey-overlay-button-color': `${text.primary}`, + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background': `${chroma( + text.primary + ).alpha(0.3)}`, + '--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove': `${chroma( + text.primary + ).alpha(0.5)}`, + '--theme-news-feed-incident-grey-overlay-content-list-color': `${chroma( + text.primary + ).alpha(0.7)}`, + '--theme-news-feed-incident-red-overlay-background-color': + 'rgba(171, 23, 0, 0.98)', + '--theme-news-feed-incident-red-overlay-text-color': `${text.primary}`, + '--theme-news-feed-incident-red-overlay-button-color': `${text.primary}`, + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background': `${chroma( + text.primary + ).alpha(0.3)}`, + '--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove': `${chroma( + text.primary + ).alpha(0.5)}`, + '--theme-news-feed-incident-red-overlay-content-list-color': `${chroma( + text.primary + ).alpha(0.7)}`, }, newsItem: { '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', diff --git a/storybook/stories/news/IncidentOverlay.stories.js b/storybook/stories/news/IncidentOverlay.stories.js index c3209ae7dc..81a16bfd11 100644 --- a/storybook/stories/news/IncidentOverlay.stories.js +++ b/storybook/stories/news/IncidentOverlay.stories.js @@ -40,4 +40,34 @@ storiesOf('News|Incidents', module) DATE_ENGLISH_OPTIONS[0].value )} /> + )) + .add('Incident Overlay - Themed', props => ( + + )) + .add('Incident Overlay - Grey', props => ( + ));