fix: layout

page-container/index-page/ContactInformation.tsx

@@ -33,29 +33,26 @@ const useStyle = makeStyles((theme) => ({
 }));
 
 const ContactInformation = ({ className }: Partial<{ className: string }>) => {
-  const classes = useStyle();
   return (
-    <Grid component="address" container className={[className, classes.root].join(' ')}>
-      <Grid item md={12}>
-        <Typography component="span" variant="h2" color="primary">
-          Contact
-        </Typography>
-      </Grid>
-      {contacts.map((contact) => (
-        <Grid key={contact.way} item container direction="column" md={6}>
-          <Grid item>
-            <Typography component="span" variant="subtitle1" color="secondary">
+    <div className="flex flex-column flex-wrap">
+      <div className="w-full">
+        <h2 className="text-2xl text-gray">Contact</h2>
+        <br />
+      </div>
+      <div className="flex w-full gap-4">
+        {contacts.map((contact) => (
+          <div>
+            <div className="text-white">
               {contact.way}
-            </Typography>
-          </Grid>
-          <Grid item className={classes.information}>
-            <Typography component="span" variant="body1">
+            </div>
+            <div>
               {contact.information}
-            </Typography>
-          </Grid>
-        </Grid>
-      ))}
-    </Grid>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
   );
 };
 

shared/components/Logo.tsx

@@ -1,6 +1,6 @@
 const Logo = () => (
-  <div style={{ height: "48px", width: "48px" }}>
-    <img style={{ "borderRadius": "9999px" }} src="/logo_fractal_labs.png" width="24" height="24" alt="Fractal Labs" />
+  <div className="avatar max-w-14">
+    <img className="w-12 rounded-full" src="/logo_fractal_labs.png" alt="Fractal Labs" />
   </div>
 );
 export default Logo;

shared/components/LogoWithName.tsx

@@ -5,7 +5,7 @@ import Logo from './Logo';
 
 const LogoWithName = () => (
   <a href="/">
-    <Grid container wrap="nowrap">
+    <Grid container wrap="nowrap" className="items-center gap-2">
       <Box mr="8px">
         <Logo />
       </Box>

tailwind.config.js

@@ -14,6 +14,8 @@ module.exports = {
     extend: {},
   },
   safelist: [
+    'avatar',
+    { pattern: /round/ },
     { pattern: /flex/ },
     { pattern: /bg-/ },
     { pattern: /w-/ },