Merge pull request input-output-hk#2917 from input-output-hk/fix/ddw-…

…1011-fix-stake-pool-list-view-overlap [DDW-1011] fix stake pool list view overlapping news feed
fstoqnov-iohk · Mar 22, 2022 · 3ef535d · 3ef535d
2 parents 303ad53 + d7e8a33
commit 3ef535d
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 6 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss b/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;
 }
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/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;

diff --git a/source/renderer/app/components/widgets/BackToTopButton.scss b/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;

diff --git a/source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx b/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;

diff --git a/source/renderer/app/containers/static/AboutDialog.scss b/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;

diff --git a/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss b/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 {

diff --git a/source/renderer/app/stores/AppStore.ts b/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

diff --git a/source/renderer/app/themes/mixins/layers.scss b/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;
diff --git a/source/renderer/app/themes/overrides/ModalOverrides.scss b/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 {