components/card/Panel.vue

@@ -1,7 +1,6 @@
 <template>
-	<el-card>
 	<div
-			class="flex h-fit w-full justify-start gap-8 text-center"
+		class="bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center"
 		:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
 		<div class="flex flex-row items-center justify-start gap-4">
 			<Icon :name="props.icon" />
@@ -14,8 +13,8 @@
 				{{ props.data }}
 			</div>
 		</div>
+		<div class="flex flex-row items-center gap-4"> </div>
 	</div>
-	</el-card>
 </template>
 
 <script setup lang="ts">

components/header/Header.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-const router = useRouter()
-const user = useSupabaseUser()
-</script>
-
 <template>
 	<div
 		class="flex h-fit w-full flex-row items-center justify-center border-b border-[var(--el-border-color)] p-2">
@@ -28,17 +23,6 @@ const user = useSupabaseUser()
 							<el-dropdown-item @click="navigateTo('/profile')"
 								>Profile</el-dropdown-item
 							>
-							<el-dropdown-item
-								v-if="user"
-								class="danger"
-								@click="userSignOut()"
-								>Sign Out</el-dropdown-item
-							>
-							<el-dropdown-item
-								v-else
-								@click="router.push('/login')"
-								>Sign In</el-dropdown-item
-							>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
@@ -51,7 +35,4 @@ const user = useSupabaseUser()
 :deep(.el-dropdown-menu__item) {
 	@apply px-8;
 }
-:deep(.el-dropdown-menu__item:not(.is-disabled):focus.danger) {
-	@apply bg-[--el-color-danger-light-9] text-[--el-color-danger];
-}
 </style>

pages/profile/index.vue

@@ -9,6 +9,23 @@
 				:title="data.title"
 				:description="data.description"
 				:data="data.data" />
+
+			<div class="flex gap-4">
+				<button
+					v-if="user"
+					@click="userSignOut()"
+					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-red-500 hover:text-black">
+					<Icon name="fa6-solid:arrow-right-from-bracket" />
+					Sign Out
+				</button>
+				<button
+					v-else
+					@click="router.push('/login')"
+					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-blue-500 hover:text-black">
+					<Icon name="fa6-solid:arrow-right-to-bracket" />
+					Log In
+				</button>
+			</div>
 		</template>
 	</NuxtLayout>
 </template>