fix: consistent rendering for 0x

hirosystems · Jul 16, 2024 · b534659 · b534659
1 parent 55ab90e
commit b534659
Showing 1 changed file with 35 additions and 31 deletions.
diff --git a/src/app/_components/PageWrapper.tsx b/src/app/_components/PageWrapper.tsx
@@ -1,52 +1,56 @@
 'use client';
 
 import { useColorModeValue } from '@chakra-ui/react';
+import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { AddNetworkModal } from '../../common/components/modals/AddNetwork';
 import { NakamotoModal } from '../../common/components/modals/Nakamoto';
 import { IncidentContent } from '../../common/types/incidents';
 import { TokenPrice } from '../../common/types/tokenPrice';
+import { Box } from '../../ui/Box';
 import { Flex } from '../../ui/Flex';
 import { Footer } from './Footer';
 import { NavBar } from './NavBar';
 import { NetworkModeToast } from './NetworkModeToast';
 import { CMSStatusBars } from './StatusBar/CMSStatusBars';
 import { IncidentsStatusBarWithErrorBoundary } from './StatusBar/IncidentsStatusBar';
 
+const StyledWrapper = styled(Box)<{ bg: string }>`
+  font-variant-ligatures: no-contextual;
+  max-width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow: hidden;
+  display: flex; /* Assuming 'direction' is meant to be flex-direction */
+  flex-direction: column;
+  position: relative;
+  background: ${props => props.bg};
+  background-repeat: no-repeat, repeat;
+  background-size:
+    100% 530px,
+    100% 100%;
+`;
+
 function WrapperWithBg({ children }: { children: ReactNode }) {
-  return (
-    <Flex
-      maxWidth="100vw"
-      minHeight="100vh"
-      overflowX="hidden"
-      direction="column"
-      position="relative"
-      overflow="hidden"
-      bg={useColorModeValue(
-        `linear-gradient(
-                 29.53deg, 
-                 #9528F7 2.94%, 
-                 #522DE7 39.91%, 
-                 #221A71 76.87%, 
-                 #0F102B 93.08%
-               ), 
-               white`,
-        `linear-gradient(
-                 29.53deg, 
-                 #9528F7 2.94%, 
-                 #522DE7 39.91%, 
-                 #221A71 76.87%, 
-                 #0F102B 93.08%
-               ), 
-               black`
-      )}
-      bgRepeat="no-repeat, repeat"
-      bgSize="100% 530px, 100% 100%"
-    >
-      {children}
-    </Flex>
+  const bgColor = useColorModeValue(
+    `linear-gradient(
+       29.53deg, 
+       #9528F7 2.94%, 
+       #522DE7 39.91%, 
+       #221A71 76.87%, 
+       #0F102B 93.08%
+     ), white`,
+    `linear-gradient(
+       29.53deg, 
+       #9528F7 2.94%, 
+       #522DE7 39.91%, 
+       #221A71 76.87%, 
+       #0F102B 93.08%
+     ), black`
   );
+
+  return <StyledWrapper bg={bgColor}>{children}</StyledWrapper>;
 }
 
 export function PageWrapper({