From 26dbc8ec8464e401724e3462c57e4f06fd13c197 Mon Sep 17 00:00:00 2001
From: Palm <palmpasuthorn@gmail.com>
Date: Thu, 5 Jan 2023 15:32:38 +0700
Subject: [PATCH] feat: add modal icons (#53)

---
 src/layout/Navbar/NavHost.svelte   | 8 ++++++++
 src/lib/components/Dialogue.svelte | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index af585ef..c7277a0 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -91,6 +91,14 @@
 
 <!-- settings -->
 <Modal bind:modalOpen>
+	<svelte:fragment slot="icon">
+		<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
+			<rect fill="none" height="24" width="24"/>
+			<path
+				d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
+			/>
+		</Svg>
+	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
 	<svelte:fragment slot="description">Configure the website's API. Defaults to ReVanced.</svelte:fragment>
 	<div id="settings-content">
diff --git a/src/lib/components/Dialogue.svelte b/src/lib/components/Dialogue.svelte
index 2be42ff..e66d7b0 100644
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -27,6 +27,9 @@
 						<img src="../icons/back.svg" id="back" alt="back" />
 					</button>
 				{/if}
+				{#if $$slots.icon}
+					<slot name="icon" />
+				{/if}
 				{#if $$slots.title}
 					<h4>
 						<slot name="title" />
@@ -66,6 +69,7 @@
 	.title {
 		position: sticky;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		gap: 1rem;
 		top: 0;