style: Improve styling and layout in header, footer, and app sections

wajeht · wajeht · commit 344bcb905550 · 2024-08-13T00:06:20.000-05:00
diff --git a/src/views/components/footer.html b/src/views/components/footer.html
@@ -1,6 +1,7 @@
 <footer style="flex: 0; padding: 10px; text-align: center;">
 	<p>
 		Copyright © 2024. Made with ❤️ by
-		<a href="https://github.com/wajeht" title="https://github.com/wajeht" target="_blank">wajeht</a>
+		<a href="https://github.com/wajeht" title="https://github.com/wajeht" target="_blank">wajeht</a> |
+		<a href="https://github.com/wajeht/notify" title="https://github.com/wajeht/notify" target="_blank">github</a>
 	</p>
 </footer>
diff --git a/src/views/components/header.html b/src/views/components/header.html
@@ -4,10 +4,13 @@ <h1><a href="/">Notify</a></h1>
     <p>send notification to discord, email, and sms</p>
   </div>
 
-  <nav>
-    <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>;" href="/apps">Home</a>
-    <a style="font-weight: <%= path === '/profile' ? 'bold' : 'normal' %>;" href="/profile">Profile</a>
-    <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>;" href="/settings">Settings</a>
+  <nav style="display: flex; justify-content: space-between; align-items: center;">
+    <div>
+      <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>;" href="/apps">Apps</a>
+      <a style="font-weight: <%= path === '/profile' ? 'bold' : 'normal' %>;" href="/profile">Profile</a>
+      <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>;" href="/settings">Settings</a>
+    </div>
+
     <a href="/logout">Logout</a>
   </nav>
 </header>
diff --git a/src/views/layouts/app.html b/src/views/layouts/app.html
@@ -5,7 +5,7 @@
 	<body style="display: flex; flex-direction: column; gap: 10px; min-height: 100vh;">
 		<%- include('../components/header.html') %>
 
-		<main style="flex: 1;">
+		<main style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
 			<h2 >Apps / <%= app.id %></h2>
 
 			<div style="display: grid; grid-template-columns: 20% 80%;">
diff --git a/src/views/pages/apps.html b/src/views/pages/apps.html
@@ -1,7 +1,10 @@
 <div style="display: flex; flex-direction: column; gap: 10px;">
   <div style="display: flex; justify-content: space-between; align-items: center;">
-    <h2>Apps</h2>
-    <a href="/apps/create">Create a new App</a>
+    <div>
+      <h2>Apps</h2>
+      <p>Your apps</p>
+    </div>
+    <a href="/apps/create">Create a new app</a>
   </div>
 
   <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
