fix: widget skeleton in relation to layouts

lifinance · Sep 25, 2024 · ddbb841 · ddbb841
1 parent 1949b50
commit ddbb841
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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>