Merge pull request #2917 from input-output-hk/fix/ddw-1011-fix-stake-pool-list-view-overlap

[DDW-1011] fix stake pool list view overlapping news feed

Author: DominikGuzei

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Fixes
 
+- Fixed stake pool list view overlapping news feed ([PR 2917](https://github.com/input-output-hk/daedalus/pull/2917))
 - Restored opacity for search icon when focused ([PR 2909](https://github.com/input-output-hk/daedalus/pull/2909))
 - Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907))
 - Fix warning sign displayed when recommend decimals is zero ([PR 2905](https://github.com/input-output-hk/daedalus/pull/2905))

source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss

@@ -1,3 +1,5 @@
+@import '../../../themes/mixins/layers.scss';
+
 .component {
   align-items: center;
   background-color: var(--rp-modal-overlay-bg-color);
@@ -8,4 +10,5 @@
   position: fixed;
   right: 0;
   top: 134px;
+  z-index: $loader-backdrop-z-index;
 }

source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss

@@ -1,5 +1,6 @@
 @import '../../../themes/mixins/link';
 @import '../../../themes/mixins/loading-spinner';
+@import '../../../themes/mixins/layers';
 
 .component {
   .headerWrapper {
@@ -105,7 +106,7 @@
       padding: 0 20px;
       position: sticky;
       top: 0;
-      z-index: 999;
+      z-index: $sticky-header-z-index;
 
       tr {
         border: 0;

source/renderer/app/components/widgets/BackToTopButton.scss

@@ -1,3 +1,5 @@
+@import '../../themes/mixins/layers.scss';
+
 .component {
   background-color: var(--theme-back-to-top-button-background-color);
   border-radius: 5px;
@@ -15,7 +17,7 @@
   top: 144px;
   transform: translateX(-50%);
   transition: opacity 0.25s ease-out, top 0.25s ease-out;
-  z-index: 1001;
+  z-index: $back-to-top-z-index;
 
   &.isActive {
     opacity: 1;

source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx

@@ -27,6 +27,15 @@ class RedeemItnRewardsContainer extends Component<Props> {
     };
   }
 
+  componentDidMount() {
+    const { app } = this.props.stores;
+    const { closeNewsFeed } = this.props.actions.app;
+
+    if (app.newsFeedIsOpen) {
+      closeNewsFeed.trigger();
+    }
+  }
+
   render() {
     const { stores, actions } = this.props;
     const { allWallets } = stores.wallets;

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 +1,5 @@
-$dialog-z-index: 200;
+$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 {