esthetic work

src/lib/components/Battle.svelte

@@ -27,7 +27,7 @@
 			<dt>wave</dt>
 			<dd>{wave === 2 ? 'second' : 'first'}</dd>
 		{/if}
-		<dt>city</dt>
+		<dt><i>home</i></dt>
 		<dd>
 			{#if typeof city === 'string'}
 				{city}
@@ -41,17 +41,17 @@
 				/>
 			{/if}
 		</dd>
-		<dt>scenario</dt>
+		<dt><i>view_kanban</i></dt>
 		<dd>{scenario}</dd>
 
 		{#if character}
-			<dt>character</dt>
+			<dt><i>person</i></dt>
 			<dd>{character}</dd>
 		{/if}
 
 		{#if additionalCharacters}
 			{#each additionalCharacters as c, i (c.selection)}
-				<dt>add. character</dt>
+				<dt><i>person</i><i>star</i></dt>
 				<dd>
 					<AdditionalCharacter
 						on:change={changeCharacter(i)}
@@ -66,7 +66,7 @@
 
 		<dt>difficulty</dt>
 		<dd>
-			<div class="field border">
+			<div class="field ">
 				<input
 					type="number"
 					step="0.5"
@@ -99,12 +99,16 @@
 		</dd>
 	</dl>
 
-	{#if status === 'upcoming'}
+	<div class="actions">
-		<button>Start battle</button>
+		{#if status === 'upcoming'}
-	{:else if status === 'ongoing'}
+			<button>Start battle</button>
-		<button on:click={battleVerdict('won')}>Battle won</button>
+		{:else if status === 'ongoing'}
-		<button on:click={battleVerdict('lost')}>Battle lost</button>
+			<button on:click={battleVerdict('won')}>Battle won</button>
-	{/if}
+			<button class="tertiary" on:click={battleVerdict('lost')}
+				>Battle lost</button
+			>
+		{/if}
+	</div>
 
 	<footer class="fixed">
 		<nav>
@@ -187,6 +191,7 @@
 <style>
 	article {
 		height: 100vh;
+		min-height: 100vh;
 	}
 	h5 {
 		flex: 1;
@@ -231,4 +236,7 @@
 	header nav {
 		max-width: 100%;
 	}
+	.actions {
+		text-align: center;
+	}
 </style>

src/lib/components/Battle/AdditionalCharacter.svelte

@@ -1,12 +1,15 @@
 {#if choices.length === 0}
 	{selection}
 {:else}
-	<select on:change>
+	<div class="field suffix">
-		<option>{selection}</option>
+		<select on:change>
-		{#each choices as c (c)}
+			<option>{selection}</option>
-			<option>{c}</option>
+			{#each choices as c (c)}
-		{/each}
+				<option>{c}</option>
-	</select>
+			{/each}
+		</select>
+		<i>arrow_drop_down</i>
+	</div>
 {/if}
 
 <script>
@@ -14,3 +17,12 @@
 	export let choices;
 	$: console.log(choices);
 </script>
+
+<style>
+	select {
+		/*width: 90%;*/
+	}
+	.field {
+		margin-bottom: 0px;
+	}
+</style>

src/lib/components/Campaigns.svelte

@@ -19,9 +19,11 @@
 				</h6>
 				<p>
 					{#if campaign.battles}
-						chapter {currentChapter(campaign)}, battle of {currentCity(
+						<a href={`#/campaign/${campaign._id}`}>
-							campaign,
+							chapter {currentChapter(campaign)}, battle of {currentCity(
-						)}.
+								campaign,
+							)}.
+						</a>
 					{/if}
 				</p>
 			</div>
@@ -34,23 +36,26 @@
 
 {#if showNewCampaign}
 	<div class="modal active">
-		<h5>New campaign</h5>
+		<form>
-		<div>
+			<h5>New campaign</h5>
-			<div class="field border">
+			<div>
-				<input
+				<div class="field border">
-					autofocus
+					<input
-					type="text"
+						autofocus
-					bind:value={newCampaignName}
+						type="text"
-					placeholder="Campaign name"
+						bind:value={newCampaignName}
-				/>
+						placeholder="Campaign name"
+					/>
+				</div>
 			</div>
-		</div>
+			<nav class="right-align">
-		<nav class="right-align">
+				<button
-			<button class="border" on:click={() => (showNewCampaign = false)}
+					class="border"
-				>Cancel</button
+					on:click={() => (showNewCampaign = false)}>Cancel</button
-			>
+				>
-			<button type="submit" on:click={saveNewCampaign}>Create</button>
+				<button on:click={saveNewCampaign}>Create</button>
-		</nav>
+			</nav>
+		</form>
 	</div>
 {/if}
 
@@ -83,6 +88,7 @@
 	};
 
 	const saveNewCampaign = () => {
+		console.log('sent');
 		api.event.addCampaign(newCampaignName);
 		newCampaignName = '';
 		showNewCampaign = false;