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

@@ -47,14 +47,16 @@
   <div class="grow">
     <h1 class="font-semibold text-xl/8">Connect to a device</h1>
 
-    {#if device !== null}
+    <div class="text-sm">
+      {#if device === null}
+        <IconPending class="inline" /> Not connected to any device yet. Plug in your device, and click on the button to select
+        it.
+      {:else}
         <IconCheckCircle class="inline" /> Successfully conected to device. If you want to, you can connect to another device
         instead.
-    {:else}
-      <IconPending class="inline" /> Not connected to any device yet. Plug in your device, and click the button to select
-      it.
       {/if}
     </div>
+  </div>
 
   <ConnectButton onconnect={onchange} {device} />
 </section>

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,16 +20,18 @@
   <div class="grow">
     <h1 class="font-semibold text-xl/8">Write pattern to device</h1>
 
+    <div class="text-sm">
       {#if device === null}
-      <IconPending class="inline" /> Connect your device to start writing patterns onto it.
+        <IconHelp class="inline" /> To start writing patterns to your device, connect it first.
       {:else if bitmap === null}
         <IconPending class="inline" /> Select an image file in order to write it onto your device.
       {:else if !inProgress}
         <IconArrowUploadProgress class="inline" /> Write the pattern onto your device if you have finished editing the image.
       {:else}
-      <IconWarning class="inline" /> Update in progress. Do not disconnect device.
+        <IconWarning class="inline" /> Refresh in progress. Do not disconnect device.
       {/if}
     </div>
+  </div>
 
   <WriteButton
     {device}