fix: hide all content under placeholder

superhero-com · Dec 16, 2024 · 4e8ecff · 4e8ecff
1 parent 68ed6d3
commit 4e8ecff
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -365,7 +365,7 @@ export default defineComponent({
 
     .app-unauthenticated-placeholder {
       position: absolute;
-      z-index: 2;
+      z-index: $z-index-placeholder;
       inset: 0;
       visibility: hidden;
       opacity: 0;

diff --git a/src/popup/components/Modals/PasswordLogin.vue b/src/popup/components/Modals/PasswordLogin.vue
@@ -143,9 +143,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/variables' as *;
 @use '@/styles/typography';
 
 .password-login {
+  z-index: $z-index-login-modal;
+
   .content-wrapper,
   .password-login-form {
     display: flex;

diff --git a/src/popup/components/Modals/ResetWalletModal.vue b/src/popup/components/Modals/ResetWalletModal.vue
@@ -132,6 +132,8 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 
 .reset-wallet {
+  z-index: $z-index-login-modal;
+
   .icon-wrapper {
     margin: 8px auto 18px;
     color: $color-danger;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -13,6 +13,8 @@ $font-mono: 'IBM Plex Mono';
 
 $z-index-header: 2;
 $z-index-modal: $z-index-header + 2;
+$z-index-placeholder: $z-index-modal + 1;
+$z-index-login-modal: $z-index-placeholder + 1;
 $z-index-loader: $z-index-modal - 1; // Modals should always be above the loader
 $z-index-back-to-top: $z-index-modal + 1;