tweak dialogues

src/lib/components/atoms/Dialogue.svelte

@@ -31,9 +31,9 @@
 					<slot name="icon" />
 				{/if}
 				{#if $$slots.title}
-					<h1>
+					<h2>
 						<slot name="title" />
-					</h1>
+					</h2>
 				{/if}
 			</div>
 
@@ -78,9 +78,10 @@
 		gap: 1rem;
 		top: 0;
 		left: 0;
+
 		width: 100%;
 		background-color: var(--grey-six);
-		margin-bottom: 8px;
+		margin-bottom: 16px;
 	}
 
 	.modal {

src/lib/components/atoms/LogoOption.svelte

@@ -53,9 +53,8 @@
 	<img src={current.gdrive_direct_url} alt={current.filename} />
 	<div class="text">
 		<h2>{name}</h2>
-		<h6>{current.filename}</h6>
     {#if has_variants}
-      <h4>This logo has variants</h4>
+      <h6>This logo has variants</h6>
     {/if}
 	</div>
 </div>

src/routes/polling/+page.svelte

@@ -248,12 +248,12 @@
 
 <Modal bind:modalOpen>
 	<svelte:fragment slot="title">How does this work?</svelte:fragment>
-	<svelte:fragment slot="description">Approval voting</svelte:fragment>
-  <div class="information">
-	  <h6>Voters can choose any number of logos. <br /> The logo that got selected the most wins.</h6>
-
-	  <b>Remember, you can only vote once!</b>
-  </div>
+	<svelte:fragment slot="description">
+		<h6>
+			This is an approval voting system. Voters can choose any number of logos. The logo that is
+			selected the most wins. Note that you can only vote once!
+		</h6>
+	</svelte:fragment>
 	<div class="buttons">
 		<Button
 			on:click={() => {
@@ -311,10 +311,10 @@
 		border-top: 1px solid var(--grey-three);
 	}
 
-  .information {
-    text-align: center;
+	.information {
+		text-align: center;
 		margin-bottom: 1rem;
-  }
+	}
 
 	.buttons {
 		display: flex;