design improvement and consistency

src/components/Dialog.svelte

@@ -63,31 +63,6 @@
     width: 100%;
     padding: var(--spacing-md);
 
-    > :global(.title) {
-      position: fixed;
-      display: flex;
-      width: calc(100% + 2 * var(--spacing-md));
-      margin: calc(var(--spacing-md) * -1);
-      padding: var(--spacing-md);
-      background: color-mix(in oklab, black 50%, var(--accent));
-      z-index: 99999;
-
-      > :global(.close-button) {
-        position: absolute;
-        top: var(--spacing-md);
-        right: calc(
-            var(--spacing-md) * 2 + 1.5rem
-        );
-      }
-
-      :global(& + *) {
-        margin-top: calc(
-            1.5rem +
-            var(--spacing-md) * 3
-        );
-      }
-    }
-
     > :global(*:not(:last-child)) {
       margin-bottom: var(--spacing-sm);
     }

src/components/FoldersListSidebar.svelte

@@ -32,7 +32,7 @@
 	bind:open={isAddingFolder}
 	onClose={newFolderDialogClosed}
 >
-	<div class="title">
+	<div class="section-title">
 		<h3>Create Folder</h3>
 	</div>
 	<p class="text-secondary">Please enter a name for the new folder:</p>
@@ -63,7 +63,7 @@
 				<hr />
 			{/if}
 		{/each}
-		<IconButton icon="eos-icons:plus" onclick={() => isAddingFolder = true} text="Add Folder" />
+		<IconButton icon="pajamas:folder-new" onclick={() => isAddingFolder = true} text="Add Folder" />
 	</div>
 </div>
 

src/components/LoginWithNostr.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { activeUser, ndk } from '$lib/stores.svelte';
+	import { activeUser, ndk, pageIcon, pageTitle } from '$lib/stores.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { NDKNip07Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
@@ -71,6 +71,8 @@
 	onMount(() => {
 		if ($ndk.activeUser)
 			activeUser.set($ndk.activeUser);
+		$pageTitle = 'Login';
+		$pageIcon = 'line-md:login';
 	});
 </script>
 

src/components/MailboxFolderItems.svelte

@@ -7,12 +7,12 @@
 	import Select from './Select.svelte';
 	import type { Letter } from '$lib/letter';
 	import { slide } from 'svelte/transition';
-	import IconButton from './IconButton.svelte';
 
 	let {
 		letters,
 		foldersList = $bindable<{ id: string; name: string; icon: string }[]>(),
-		folder = $bindable<{ id: string; name: string; icon: string }>()
+		folder = $bindable<{ id: string; name: string; icon: string }>(),
+		moveFolderDialogOpen = $bindable<boolean>()
 	} = $props();
 
 	function formatRange(start, end) {
@@ -83,7 +83,6 @@
 	});
 
 	let selectedLetters = $state<string[]>([]);
-	let moveFolderDialogOpen = $state(false);
 	let moveFolderName = $state('');
 
 	function clickedLetter(letter: Letter) {
@@ -125,7 +124,7 @@
 						</div>
 						{#if letter.stamps}
 							<div class="stamps-count">
-								<Icon icon="emojione-v1:stamped-envelope" />
+								<Icon icon="fxemoji:stampedenvelope" />
 								{letter.stamps} sats
 							</div>
 						{/if}
@@ -140,10 +139,10 @@
 						{/if}
 					</div>
 					<div class="letter-meta">
-						<Icon icon="mdi:calendar" />
+						<Icon icon="ph:calendar-duotone" />
 						{getReadableDate(letter.date)}
 						&nbsp;
-						<Icon icon="mdi:clock-outline" />
+						<Icon icon="ph:clock-duotone" />
 						{getReadableTime(letter.date)}
 					</div>
 					<div class="letter-preview">{letter.preview}</div>
@@ -156,7 +155,7 @@
 <Dialog
 	bind:open={moveFolderDialogOpen}
 >
-	<div class="title">
+	<div class="section-title">
 		<h3>Move Letters to Folder</h3>
 	</div>
 	<p class="text-secondary">Select a folder to move the selected letters to:</p>
@@ -181,7 +180,7 @@
 							</div>
 							{#if letter.stamps}
 								<div class="stamps-count">
-									<Icon icon="emojione-v1:stamped-envelope" />
+									<Icon icon="fxemoji:stampedenvelope" />
 									{letter.stamps} sats
 								</div>
 							{/if}
@@ -201,14 +200,6 @@
 	</div>
 </Dialog>
 
-<h2 id="page-title">
-	{folder.name}
-</h2>
-
-<div class="actions">
-	<IconButton icon="mdi:folder-move-outline" onclick={() => moveFolderDialogOpen = true} text="Move Letters" />
-</div>
-
 <main class="letter-list">
 	{#if $groupByStamps}
 		{#each groupedInbox as [range, letters]}
@@ -317,12 +308,5 @@
         }
       }
     }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-sm);
-      margin-bottom: var(--spacing-sm);
-    }
   }
 </style>

src/components/Notification.svelte

@@ -33,6 +33,6 @@
 		<div class="notification-message">{@render children?.()}</div>
 	</div>
 	<button class="close-button" onclick={hide}>
-		<Icon icon="mdi:close" />
+		<Icon icon="si:close-circle-duotone" />
 	</button>
 </div>