Feat/add 404 page (#1842)

* feat:add sadcry icon * feat:add 404 in pages folder * feat:add chetwodeblue to tailwind colors * feat:add layout to app router * feat:add notfound page to app router * update:add isAuthpage prop to authlayout * update:add 404 page content to locales * update:change 404 component to new design * update:add chetwode to cspell * added offline page * Minor Fixes --------- Co-authored-by: Badal Khatri <[email protected]>
ever-co · Dec 8, 2023 · b109293 · b109293
1 parent 2ebdc2e
commit b109293
Show file tree

Hide file tree

Showing 24 changed files with 195 additions and 70 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -16,6 +16,7 @@
 		"cacheable",
 		"camelcase",
 		"Chatwoot",
+		"chetwode",
 		"cloc",
 		"cloudinary",
 		"clsx",

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,15 @@
+import '../styles/globals.css';
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+
+    <html>
+      <body>{children}</body>
+    </html>
+
+  )
+}
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -0,0 +1,15 @@
+'use client';
+import NotFound from '@components/pages/404';
+import { AuthLayout } from 'lib/layout';
+
+const NotFoundPage = () => {
+	// TODO:
+	// Fix localisation issue
+	return (
+		<AuthLayout title={'Page not found !'} isAuthPage={false}>
+			<NotFound />
+		</AuthLayout>
+	);
+};
+
+export default NotFoundPage;
diff --git a/apps/web/components/pages/404/index.tsx b/apps/web/components/pages/404/index.tsx
@@ -1,25 +1,27 @@
+'use client';
+import SadCry from '@components/ui/svgs/sad-cry';
 import { Button, Text } from 'lib/components';
 import Link from 'next/link';
-import { useTranslation } from 'react-i18next';
+
 function NotFound() {
-	const { t } = useTranslation();
 	return (
-		<div className="mt-28">
-			<div className="m-auto w-[218px] h-[218px] rounded-full relative flex justify-center items-center text-center p-5 bg-[#6755c933] dark:bg-light--theme-light">
-				<Text className="text-6xl font-semibold text-primary">404</Text>
+		<div className="mt-28 flex flex-col gap-7 items-center">
+			<div className="m-auto relative flex justify-center items-center gap-4 text-center ">
+				<SadCry width={97} height={97} />
+				<Text className="text-[78px] font-semibold text-chetwodeBlue">404!</Text>
 			</div>
 
-			<Text className="text-2xl font-normal text-center mt-10 text-[#282048] dark:text-light--theme">
-				{t('pages.page404.HEADING_TITLE')}
-			</Text>
-			<Text className="mt-5 text-base font-normal text-center text-gray-400">
-				{t('pages.page404.HEADING_DESCRIPTION')}
+			<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
+				Page not found !
 			</Text>
-			<Link href="/">
-				<Button className="m-auto mt-10 font-normal rounded-lg pl-7 pr-7">
-					{t('pages.page404.LINK_LABEL')}
-				</Button>
-			</Link>
+			<div className="flex flex-col gap-4">
+				<Text className="text-[20px] font-normal text-center text-gray-400">
+					{`We looked, but can't find it ....`}
+				</Text>
+				<Link href="/">
+					<Button className="m-auto mt-10 font-normal rounded-lg pl-7 pr-7">Home</Button>
+				</Link>
+			</div>
 		</div>
 	);
 }

diff --git a/apps/web/components/pages/offline/index.tsx b/apps/web/components/pages/offline/index.tsx
@@ -0,0 +1,27 @@
+import SadCry from '@components/ui/svgs/sad-cry';
+import { Text } from 'lib/components';
+import { useTranslation } from 'react-i18next';
+
+function Offline() {
+	const { t } = useTranslation();
+
+	return (
+		<div className="mt-28 flex flex-col gap-7 items-center">
+			<div className="m-auto relative flex justify-center items-center gap-4 text-center ">
+				<SadCry width={97} height={97} />
+				<Text className="text-[78px] font-semibold text-chetwodeBlue">Offline!</Text>
+			</div>
+
+			<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
+				{t('pages.offline.HEADING_TITLE')}
+			</Text>
+			<div className="flex flex-col gap-4">
+				<Text className="text-[20px] font-normal text-center text-gray-400">
+					{t('pages.offline.HEADING_DESCRIPTION')}
+				</Text>
+			</div>
+		</div>
+	);
+}
+
+export default Offline;
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
@@ -72,7 +72,7 @@ function DataTable<TData, TValue>({
 	})
 
 	return (
-		<Table className='border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full'>
+		<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">
 			<TableHeader>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<TableRow key={headerGroup.id}>
@@ -81,57 +81,39 @@ function DataTable<TData, TValue>({
 								<TableHead key={header.id}>
 									{header.isPlaceholder
 										? null
-										: flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-										)}
+										: flexRender(header.column.columnDef.header, header.getContext())}
 								</TableHead>
-							)
+							);
 						})}
 					</TableRow>
 				))}
 			</TableHeader>
 			<TableBody className="divide-y divide-gray-200">
 				{table.getRowModel().rows?.length ? (
 					table.getRowModel().rows.map((row) => (
-						<TableRow
-							key={row.id}
-							data-state={row.getIsSelected() && "selected"}
-							className='my-4'
-						>
+						<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className="my-4">
 							{row.getVisibleCells().map((cell) => (
-								<TableCell key={cell.id}
-								className="rounded-[16px] my-4">
-
-									{flexRender(
-										cell.column.columnDef.cell,
-										cell.getContext()
-									)}
+								<TableCell key={cell.id} className="rounded-[16px] my-4">
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
 								</TableCell>
 							))}
 						</TableRow>
 					))
 				) : (
 					<TableRow>
-						<TableCell
-							colSpan={columns.length}
-							className="h-24 text-center"
-						>
+						<TableCell colSpan={columns.length} className="h-24 text-center">
 							No results.
 						</TableCell>
 					</TableRow>
 				)}
 			</TableBody>
-			{
-				footerRows && footerRows?.length > 0 && (
-					<TableFooter className='bg-gray-50 dark:bg-gray-800'>
-						{footerRows.map((row, index) => (
-							<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
-						))}
-					</TableFooter>
-				)
-			}
-
+			{footerRows && footerRows?.length > 0 && (
+				<TableFooter className="bg-gray-50 dark:bg-gray-800">
+					{footerRows.map((row, index) => (
+						<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
+					))}
+				</TableFooter>
+			)}
 		</Table>
 	);
 }

diff --git a/apps/web/components/ui/svgs/sad-cry.tsx b/apps/web/components/ui/svgs/sad-cry.tsx
@@ -0,0 +1,21 @@
+
+const SadCry = ({
+    width,
+    height,
+    fill="#8C7AE4"
+}:{
+    width: number,
+    height: number,
+    fill?: string,
+}) => {
+    return (
+        <>
+            <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 97 98" fill="none">
+                <path d="M48.5 0.5625C21.7422 0.5625 0.0625 22.2422 0.0625 49C0.0625 66.5977 9.47656 81.9492 23.5 90.4258V55.25C23.5 53.5312 24.9062 52.125 26.625 52.125C28.3438 52.125 29.75 53.5312 29.75 55.25V93.668C35.5117 96.0898 41.8594 97.4375 48.5 97.4375C55.1406 97.4375 61.4883 96.0898 67.25 93.668V55.25C67.25 53.5312 68.6562 52.125 70.375 52.125C72.0938 52.125 73.5 53.5312 73.5 55.25V90.4258C87.5234 81.9492 96.9375 66.5781 96.9375 49C96.9375 22.2422 75.2578 0.5625 48.5 0.5625ZM35.707 42.8477C32.8164 40.2695 26.6836 40.2695 23.793 42.8477L21.9375 44.5078C21.1953 45.1523 20.1211 45.2891 19.2617 44.8203C18.4023 44.3516 17.9141 43.375 18.0703 42.3984C18.8516 37.4766 24.75 34.1758 29.7695 34.1758C34.7891 34.1758 40.6875 37.4766 41.4688 42.3984C41.625 43.375 41.1367 44.3516 40.2773 44.8203C39.1445 45.4258 38.0898 44.957 37.6016 44.5078L35.707 42.8477ZM48.5 80.25C43.3242 80.25 39.125 74.6445 39.125 67.75C39.125 60.8555 43.3242 55.25 48.5 55.25C53.6758 55.25 57.875 60.8555 57.875 67.75C57.875 74.6445 53.6758 80.25 48.5 80.25ZM77.7578 44.8008C76.625 45.4062 75.5703 44.9375 75.082 44.4883L73.2266 42.8281C70.3359 40.25 64.2031 40.25 61.3125 42.8281L59.4375 44.5078C58.6953 45.1523 57.6211 45.2891 56.7617 44.8203C55.9023 44.3516 55.4141 43.375 55.5703 42.3984C56.3516 37.4766 62.25 34.1758 67.2695 34.1758C72.2891 34.1758 78.1875 37.4766 78.9688 42.3984C79.0859 43.3555 78.6172 44.332 77.7578 44.8008Z" 
+                fill={fill}/>
+            </svg>
+        </>
+    )
+}
+
+export default SadCry;
diff --git a/apps/web/lib/layout/auth-layout.tsx b/apps/web/lib/layout/auth-layout.tsx
@@ -9,14 +9,15 @@ import { Footer } from './footer';
 type Props = {
 	title?: string;
 	description?: string | ReactNode;
+	isAuthPage?: boolean;
 } & PropsWithChildren;
 
-export function AuthLayout({ children, title, description }: Props) {
+export function AuthLayout({ children, title, description, isAuthPage = true }: Props) {
 	const { t } = useTranslation();
 	return (
 		<>
 			<Meta title={title} />
-			<div className="flex">
+			<div className="flex flex-row">
 				{/* Bg Cover side */}
 				<div
 					className={clsxm(
@@ -87,19 +88,21 @@ export function AuthLayout({ children, title, description }: Props) {
 					)}
 				>
 					<div className="flex flex-col items-center justify-center w-full mt-20 lg:mt-23">
-						<div className="w-11/12">
-							{title && (
-								<Text.Heading as="h1" className="mb-3 text-center min-w-[400px]">
-									{title}
-								</Text.Heading>
-							)}
+						{isAuthPage &&
+							<div className="w-11/12">
+								{title && (
+									<Text.Heading as="h1" className="mb-3 text-center min-w-[400px]">
+										{title}
+									</Text.Heading>
+								)}
 
-							{description && (
-								<Text className="text-sm md:text-lg text-gray-400 text-center mb-[56px] min-w-[400px] min-h-[10vh]">
-									{description}
-								</Text>
-							)}
-						</div>
+								{description && (
+									<Text className="text-sm md:text-lg text-gray-400 text-center mb-[56px] min-w-[400px] min-h-[10vh]">
+										{description}
+									</Text>
+								)}
+							</div>
+						}
 
 						{children}
 					</div>

diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
@@ -1,11 +1,18 @@
 import NotFound from '@components/pages/404';
-import { MainLayout } from 'lib/layout';
+import { AuthLayout } from 'lib/layout';
+import { useTranslation } from 'react-i18next';
 
 const NotFoundPage = () => {
+
+	const { t } = useTranslation();
+
 	return (
-		<MainLayout notFound={true}>
+		<AuthLayout 
+			title={t('pages.page404.HEADING_TITLE')} 
+			isAuthPage={false}
+			>
 			<NotFound />
-		</MainLayout>
+		</AuthLayout>
 	);
 };
 

diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -19,6 +19,7 @@ import { useState } from 'react';
 import { IssuesView } from '@app/constants';
 import { TableCellsIcon, QueueListIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { useNetworkState } from '@uidotdev/usehooks';
+import Offline from '@components/pages/offline';
 
 function MainPage() {
 	const { t } = useTranslation();
@@ -28,9 +29,7 @@ function MainPage() {
 	const { online } = useNetworkState();
 
 	if (!online) {
-		return (
-			<div className="flex w-full h-screen justify-center items-center text-xl">You are Currently Offline</div>
-		);
+		return <Offline />;
 	}
 
 	return (

diff --git a/apps/web/public/locales/ar/common.json b/apps/web/public/locales/ar/common.json
@@ -426,6 +426,10 @@
 			"HEADING_TITLE": "غير موجود",
 			"HEADING_DESCRIPTION": "المورد الذي تبحث عنه غير موجود!",
 			"LINK_LABEL": "الذهاب إلى الصفحة الرئيسية"
+		},
+		"offline": {
+			"HEADING_TITLE": "انقطاع الشبكة!",
+			"HEADING_DESCRIPTION": "أنت غير متصل حاليًا، يرجى التحقق من اتصالك بالإنترنت..."
 		}
 	},
 

diff --git a/apps/web/public/locales/bg/common.json b/apps/web/public/locales/bg/common.json
@@ -429,6 +429,10 @@
 			"HEADING_TITLE": "Ненамерено",
 			"HEADING_DESCRIPTION": "Търсеният ресурс не беше намерен!",
 			"LINK_LABEL": "Отиди на началната страница"
+		},
+		"offline": {
+			"HEADING_TITLE": "Мрежата е прекъсната!",
+			"HEADING_DESCRIPTION": "В момента сте извън линия, моля, проверете интернет връзката си..."
 		}
 	},
 

diff --git a/apps/web/public/locales/de/common.json b/apps/web/public/locales/de/common.json
@@ -422,6 +422,10 @@
 			"HEADING_TITLE": "Nicht gefunden",
 			"HEADING_DESCRIPTION": "Die gesuchte Ressource wurde nicht gefunden!",
 			"LINK_LABEL": "Zur Startseite"
+		},
+		"offline": {
+			"HEADING_TITLE": "Netzwerk getrennt!",
+			"HEADING_DESCRIPTION": "Sie sind derzeit offline, bitte überprüfen Sie Ihre Internetverbindung..."
 		}
 	},
 	"timer": {

diff --git a/apps/web/public/locales/en/common.json b/apps/web/public/locales/en/common.json
@@ -420,9 +420,13 @@
 			"SELECT_ROLES": "Select Roles"
 		},
 		"page404": {
-			"HEADING_TITLE": "Not Found",
-			"HEADING_DESCRIPTION": "Resource you are looking for not found!",
-			"LINK_LABEL": "Go to homepage"
+			"HEADING_TITLE": "Page not found !",
+			"HEADING_DESCRIPTION": "We looked, but can't find it .... ",
+			"LINK_LABEL": "Home"
+		},
+		"offline": {
+			"HEADING_TITLE": "Network Disconnected!",
+			"HEADING_DESCRIPTION": "You are currently Offline, please check your internet connection..."
 		}
 	},
 

diff --git a/apps/web/public/locales/es/common.json b/apps/web/public/locales/es/common.json
@@ -406,6 +406,10 @@
 			"HEADING_TITLE": "No encontrado",
 			"HEADING_DESCRIPTION": "¡El recurso que buscas no se encuentra!",
 			"LINK_LABEL": "Ir a la página de inicio"
+		},
+		"offline": {
+			"HEADING_TITLE": "¡Red Desconectada!",
+			"HEADING_DESCRIPTION": "Actualmente estás desconectado, por favor verifica tu conexión a Internet..."
 		}
 	},
 	"timer": {

diff --git a/apps/web/public/locales/fr/common.json b/apps/web/public/locales/fr/common.json
@@ -417,6 +417,10 @@
 			"HEADING_TITLE": "Page non trouvée",
 			"HEADING_DESCRIPTION": "La ressource que vous recherchez est introuvable !",
 			"LINK_LABEL": "Aller à la page d'accueil"
+		},
+		"offline": {
+			"HEADING_TITLE": "Réseau déconnecté !",
+			"HEADING_DESCRIPTION": "Vous êtes actuellement hors ligne, veuillez vérifier votre connexion Internet..."
 		}
 	},
 

diff --git a/apps/web/public/locales/he/common.json b/apps/web/public/locales/he/common.json
@@ -417,6 +417,10 @@
 			"HEADING_TITLE": "לא נמצא",
 			"HEADING_DESCRIPTION": "המשאב שאתה מחפש לא נמצא!",
 			"LINK_LABEL": "לך לדף הבית"
+		},
+		"offline": {
+			"HEADING_TITLE": "רשת מנותקת!",
+			"HEADING_DESCRIPTION": "אתה לא מחובר כרגע, בבקשה בדוק את חיבור האינטרנט שלך..."
 		}
 	},
 	"timer": {