refactor: simplify 404 page layout and update collection detail view

- Removed unused imports and components from `not-found.tsx` files across multiple apps (`auth`, `docs`, `hubs`). - Simplified the 404 page layout with a minimal design, removing the `Interstellar404` component and `Button` for returning to the main interface. - Updated `CollectionDetailView` to include an "Owner" heading and display the owner's username with a label indicating if the user is the owner or a contributor. - Removed the 'dark' class from the `RootLayout` body classes to streamline styling.
ingra-ai · Oct 9, 2024 · f165aba · f165aba
1 parent 2f602d1
commit f165aba
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 47 deletions.
diff --git a/apps/auth/app/layout.tsx b/apps/auth/app/layout.tsx
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 };
 
 export default async function RootLayout({ children }: PropsWithChildren) {
-  const bodyClasses = cn('dark', fontSans.className);
+  const bodyClasses = cn(fontSans.className);
 
   return (
     <html lang="en">

diff --git a/apps/auth/app/not-found.tsx b/apps/auth/app/not-found.tsx
@@ -1,20 +1,10 @@
-import Link from 'next/link';
-import { Button } from "@repo/components/ui/button";
-import { Home } from 'lucide-react';
-import Interstellar404 from '@repo/components/not-found/Interstellar404';
-
 export default function NotFoundPage() {
-
   return (
-    <div className="relative" data-testid="page-not-found">
-      <Interstellar404 />
-      <div className="fixed top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 overflow-hidden">
-        <Link href="/">
-          <Button variant="outline" size={'lg'} className="border-blue-500 text-blue-400 hover:bg-blue-900 mt-[300px]">
-            <Home className="mr-2 h-4 w-4" />
-            Return to Main Interface
-          </Button>
-        </Link>
+    <div className={`relative flex min-h-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-900`} data-testid="page-not-found">
+      <div className="flex items-center space-x-4 text-gray-800 dark:text-gray-200">
+        <span className="text-4xl font-bold">404</span>
+        <span className="text-4xl font-light">|</span>
+        <span className="text-lg">Page Not Found</span>
       </div>
     </div>
   )

diff --git a/apps/docs/app/not-found.tsx b/apps/docs/app/not-found.tsx
@@ -1,20 +1,10 @@
-import Link from 'next/link';
-import { Button } from "@repo/components/ui/button";
-import { Home } from 'lucide-react';
-import Interstellar404 from '@repo/components/not-found/Interstellar404';
-
 export default function NotFoundPage() {
-
   return (
-    <div className="relative" data-testid="page-not-found">
-      <Interstellar404 />
-      <div className="fixed top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 overflow-hidden">
-        <Link href="/">
-          <Button variant="outline" size={'lg'} className="border-blue-500 text-blue-400 hover:bg-blue-900 mt-[300px]">
-            <Home className="mr-2 h-4 w-4" />
-            Return to Main Interface
-          </Button>
-        </Link>
+    <div className={`relative flex min-h-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-900`} data-testid="page-not-found">
+      <div className="flex items-center space-x-4 text-gray-800 dark:text-gray-200">
+        <span className="text-4xl font-bold">404</span>
+        <span className="text-4xl font-light">|</span>
+        <span className="text-lg">Page Not Found</span>
       </div>
     </div>
   )

diff --git a/apps/hubs/app/not-found.tsx b/apps/hubs/app/not-found.tsx
@@ -1,20 +1,10 @@
-import Link from 'next/link';
-import { Button } from "@repo/components/ui/button";
-import { Home } from 'lucide-react';
-import Interstellar404 from '@repo/components/not-found/Interstellar404';
-
 export default function NotFoundPage() {
-
   return (
-    <div className="relative" data-testid="page-not-found">
-      <Interstellar404 />
-      <div className="fixed top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 overflow-hidden">
-        <Link href="/">
-          <Button variant="outline" size={'lg'} className="border-blue-500 text-blue-400 hover:bg-blue-900 mt-[300px]">
-            <Home className="mr-2 h-4 w-4" />
-            Return to Main Interface
-          </Button>
-        </Link>
+    <div className={`relative flex min-h-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-900`} data-testid="page-not-found">
+      <div className="flex items-center space-x-4 text-gray-800 dark:text-gray-200">
+        <span className="text-4xl font-bold">404</span>
+        <span className="text-4xl font-light">|</span>
+        <span className="text-lg">Page Not Found</span>
       </div>
     </div>
   )

diff --git a/packages/components/src/data/collections/CollectionDetailView.tsx b/packages/components/src/data/collections/CollectionDetailView.tsx
@@ -112,11 +112,21 @@ export const CollectionDetailView: React.FC<CollectionDetailViewsProps> = ({ aut
       <CardContent>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
           <div>
-            <h3 className="text-lg font-semibold mb-2"></h3>
+            <h3 className="text-lg font-semibold mb-2">Owner</h3>
             <div className="flex items-center space-x-4">
               <Avatar>
                 <AvatarFallback>{ownerUsername.slice(0, 2).toUpperCase()}</AvatarFallback>
               </Avatar>
+              <div>
+                <p className="font-medium">{ownerUsername}</p>
+                {
+                  isOwner ? (
+                    <p className="text-sm text-primary">You</p>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">Contributor</p>
+                  )
+                }
+              </div>
             </div>
           </div>
           <div>