From 7fc8a57edf25c1129727a37e32d3ffda868efbee Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 2 Mar 2022 18:35:45 -0500
Subject: [PATCH] fix: 404 page

---
 studio/pages/404.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/studio/pages/404.tsx b/studio/pages/404.tsx
index 08f81121f4a..b331d00b310 100644
--- a/studio/pages/404.tsx
+++ b/studio/pages/404.tsx
@@ -28,7 +28,7 @@ const Error404: NextPage = ({}) => {
               <a href="/">
                 <Image
                   src={theme == 'dark' ? '/img/supabase-dark.svg' : '/img/supabase-light.svg'}
-                  alt=""
+                  alt="supabase"
                   height={24}
                   width={120}
                 />
@@ -37,13 +37,10 @@ const Error404: NextPage = ({}) => {
           </div>
         </nav>
       </div>
-      <div className="absolute">
-        <Typography.Title
-          className={`select-none filter transition opacity-[5%] duration-200 ${
+      <div className={`absolute select-none filter transition opacity-[5%] duration-200 ${
             show404 ? 'blur-sm' : 'blur-none'
-          }`}
-          style={{ fontSize: '28rem' }}
-        >
+          }`}>
+        <Typography.Title style={{ fontSize: '28rem' }}>
           404
         </Typography.Title>
       </div>
@@ -52,16 +49,16 @@ const Error404: NextPage = ({}) => {
           show404 ? 'opacity-100' : 'opacity-0'
         }`}
       >
-        <div className="w-[320px] flex flex-col items-center justify-center space-y-3">
-          <Typography.Title level={3}>Looking for something? 🔍</Typography.Title>
-          <Typography.Text className="text-center">
+        <div className="w-[320px] flex flex-col items-center justify-center space-y-3 text-center">
+          <Typography.Title style={{ fontSize: '1.5rem' }}>Looking for something? 🔍</Typography.Title>
+          <Typography.Text>
             We couldn't find the page that you're looking for!
           </Typography.Text>
         </div>
         <div className="flex items-center space-x-4">
           <Link href="/">
             <a>
-              <Button>Head back</Button>
+              <Button size="small">Head back</Button>
             </a>
           </Link>
         </div>