fix, tidy up

Author: Rich Harris

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md

@@ -6,7 +6,7 @@ A particularly powerful feature of Svelte's transition engine is the ability to
 
 Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
 
-We can achieve this effect using the `crossfade` function, as seen in transition.js, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+We can achieve this effect using the `crossfade` function, as seen in `transition.js`, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 Open `TodoList.svelte`. First, import the `send` and `receive` transitions from transition.js:
 

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/TodoList.svelte

@@ -13,11 +13,7 @@
 
 		<span>{todo.description}</span>
 
-		<button on:click={() => store.remove(todo)}>
-			<svg viewBox="0 0 24 24">
-				<path fill="currentColor" stroke="none" d="M22 4.2h-5.6L15 1.6c-.1-.2-.4-.4-.7-.4H9.6c-.2 0-.5.2-.6.4L7.6 4.2H2c-.4 0-.8.4-.8.8s.4.8.8.8h1.8V22c0 .4.3.8.8.8h15c.4 0 .8-.3.8-.8V5.8H22c.4 0 .8-.3.8-.8s-.4-.8-.8-.8zM10.8 16.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5zm4 0c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5z" />
-			</svg>
-		</button>
+		<button on:click={() => store.remove(todo)} aria-label="Remove" />
 	</label>
 {/each}
 
@@ -42,8 +38,10 @@
 
 	button {
 		width: 2em;
+		height: 2em;
 		border: none;
-		background: none;
+		background: url(./remove.svg) no-repeat 50% 50%;
+		background-size: 75%;
 		opacity: 0;
 		transition: opacity 0.2s;
 		cursor: pointer;
@@ -54,6 +52,10 @@
 	}
 
 	label:hover button {
-		opacity: 0.7;
+		opacity: 0.2;
+	}
+
+	label:hover button:hover {
+		opacity: 0.5;
 	}
 </style>

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/remove.svg

@@ -6,7 +6,10 @@
 </script>
 
 {#each $store.filter(filter) as todo (todo.id)}
-	<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
+	<label
+		in:receive={{ key: todo.id }}
+		out:send={{ key: todo.id }}
+	>
 		<input
 			type="checkbox"
 			checked={todo.done}
@@ -15,11 +18,7 @@
 
 		<span>{todo.description}</span>
 
-		<button on:click={() => store.remove(todo)}>
-			<svg viewBox="0 0 24 24">
-				<path fill="currentColor" stroke="none" d="M22 4.2h-5.6L15 1.6c-.1-.2-.4-.4-.7-.4H9.6c-.2 0-.5.2-.6.4L7.6 4.2H2c-.4 0-.8.4-.8.8s.4.8.8.8h1.8V22c0 .4.3.8.8.8h15c.4 0 .8-.3.8-.8V5.8H22c.4 0 .8-.3.8-.8s-.4-.8-.8-.8zM10.8 16.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5zm4 0c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5z" />
-			</svg>
-		</button>
+		<button on:click={() => store.remove(todo)} aria-label="Remove" />
 	</label>
 {/each}
 
@@ -44,8 +43,10 @@
 
 	button {
 		width: 2em;
+		height: 2em;
 		border: none;
-		background: none;
+		background: url(./remove.svg) no-repeat 50% 50%;
+		background-size: 75%;
 		opacity: 0;
 		transition: opacity 0.2s;
 		cursor: pointer;
@@ -56,6 +57,10 @@
 	}
 
 	label:hover button {
-		opacity: 0.7;
+		opacity: 0.2;
+	}
+
+	label:hover button:hover {
+		opacity: 0.5;
 	}
 </style>