From ddbb8410419a178363aec8fc10f6a1248f9d73b1 Mon Sep 17 00:00:00 2001
From: Nathan Richards <DNR500@users.noreply.github.com>
Date: Wed, 25 Sep 2024 21:33:15 +0200
Subject: [PATCH] fix: widget skeleton in relation to layouts

---
 .../Skeleton/WidgetSkeleton.style.tsx         | 22 ++++++++++++++++++-
 .../components/Skeleton/WidgetSkeleton.tsx    | 19 ++++++++--------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/widget/src/components/Skeleton/WidgetSkeleton.style.tsx b/packages/widget/src/components/Skeleton/WidgetSkeleton.style.tsx
index 80de181f8..557e0a6ca 100644
--- a/packages/widget/src/components/Skeleton/WidgetSkeleton.style.tsx
+++ b/packages/widget/src/components/Skeleton/WidgetSkeleton.style.tsx
@@ -57,7 +57,27 @@ export const SkeletonSendToWalletButton = styled(Button)({
   pointerEvents: 'none',
 });
 
-export const SkeletonPoweredByContainer = styled(Box)({
+export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
+  flexGrow: 1,
   justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  paddingBottom: theme.spacing(2),
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+}));
+
+export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 1.5, 3),
+    overflow: 'auto',
+  };
 });
diff --git a/packages/widget/src/components/Skeleton/WidgetSkeleton.tsx b/packages/widget/src/components/Skeleton/WidgetSkeleton.tsx
index b9ffd664e..f4832894c 100644
--- a/packages/widget/src/components/Skeleton/WidgetSkeleton.tsx
+++ b/packages/widget/src/components/Skeleton/WidgetSkeleton.tsx
@@ -7,12 +7,12 @@ import {
   FlexContainer,
   RelativeContainer,
 } from '../AppContainer.js';
-import { Container as HeaderContainer } from '../Header/Header.style.js';
 import {
   SkeletonAmountContainer,
   SkeletonCard,
   SkeletonCardRow,
   SkeletonHeaderAppBar,
+  SkeletonHeaderContainer,
   SkeletonInputCard,
   SkeletonPoweredByContainer,
   SkeletonReviewButton,
@@ -87,8 +87,8 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
   return (
     <ThemeProvider theme={theme}>
       <AppExpandedContainer>
-        <RelativeContainer>
-          <HeaderContainer>
+        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
+          <SkeletonHeaderContainer>
             {!hiddenUI.includes('walletMenu') ? (
               <SkeletonHeaderAppBar>
                 <SkeletonWalletMenuButton />
@@ -100,7 +100,8 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
               <Skeleton width={126} height={34} variant="text" />
               <SkeletonIcon />
             </SkeletonHeaderAppBar>
-          </HeaderContainer>
+          </SkeletonHeaderContainer>
+
           <FlexContainer
             sx={{
               gap: 2,
@@ -123,12 +124,12 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
                 </SkeletonSendToWalletButton>
               ) : null}
             </SkeletonReviewButtonContainer>
-            {!hiddenUI.includes('poweredBy') ? (
-              <SkeletonPoweredByContainer>
-                <Skeleton width={96} height={18} variant="text" />
-              </SkeletonPoweredByContainer>
-            ) : null}
           </FlexContainer>
+          {!hiddenUI.includes('poweredBy') ? (
+            <SkeletonPoweredByContainer>
+              <Skeleton width={96} height={18} variant="text" />
+            </SkeletonPoweredByContainer>
+          ) : null}
         </RelativeContainer>
       </AppExpandedContainer>
     </ThemeProvider>