feat: improve error page layout and mobile responsiveness

- Replace sad face icon with alert icon
- Add LibreSign logo header
- Use NcEmptyContent component
- Add card container with shadow
- Improve mobile responsiveness
- Clean up CSS and remove redundant styles

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

src/views/DefaultPageError.vue

@@ -4,20 +4,31 @@
 -->
 
 <template>
-	<div class="container">
+	<div class="error-page">
-		<div id="img" />
+		<!-- Logo Header -->
-		<div class="content">
+		<div class="logo-header">
-			<h1>404</h1>
+			<img :src="logoLibreSign"
-			<h2>
+				:alt="t('libresign', 'LibreSign')"
-				{{ t('libresign', 'Page not found') }}
+				class="logo-icon">
-			</h2>
+		</div>
-			<p>{{ paragrath }}</p>
+
-			<NcNoteCard v-for="(error, index) in errors"
+		<!-- Error Container Card -->
-				:key="index"
+		<div class="error-container">
-				type="error"
+			<NcEmptyContent :name="t('libresign', 'Page not found')"
-				heading="Error">
+				:description="paragrath">
-				{{ error.message }}
+				<template #icon>
-			</NcNoteCard>
+					<AlertCircleOutline :size="80" class="alert-icon" />
+				</template>
+				<template #action>
+					<div v-if="errors.length" class="error-messages">
+						<NcNoteCard v-for="(error, index) in errors"
+							:key="index"
+							type="error">
+							{{ error.message }}
+						</NcNoteCard>
+					</div>
+				</template>
+			</NcEmptyContent>
 		</div>
 	</div>
 </template>
@@ -26,16 +37,23 @@
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+
+import logoLibreSign from '../../img/logo-gray.svg'
 
 export default {
 	name: 'DefaultPageError',
 	components: {
+		NcEmptyContent,
 		NcNoteCard,
+		AlertCircleOutline,
 	},
 
 	data() {
 		return {
+			logoLibreSign,
 			paragrath: t('libresign', 'Sorry but the page you are looking for does not exist, has been removed, moved or is temporarily unavailable.'),
 		}
 	},
@@ -47,7 +65,7 @@ export default {
 			}
 			const errorMessage = loadState('libresign', 'error', {})?.message
 			if (errorMessage) {
-				return [errorMessage]
+				return [{ message: errorMessage }]
 			}
 			return []
 		},
@@ -57,49 +75,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container{
+.error-page {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: 100%;
+	min-height: 100vh;
+	padding: 40px 20px;
+	gap: 24px;
+	background: var(--color-background-dark);
 
-	#img{
+	.logo-header {
-		background-image: url('../../img/sad-face-in-rounded-square.svg');
+		.logo-icon {
-		height: 140px;
+			height: 80px;
-		width: 140px;
+
-		background-repeat: no-repeat;
+			@media (max-width: 768px) {
-		background-size: cover;
+				height: 60px;
-		line-height: 17.6px;
+			}
+		}
 	}
 
-}
+	.error-container {
+		max-width: 800px;
+		width: 100%;
+		padding: 48px 32px;
+		background: var(--color-main-background);
+		border-radius: var(--border-radius-large);
+		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
 
-.content{
+		.error-messages {
-	box-sizing: border-box;
+			display: flex;
-	font-family: 'Nunito', sans-serif;
+			flex-direction: column;
-	max-width: 560px;
+			gap: 12px;
-	padding-inline-start: 50px;
+			width: 100%;
+			min-width: 500px;
 
-	h1{
+			@media (max-width: 768px) {
-		font-size: 65px;
+				min-width: auto;
-		font-weight: 700;
+			}
-		line-height: 71.5px;
+		}
-		margin-bottom: 10px;
+
-		margin-top: 0px;
+		@media (max-width: 768px) {
+			padding: 32px 24px;
+		}
 	}
 
-	h2{
+	.alert-icon {
-		font-size: 21px;
+		color: #e53c3c;
-		font-weight: 400;
-		line-height: 23.1px;
-		margin: 0px;
-		margin-bottom: 10px;
-	}
-	p{
-		color: var(--color-main-text);
-		font-weight: 400;
-		line-height: 17.6px;
 	}
 }
 </style>