From 4206395f49374396752bb0ab5983dff6092bcdf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 23 May 2024 13:17:45 -0500
Subject: [PATCH] fix: footer hydration issues

---
 src/app/layout.tsx                 |  3 ++-
 src/components/Footer/index.css.ts | 14 ++++++++++++++
 src/components/Footer/index.tsx    | 15 ++-------------
 3 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Footer/index.css.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8e233f8b7..251a923f8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
+import { Footer } from '../components/Footer';
 import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import { Checks } from './components/Checks';
@@ -80,7 +81,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               {children}
             </Suspense> */}
 
-            {/* {!isEmbed && <Footer />} */}
+            {!isEmbed && <Footer />}
           </Flex>
         </Theme>
       </body>
diff --git a/src/components/Footer/index.css.ts b/src/components/Footer/index.css.ts
new file mode 100644
index 000000000..d4868545d
--- /dev/null
+++ b/src/components/Footer/index.css.ts
@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+
+export const containerInner = style({
+  justifyContent: 'space-between',
+  width: '100%',
+  maxWidth: 800,
+  padding: '0 16px',
+
+  '@media': {
+    'screen and (max-width: 640px)': {
+      justifyContent: 'center',
+    },
+  },
+});
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 99da41984..db496dce4 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -3,12 +3,10 @@
 import { Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
 import { Suspense } from 'react';
 import packageJSON from '../../../package.json';
-import { useWideFormat } from '../../hooks/useWideFormat';
 import { WoTBVersion } from './components/WoTBVersion';
+import * as styles from './index.css';
 
 export function Footer() {
-  const wideFormat = useWideFormat(640);
-
   return (
     <Theme radius="none">
       <Flex
@@ -20,16 +18,7 @@ export function Footer() {
           backgroundColor: 'var(--color-panel)',
         }}
       >
-        <Flex
-          align="center"
-          justify={wideFormat ? 'between' : 'center'}
-          wrap="wrap"
-          style={{
-            width: '100%',
-            maxWidth: 800,
-            padding: '0 16px',
-          }}
-        >
+        <Flex align="center" wrap="wrap" className={styles.containerInner}>
           <Flex gap="1" justify="center" align="center">
             <Text color="gray" size="2">
               BlitzKit