Update header component style to match element plus

components/header/Header.vue

@@ -1,13 +1,21 @@
 <template>
-    <div class="bg-secondary flex h-fit w-full flex-row items-center justify-center p-2">
+	<div
+		class="flex h-fit w-full flex-row items-center justify-center border-b border-[var(--el-border-color)] p-2">
 		<div class="flex w-full max-w-3xl items-center justify-between gap-4">
-            <div class="flex items-center gap-4 hover:cursor-pointer" @click="navigateTo('/notes')">
+			<div
-                <Icon class="text-blue-500" name="fa6-solid:book-open" />
+				class="flex items-center gap-4 hover:cursor-pointer"
+				@click="navigateTo('/notes')">
+				<Icon
+					class="text-blue-500"
+					name="fa6-solid:book-open" />
 				<p class="text-xl font-bold"> Notes </p>
 			</div>
 			<div class="flex w-fit justify-end">
-                <Icon class="bg-secondary rounded-full hover:cursor-pointer" @click="navigateTo('/profile')"
+				<Icon
-                    name="fa6-solid:circle-user" size="36" />
+					class="rounded-full bg-secondary hover:cursor-pointer"
+					@click="navigateTo('/profile')"
+					name="fa6-solid:circle-user"
+					size="36" />
 			</div>
 		</div>
 	</div>

layouts/main.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-header>
+				<Header />
+			</el-header>
+			<el-main>
+				<div class="flex flex-col items-center justify-center">
+					<slot />
+				</div>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<style scoped>
+.el-header {
+	--el-header-padding: 0;
+}
+</style>

pages/login/index.vue

@@ -1,7 +1,5 @@
 <template>
-	<App>
+	<el-card class="w-fit">
-		<Header />
-		<el-card>
 		<div
 			class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
 			<div class="flex w-full flex-col gap-2">
@@ -41,12 +39,12 @@
 			</button>
 		</div>
 	</el-card>
-	</App>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
 	middleware: ['auth'],
+	layout: 'main',
 })
 
 const credential = reactive({