refactor: active scanner html class

superhero-com · Aug 5, 2024 · db78d96 · db78d96
1 parent fe4a103
commit db78d96
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 63 deletions.
diff --git a/src/composables/ui.ts b/src/composables/ui.ts
@@ -80,7 +80,7 @@ export function useUi() {
   }
 
   function setMobileQrScannerVisible(open: boolean) {
-    document.querySelector('body')?.classList[(open) ? 'add' : 'remove']('scanner-active');
+    document.documentElement?.classList[(open) ? 'add' : 'remove']('scanner-active');
     isMobileQrScannerVisible.value = open;
   }
 

diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -358,6 +358,7 @@ export default defineComponent({
   @include mixins.env-extension {
     min-width: $extension-width;
     min-height: $extension-height;
+    max-width: $phone-width;
   }
 
   @include mixins.env-web {

diff --git a/src/popup/pages/Names/AuctionList.vue b/src/popup/pages/Names/AuctionList.vue
@@ -154,7 +154,7 @@ export default defineComponent({
 
 .auction-list {
   .toolbar {
-    --background: var(--screen-bg-color);
+    --background: var(--screen-bg-color); // Ionic related variable
     --min-height: 0;
 
     padding-inline: var(--screen-padding-x);

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -30,55 +30,74 @@
   --icon-size-xxl: 44px;
 }
 
-html.is-extension {
-  // Fixes issue with extension not rendering properly
-  // .tabs-inner & .ion-page classes are added by Ionic
-  ion-tabs,
-  .tabs-inner,
-  ion-router-outlet,
-  .ion-page {
-    contain: layout style !important;
-  }
+html {
+  &.is-extension {
+    // Fixes issue with extension not rendering properly
+    // .tabs-inner & .ion-page classes are added by Ionic
+    ion-tabs,
+    .tabs-inner,
+    ion-router-outlet,
+    .ion-page {
+      contain: layout style !important;
+    }
 
-  body {
-    position: unset;
+    body {
+      position: unset;
+    }
   }
-}
 
-// When scanner is active we need to hide everything else
-// because the scanner will show-up behind the webview
-body.scanner-active {
-  background-color: transparent;
+  // When scanner is active we need to hide everything else
+  // because the scanner will show-up behind the webview
+  &.scanner-active {
+    --background: transparent; // Ionic related variable
+    --ion-background-color: transparent;
 
-  --background: transparent;
-  --ion-background-color: transparent;
-  --screen-bg-color: transparent;
+    body,
+    #app,
+    .app .app-wrapper,
+    ion-content,
+    .ionic-wrapper,
+    .ion-content-bg,
+    .ion-content-bg--lighter,
+    .account-ion-content {
+      --background: transparent; // Ionic related variable
 
-  .app .app-wrapper {
-    --screen-bg-color: transparent;
+      background: transparent !important;
+    }
+
+    .app {
+      --screen-bg-color: transparent;
+    }
 
-    background: transparent;
+    #app {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+    }
   }
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  background-color: $color-bg-body;
 
-  .ionic-wrapper,
   &.color-bg-app {
-    background-color: transparent;
+    background-color: $color-bg-app;
   }
+}
 
-  #app {
-    background: transparent;
-    position: absolute;
-    z-index: 2;
-    width: 100%;
-  }
+#app {
+  --ion-text-color: $color-white;
+  --ion-font-family: $font-sans;
 
-  ion-content,
-  .ion-content-bg,
-  .ion-content-bg--lighter,
-  .account-ion-content {
-    --background: transparent;
+  height: 100%;
 
-    background: transparent;
+  @include mixins.desktop {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 }
 
@@ -109,31 +128,6 @@ ion-content {
   }
 }
 
-
-body {
-  height: 100%;
-  margin: 0;
-  background-color: $color-black;
-
-  &.color-bg-app {
-    background-color: $color-bg-app;
-  }
-}
-
-#app {
-  --ion-text-color: $color-white;
-  --ion-font-family: $font-sans;
-
-  height: 100%;
-
-  @include mixins.desktop {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 @-moz-document url-prefix() {
   html {
     scrollbar-width: none;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -35,6 +35,7 @@ $color-dialog: #2b2b2b;
 $color-border: #232323;
 $color-border-hover: #2f2f2f;
 
+$color-bg-body: #0b0b0b;
 $color-bg-1: #131313;
 $color-bg-1-hover: #090909;
 $color-bg-2: #171717;