From 7b981b6d16f52b43ebb872b6ecf23eeda2c12272 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:47:09 +0530
Subject: [PATCH] refactor: simplify error screen layout and remove unused
 components

- Removed the Alert component and its related imports to streamline the error display.
- Adjusted the layout of the error screen for better responsiveness and visual clarity.
- Updated button styles and structure for improved user interaction.
---
 surfsense_web/app/dashboard/page.tsx | 30 +++++++++-------------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/surfsense_web/app/dashboard/page.tsx b/surfsense_web/app/dashboard/page.tsx
index 09ace6542..2b3463bb4 100644
--- a/surfsense_web/app/dashboard/page.tsx
+++ b/surfsense_web/app/dashboard/page.tsx
@@ -1,18 +1,16 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Plus, Search } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { CreateSearchSpaceDialog } from "@/components/layout";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
-	CardContent,
 	CardDescription,
 	CardFooter,
 	CardHeader,
@@ -25,29 +23,20 @@ function ErrorScreen({ message }: { message: string }) {
 	const router = useRouter();
 
 	return (
-		<div className="flex min-h-screen flex-col items-center justify-center gap-4">
+		<div className="flex min-h-screen flex-col items-center justify-center gap-4 px-4">
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.5 }}
+				className="w-full max-w-xl"
 			>
-				<Card className="w-full max-w-[400px] border-destructive/20 bg-background/60 backdrop-blur-sm">
-					<CardHeader className="pb-2">
-						<div className="flex items-center gap-2">
-							<AlertCircle className="h-5 w-5 text-destructive" />
-							<CardTitle className="text-xl font-medium">{t("error")}</CardTitle>
-						</div>
-						<CardDescription>{t("something_wrong")}</CardDescription>
+				<Card className="w-full border-0 bg-transparent shadow-none">
+					<CardHeader className="pb-10">
+						<CardTitle className="text-xl font-medium">{t("error")}</CardTitle>
+						<CardDescription className="max-w-lg">{message}</CardDescription>
 					</CardHeader>
-					<CardContent>
-						<Alert variant="destructive" className="border-destructive/30 bg-destructive/10">
-							<AlertCircle className="h-4 w-4" />
-							<AlertTitle>{t("error_details")}</AlertTitle>
-							<AlertDescription className="mt-2">{message}</AlertDescription>
-						</Alert>
-					</CardContent>
-					<CardFooter className="flex justify-end gap-2 border-t pt-4">
-						<Button variant="outline" onClick={() => router.refresh()}>
+					<CardFooter className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+						<Button variant="secondary" onClick={() => router.refresh()}>
 							{t("try_again")}
 						</Button>
 						<Button onClick={() => router.push("/")}>{t("go_home")}</Button>
@@ -91,7 +80,6 @@ export default function DashboardPage() {
 	const router = useRouter();
 	const [showCreateDialog, setShowCreateDialog] = useState(false);
 
-	const t = useTranslations("dashboard");
 	const { data: searchSpaces = [], isLoading, error } = useAtomValue(searchSpacesAtom);
 
 	useEffect(() => {