From 4e8ecffc172a3896985839952897b7c1a18d5bfb Mon Sep 17 00:00:00 2001
From: Nikita <nikita.cedrik@gmail.com>
Date: Mon, 9 Dec 2024 13:10:30 +0400
Subject: [PATCH] fix: hide all content under placeholder

---
 src/popup/App.vue                                | 2 +-
 src/popup/components/Modals/PasswordLogin.vue    | 3 +++
 src/popup/components/Modals/ResetWalletModal.vue | 2 ++
 src/styles/variables.scss                        | 2 ++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index 953dcca3c..ed5cc1818 100644
--- 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
index 70ed652e8..70d75038f 100644
--- 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
index e5d0b1857..2f33e4995 100644
--- 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
index 5f3516fa6..46d7a5a2e 100644
--- 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;