🐛 Fix CSS regression / FOUC

vercel/next.js#36675
lmachens · May 16, 2022 · 2f3ec8f · 2f3ec8f
1 parent 5358a3b
commit 2f3ec8f
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 580 deletions.
diff --git a/components/AppLayout/AppLayout.tsx b/components/AppLayout/AppLayout.tsx
@@ -1,4 +1,4 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, Container } from "@mantine/core";
 import { ReactNode, useState } from "react";
 import { CollectionLink } from "../../lib/staticProps";
 import AppHeader from "../AppHeader/AppHeader";
@@ -26,7 +26,7 @@ const AppLayout = ({ collectionLinks, children }: Props) => {
         <AppNavbar opened={openedNavbar} collectionLinks={collectionLinks} />
       }
     >
-      {children}
+      <Container>{children}</Container>
     </AppShell>
   );
 };

diff --git a/components/AppNavbar/AppNavbar.tsx b/components/AppNavbar/AppNavbar.tsx
@@ -1,5 +1,5 @@
 import { Navbar, ScrollArea } from "@mantine/core";
-import { HomeIcon } from "@modulz/radix-icons";
+import { HomeIcon } from "@primer/octicons-react";
 import { CollectionLink } from "../../lib/staticProps";
 import NavbarCollectionLinks from "./NavbarCollectionLinks/NavbarCollectionLinks";
 import NavbarMainLink from "./NavbarMainLink/NavbarMainLink";
@@ -23,10 +23,7 @@ const AppNavbar = ({ collectionLinks, opened }: Props) => {
       width={{ sm: 200, lg: 300 }}
     >
       <ScrollArea style={{ height: "100vh" }} type="scroll">
-        <NavbarMainLink
-          href="/"
-          icon={<HomeIcon style={{ height: 18, width: 18 }} />}
-        >
+        <NavbarMainLink href="/" icon={<HomeIcon size={18} />}>
           Home
         </NavbarMainLink>
         {links}

diff --git a/components/AppNavbar/NavbarCollectionLinks/NavbarCollectionLinks.tsx b/components/AppNavbar/NavbarCollectionLinks/NavbarCollectionLinks.tsx
@@ -1,5 +1,5 @@
 import { Text } from "@mantine/core";
-import { ChevronDownIcon } from "@modulz/radix-icons";
+import { ChevronDownIcon } from "@primer/octicons-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";