input-output-hk · nikolaglumac · Jul 27, 2020 · Jul 27, 2020 · Jul 27, 2020 · Jul 27, 2020
diff --git 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
@@ -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<NewsTimestamp[]> => {
+    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<void> => LocalStorageApi.unset(keys.READ_NEWS);
 
   getWalletMigrationStatus = (): Promise<WalletMigrationStatus> =>

diff --git 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<Props> {
   render() {
     const { incident, currentDateFormat } = this.props;
     const { content, date, action, title } = incident;
+    const componentClasses = classnames([
+      styles.component,
+      styles[camelCase(incident.color)],
+    ]);
     return (
-      <div className={styles.component}>
+      <div className={componentClasses}>
         <h1 className={styles.title}>{title}</h1>
         <span className={styles.date}>
           {moment(date).format(currentDateFormat)}

diff --git 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
@@ -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<News>,
   unread: Array<News>,
@@ -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);
   }