@axium/contacts 0.2.4 → 0.2.5

package/lib/InitForm.svelte

@@ -39,12 +39,12 @@
 {/snippet}
 
 {#snippet add(field: ArrayField)}
-	{#if init[field].length}<span />{/if}
+	{#if init[field].length}<span></span>{/if}
 	<button class="icon-text" onclick={() => init[field].push({} as any)}>
 		<Icon i="plus" />
 		<span>{text('contacts.init.add.' + field)}</span>
 	</button>
-	<span />
+	<span></span>
 {/snippet}
 
 <div class="contact-init-actions">
@@ -71,6 +71,7 @@
 
 <div class="contact-init">
 	<Icon i="user" />
+
 	<div class="section">
 		{@render zod('display', more.names, true)}
 		{@render zod('prefix', more.names, true)}
@@ -92,7 +93,7 @@
 
 	<Icon i="regular/envelope" />
 	{#each init.emails, i}
-		{#if i}<span />{/if}
+		{#if i}<span></span>{/if}
 		<div class={['email', init.emails.length > 1 && 'with-label']}>
 			<ZodInput bind:rootValue={init} path="emails.{i}.email" schema={Email.shape.email} {updateValue} noLabel="placeholder" />
 			{#if init.emails.length > 1}
@@ -105,7 +106,7 @@
 
 	<Icon i="phone" />
 	{#each init.phones, i}
-		{#if i}<span />{/if}
+		{#if i}<span></span>{/if}
 		<div class={['phone', init.phones.length > 1 && 'with-label']}>
 			<ZodInput bind:rootValue={init} path="phones.{i}.country" schema={Phone.shape.country} {updateValue} noLabel="placeholder" />
 			<ZodInput bind:rootValue={init} path="phones.{i}.number" schema={Phone.shape.number} {updateValue} noLabel="placeholder" />
@@ -119,7 +120,7 @@
 
 	<Icon i="regular/location-dot" />
 	{#each init.addresses, i}
-		{#if i}<span />{/if}
+		{#if i}<span></span>{/if}
 		<div class="section">
 			<LocationSelect bind:value={init.addresses[i]} />
 		</div>
@@ -132,12 +133,12 @@
 	<div class="section">
 		<DateSelect bind:day={init.birthDay} bind:month={init.birthMonth} bind:year={init.birthYear} />
 	</div>
-	<span />
+	<span></span>
 
 	{#if showDetailed}
 		<Icon i="regular/circle-nodes" />
 		{#each init.relationships as rel, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<Discovery
 					onSelect={result => (rel.to = result.contact.id)}
@@ -160,7 +161,7 @@
 
 		<Icon i="regular/calendar-day" />
 		{#each init.dates, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="dates.{i}" schema={SigDate} {updateValue} noLabel="placeholder" />
 			</div>
@@ -170,7 +171,7 @@
 
 		<Icon i="link-simple" />
 		{#each init.urls, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="urls.{i}" schema={ContactURL} {updateValue} noLabel="placeholder" />
 			</div>
@@ -180,7 +181,7 @@
 
 		<Icon i="regular/input-text" />
 		{#each init.custom, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="custom.{i}" schema={Custom} {updateValue} noLabel="placeholder" />
 			</div>
@@ -191,15 +192,15 @@
 
 	<Icon i="regular/note" />
 	<textarea bind:value={init.notes} {@attach dynamicRows(50, 3)}></textarea>
-	<span />
+	<span></span>
 
-	<span />
+	<span></span>
 	<div>
 		<button onclick={() => (showDetailed = !showDetailed)}>
 			<span>{text('contacts.init.show_' + (showDetailed ? 'less' : 'more'))}</span>
 		</button>
 	</div>
-	<span />
+	<span></span>
 </div>
 
 <style>
@@ -243,7 +244,8 @@
 		background-color: var(--bg-menu);
 
 		button.toggle {
-			height: 1em;
+			height: 2em;
+			padding: 0.5em 0;
 		}
 
 		:global(.ZodInput) {
@@ -251,6 +253,10 @@
 			flex-direction: column;
 			gap: 1em;
 		}
+
+		:global(& > .Icon) {
+			margin: 0.5em 0;
+		}
 	}
 
 	.section {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/contacts",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Contacts for Axium",
 	"funding": {

package/routes/contacts/[id]/+page.svelte

@@ -247,15 +247,15 @@
 		border-radius: 1em;
 		background-color: var(--bg-menu);
 
-		button.toggle {
-			height: 1em;
-		}
-
 		:global(.ZodInput) {
 			display: flex;
 			flex-direction: column;
 			gap: 1em;
 		}
+
+		:global(& > .Icon) {
+			margin: 0.25em 0;
+		}
 	}
 
 	.section {