style: Update font sizes and add border to menu items for better styling

Author: wajeht

src/handler.ts

@@ -72,7 +72,7 @@ export async function getAppChannelsPageHandler(req: Request, res: Response) {
 		.select('*')
 		.from('apps')
 		.where({ id: parseInt(req.params.id!) });
-	return res.render('apps-id.html', {
+	return res.render('apps-id-channels.html', {
 		app,
 		layout: '../layouts/app.html',
 	});
@@ -84,7 +84,7 @@ export async function getAppNotificationsPageHandler(req: Request, res: Response
 		.select('*')
 		.from('apps')
 		.where({ id: parseInt(req.params.id!) });
-	return res.render('apps-id.html', {
+	return res.render('apps-id-notifications.html', {
 		app,
 		layout: '../layouts/app.html',
 	});

src/views/components/header.html

@@ -1,14 +1,16 @@
 <header class="navbar p-10 sticky top-0 z-10 backdrop-blur-sm bg-base-100/70 border border-b border-gray-100">
   <div class="max-w-6xl mx-auto justify-between w-full items-center">
     <div class="flex-1">
-      <a class="btn btn-ghost text-xl font-extrabold" href="/">Notify</a>
+      <a class="btn btn-ghost text-3xl font-extrabold" href="/">Notify</a>
     </div>
 
-    <div class="flex-none">
+    <div class="flex-none flex gap-5">
+      <!-- theme -->
+		  <%- include('../components/theme.html') %>
+
       <div class="dropdown dropdown-end">
         <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
           <div class="w-10 rounded-full">
-            <!-- <img alt="Tailwind CSS Navbar component" src="" /> -->
             <div class="bg-gray-300 h-full w-full"></div>
           </div>
         </div>

src/views/components/theme.html

@@ -0,0 +1,36 @@
+<script>
+  function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    document.querySelector('.theme-controller').checked = (theme === 'business');
+  }
+
+  function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'business' : 'light';
+    setTheme(newTheme);
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    setTheme(savedTheme);
+
+    const themeToggle = document.querySelector('.theme-controller');
+    themeToggle.addEventListener('change', toggleTheme);
+  });
+</script>
+
+<label class="swap swap-rotate">
+  <input type="checkbox" class="theme-controller" value="business" />
+
+  <!-- sun icon -->
+  <svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+  </svg>
+
+  <svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+  </svg>
+</label>

src/views/layouts/app.html

@@ -11,12 +11,12 @@
 
 			<div class="p-10">
 				<div class="mx-auto max-w-6xl w-full ">
-					<h2 class="font-medium text-xl">Apps / <%= app.id %></h2>
+					<h2 class="font-medium text-2xl">Apps / <%= app.id %></h2>
 
 					<div class="sm:grid sm:grid-cols-4 flex flex-col gap-5 mt-5">
 
 						<aside>
-							<ul class="menu bg-base-100 rounded-lg">
+							<ul class="menu bg-base-100 rounded-lg border border-gray-100">
 								<li><a href="/apps/<%= app.id %>">App</a></li>
 								<li><a href="/apps/<%= app.id %>/channels">Channels</a></li>
 								<li><a href="/apps/<%= app.id %>/notifications">Notifications</a></li>

src/views/pages/apps-create.html

@@ -1,6 +1,6 @@
 <div class="p-10">
 	<div class="mx-auto max-w-6xl w-ful">
-    <h2 class="font-medium text-xl">Apps / New</h2>
+    <h2 class="font-medium text-2xl">Apps / New</h2>
     <p>Create a new app</p>
   </div>
 </div>

src/views/pages/apps-id-channels.html

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-5">
+  <h2 class="font-medium text-xl">Channels</h2>
+  <div class="border border-gray-100 rounded-lg bg-base-100 p-5">
+    <pre><%= JSON.stringify(app, null, 2) %></pre>
+  </div>
+</div>

src/views/pages/apps-id-notifications.html

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-5">
+  <h2 class="font-medium text-xl">Notifications</h2>
+  <div class="border border-gray-100 rounded-lg bg-base-100 p-5">
+    <pre><%= JSON.stringify(app, null, 2) %></pre>
+  </div>
+</div>

src/views/pages/apps-id.html

@@ -1 +1,6 @@
-<pre><%= JSON.stringify(app, null, 2) %></pre>
+<div class="flex flex-col gap-5">
+  <h2 class="font-medium text-xl">App</h2>
+  <div class="border border-gray-100 rounded-lg bg-base-100 p-5">
+    <pre><%= JSON.stringify(app, null, 2) %></pre>
+  </div>
+</div>

src/views/pages/apps.html

@@ -2,7 +2,7 @@
   <div class="mx-auto max-w-6xl w-full">
 
     <div class="flex justify-between items-center">
-      <h2 class="font-medium text-xl">Apps</h2>
+      <h2 class="font-medium text-2xl">Apps</h2>
       <a class="link" href="/apps/create">Create a new app</a>
     </div>
 

src/views/pages/profile.html

@@ -1,6 +1,6 @@
 <div class="p-10">
 	<div class="mx-auto max-w-6xl w-full">
-    <h2 class="font-medium text-xl">Profile</h2>
+    <h2 class="font-medium text-2xl">Profile</h2>
     <p>profile</p>
   </div>
 </div>