FIX: updated stylings for error and not-found

penumbra-zone · Aug 30, 2024 · 8ad9656 · 8ad9656
1 parent cdb8586
commit 8ad9656
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx
@@ -18,15 +18,15 @@ export default function Error({
   }, [error]);
 
   return (
-    <div className="bg-primary/60 py-8 rounded-lg border">
-      <div className="flex flex-col gap-8 items-center">
-        <h1 className="text-lg font-medium sm:w-11/12 w-full">An error has occurred.</h1>
-        <p className="text-sm sm:w-11/12 w-full">Apologies, but something happened with Cuiloa and the client couldn&apos;t recover.</p>
-        <div className="flex sm:w-11/12 w-full gap-8">
-          <Button className="w-fit" asChild>
+    <div className="bg-primary/60 px-3 py-4 sm:p-8 rounded-lg border">
+      <div className="flex flex-col gap-5 items-center">
+        <h1 className="text-lg font-medium w-full">An error has occurred.</h1>
+        <p className="text-sm w-full">Apologies, but something happened with Cuiloa and the client couldn&apos;t recover.</p>
+        <div className="flex w-full gap-5">
+          <Button className="w-fit" variant={"outline"} asChild>
             <Link href={"/"}>Home</Link>
           </Button>
-          <Button className="w-fit" onClick={() => reset()}>
+          <Button className="w-fit" variant={"outline"} onClick={() => reset()}>
             Try Reloading
           </Button>
         </div>

diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
@@ -3,15 +3,13 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <div className="bg-primary/60 py-8 rounded-lg border">
-      <div className="flex flex-col gap-8 items-center">
-        <h1 className="text-lg font-medium sm:w-11/12 w-full">Page not found!</h1>
-        <p className="text-sm sm:w-11/12 w-full">Apologies, but Cuiloa could not find the page you requested.</p>
-        <div className="flex sm:w-11/12 w-full gap-8">
-          <Button className="w-fit" asChild>
-            <Link href={"/"}>Go Home</Link>
-          </Button>
-        </div>
+    <div className="bg-primary/60 px-3 py-4 sm:p-8 rounded-lg border">
+      <div className="flex flex-col gap-5 items-center">
+        <h1 className="text-lg font-medium w-full">Page not found!</h1>
+        <p className="text-sm w-full">Apologies, but Cuiloa could not find the page you requested.</p>
+        <Button variant={"outline"} className="self-start" asChild>
+          <Link href={"/"}>Go Home</Link>
+        </Button>
       </div>
     </div>
   );