Full screen width - demo

Concordium · Dec 20, 2024 · 7db0ae6 · 7db0ae6
1 parent 5d559af
commit 7db0ae6
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss
@@ -20,6 +20,10 @@
         z-index: 1;
         backdrop-filter: blur(10px);
         background: rgba($color-black, 0.9);
+
+        .tablet & {
+            margin-top: rem(60px);
+        }
     }
 
     &__top {
@@ -56,6 +60,7 @@
             .tablet & {
                 padding: rem(12px);
                 border-radius: rem(12px);
+                min-width: rem(100px);
             }
         }
     }
@@ -75,6 +80,7 @@
 
         .tablet & {
             background: unset;
+            display: none;
         }
 
         &_info {
@@ -202,6 +208,12 @@
             border-radius: rem(12px);
             border: 1px solid $color-grey-3;
             background: $color-grey-1;
+
+            .tablet & {
+                max-width: rem(655px);
+                margin-left: auto;
+                margin-right: auto;
+            }
         }
 
         &_search-form {

diff --git a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx
@@ -189,7 +189,6 @@ function AddToken({ account }: { account: string }) {
                         </>
                     )}
                 </Form>
-                {isLoading && !haveTokens && <LoaderInline />}
                 <TokenList>
                     {filteredTokens.map((token) => (
                         <TokenList.Item
@@ -203,6 +202,7 @@ function AddToken({ account }: { account: string }) {
                         />
                     ))}
                 </TokenList>
+                {isLoading && !haveTokens && <LoaderInline />}
             </Page.Main>
             <Page.Footer>{!!haveTokens && <Button.Main label={t('addSelected')} onClick={setTokens} />}</Page.Footer>
         </Page>

diff --git a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss
@@ -18,6 +18,10 @@
         overflow: auto;
         max-height: rem(200px);
 
+        .tablet & {
+            max-height: rem(500px);
+        }
+
         &::-webkit-scrollbar {
             display: none;
         }

diff --git a/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss b/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss
@@ -19,7 +19,7 @@
     &__list {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        justify-content: center;
         gap: rem(7px);
         margin-top: rem(8px);
 

diff --git a/packages/browser-wallet/src/popup/shared/window-helpers.ts b/packages/browser-wallet/src/popup/shared/window-helpers.ts
@@ -3,6 +3,7 @@ import { spawnedPopupUrl, web3IdProofPopupUrl } from '@shared/constants/url';
 export const isSpawnedWindow = window.location.href.includes(spawnedPopupUrl);
 export const isSpawnedWeb3IdProofWindow = window.location.href.includes(web3IdProofPopupUrl);
 export const isFullscreenWindow = window.location.hash === '#fullscreen';
+export const isFullscreenDemoWindow = window.location.hash === '#fullscreen-demo';
 export const haveInitialEntry = (() => {
     const url = new URL(window.location.href);
     const navTo = url.searchParams.get('navTo');

diff --git a/packages/browser-wallet/src/popup/shell/Root.tsx b/packages/browser-wallet/src/popup/shell/Root.tsx
@@ -8,6 +8,7 @@ import { Dimensions, large, medium, small } from '@popup/constants/dimensions';
 import { popupMessageHandler } from '@popup/shared/message-handler';
 import {
     haveInitialEntry,
+    isFullscreenDemoWindow,
     isFullscreenWindow,
     isSpawnedWeb3IdProofWindow,
     isSpawnedWindow,
@@ -47,6 +48,10 @@ function Scaling({ children }: { children: ReactElement }) {
         if (isPopupX) {
             body?.classList.add('popup-x');
             html?.classList.add('popup-x');
+
+            if (isFullscreenDemoWindow) {
+                html?.classList.add('tablet');
+            }
         } else {
             body?.classList.remove('popup-x');
             html?.classList.remove('popup-x');
@@ -81,6 +86,12 @@ function Scaling({ children }: { children: ReactElement }) {
             if (isFullscreenWindow) {
                 body.style.margin = '32px auto';
             }
+
+            if (isFullscreenDemoWindow) {
+                body.style.width = `100%`;
+                body.style.height = `100%`;
+                body.style.margin = 'auto';
+            }
         }
 
         if (dimensions && isSpawnedWindow) {