[DDW-1011] prevent news feed from overlapping full screen dialogs

Author: shawnbusuttil

source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx

@@ -41,6 +41,15 @@ class Step1ConfigurationContainer extends Component<Props> {
     return walletAmount && walletAmount.gte(minRewardsFunds);
   };
 
+  componentDidMount() {
+    const { app } = this.props.stores;
+    const { closeNewsFeed } = this.props.actions.app;
+
+    if (app.newsFeedIsOpen) {
+      closeNewsFeed.trigger();
+    }
+  }
+
   render() {
     const { actions, stores, onBack, onClose } = this.props;
     const { app, staking, wallets } = stores;

source/renderer/app/containers/static/AboutDialog.scss

@@ -1,4 +1,5 @@
 @import '../../themes/mixins/overlay-backdrop';
+@import '../../themes/mixins/layers';
 
 .overlay {
   background-color: var(--theme-about-window-background-color);
@@ -9,7 +10,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 9999;
+  z-index: $dialog-z-index;
 
   &::-webkit-scrollbar-button {
     height: 21px;

source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss

@@ -1,4 +1,5 @@
 @import '../../themes/mixins/overlay-backdrop';
+@import '../../themes/mixins/layers';
 
 .overlay {
   bottom: 0;
@@ -7,7 +8,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 9999;
+  z-index: $dialog-z-index;
   @include overlay-backrop;
 
   *::-webkit-scrollbar-button {

source/renderer/app/stores/AppStore.ts

@@ -196,6 +196,9 @@ export default class AppStore extends Store {
   };
   @action
   _updateActiveDialog = (currentDialog: ApplicationDialog) => {
+    if (this.newsFeedIsOpen) {
+      this.newsFeedIsOpen = false;
+    }
     if (this.activeDialog !== currentDialog) this.activeDialog = currentDialog;
   };
   @action

source/renderer/app/themes/mixins/layers.scss

@@ -1,4 +1,5 @@
-$dialog-z-index: 10001;
+$backdrop-z-index: 10000;
+$dialog-z-index: 10000;
 $loader-backdrop-z-index: 5;
 $back-to-top-z-index: 5;
 $sticky-header-z-index: 1;

source/renderer/app/themes/overrides/ModalOverrides.scss

@@ -1,9 +1,10 @@
 @import '../mixins/overlay-backdrop';
+@import '../mixins/layers.scss';
 
 .overlay {
   @include overlay-backrop;
   overflow: hidden;
-  z-index: 100;
+  z-index: $backdrop-z-index;
 }
 
 .modal {