Improve typography

src/app.css

@@ -75,8 +75,4 @@
   .multimodal {
     @apply flex gap-1 items-end;
   }
-
-  .section-title {
-    @apply font-semibold text-xl;
-  }
 }

src/connect/ConnectSection.svelte

@@ -33,7 +33,7 @@
 
   hid.addEventListener('disconnect', e => {
     if (device === e.device) {
-    toast.info('Device disconnected')
+      toast.info('Device disconnected')
       onchange(null)
     }
   })
@@ -47,13 +47,15 @@
   <div class="grow">
     <h1 class="font-semibold text-xl/8">Connect to a device</h1>
 
-    {#if device !== null}
+    <div class="text-sm">
-      <IconCheckCircle class="inline" /> Successfully conected to device. If you want to, you can connect to another device
+      {#if device === null}
-      instead.
+        <IconPending class="inline" /> Not connected to any device yet. Plug in your device, and click on the button to select
-    {:else}
+        it.
-      <IconPending class="inline" /> Not connected to any device yet. Plug in your device, and click the button to select
+      {:else}
-      it.
+        <IconCheckCircle class="inline" /> Successfully conected to device. If you want to, you can connect to another device
-    {/if}
+        instead.
+      {/if}
+    </div>
   </div>
 
   <ConnectButton onconnect={onchange} {device} />

src/write/WriteButton.svelte

@@ -2,7 +2,7 @@
   import { Button } from '$lib/components/ui/button'
   import { toast } from 'svelte-sonner'
 
-  import IconUpload from '~icons/material-symbols/upload'
+  import IconUpload from '~icons/material-symbols/upload-2'
 
   interface Props {
     device: HIDDevice | null

src/write/WriteSection.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import IconHelp from '~icons/material-symbols/help'
   import IconPending from '~icons/material-symbols/pending'
-  import IconWarning from '~icons/material-symbols/warning'
   import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
+  import IconWarning from '~icons/material-symbols/warning'
 
   import WriteButton from './WriteButton.svelte'
 
@@ -19,15 +20,17 @@
   <div class="grow">
     <h1 class="font-semibold text-xl/8">Write pattern to device</h1>
 
-    {#if device === null}
+    <div class="text-sm">
-      <IconPending class="inline" /> Connect your device to start writing patterns onto it.
+      {#if device === null}
-    {:else if bitmap === null}
+        <IconHelp class="inline" /> To start writing patterns to your device, connect it first.
-      <IconPending class="inline" /> Select an image file in order to write it onto your device.
+      {:else if bitmap === null}
-    {:else if !inProgress}
+        <IconPending class="inline" /> Select an image file in order to write it onto your device.
-      <IconArrowUploadProgress class="inline" /> Write the pattern onto your device if you have finished editing the image.
+      {:else if !inProgress}
-    {:else}
+        <IconArrowUploadProgress class="inline" /> Write the pattern onto your device if you have finished editing the image.
-      <IconWarning class="inline" /> Update in progress. Do not disconnect device.
+      {:else}
-    {/if}
+        <IconWarning class="inline" /> Refresh in progress. Do not disconnect device.
+      {/if}
+    </div>
   </div>
 
   <WriteButton