From 3f441ac6f8ba635822f16c01e05138dea6497913 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Tue, 7 Mar 2023 03:26:16 -0500
Subject: [PATCH] fix: change appearance of top section buttons

---
 src/lib/assets/icons/delete.svg          |  1 +
 src/lib/assets/icons/help.svg            |  1 +
 src/lib/components/atoms/Button.svelte   |  7 +++
 src/lib/components/atoms/Dialogue.svelte |  1 +
 src/routes/poll/+page.svelte             | 54 ++++++++++++++----------
 5 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/assets/icons/delete.svg
 create mode 100644 src/lib/assets/icons/help.svg

diff --git a/src/lib/assets/icons/delete.svg b/src/lib/assets/icons/delete.svg
new file mode 100644
index 0000000..b2d03b6
--- /dev/null
+++ b/src/lib/assets/icons/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFB1C5"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
\ No newline at end of file
diff --git a/src/lib/assets/icons/help.svg b/src/lib/assets/icons/help.svg
new file mode 100644
index 0000000..0d95784
--- /dev/null
+++ b/src/lib/assets/icons/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFB1C5"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
\ No newline at end of file
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 09f5197..1842fbb 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -47,6 +47,13 @@
 		gap: 0.5rem;
 	}
 
+	.button-icon {
+		background-color: transparent;
+		height: 24px;
+		width: 24px;
+		padding: 0;
+	}
+
 	.button-primary {
 		background-color: #ffb1c5;
 		box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
diff --git a/src/lib/components/atoms/Dialogue.svelte b/src/lib/components/atoms/Dialogue.svelte
index d7463a2..1f7d758 100644
--- a/src/lib/components/atoms/Dialogue.svelte
+++ b/src/lib/components/atoms/Dialogue.svelte
@@ -80,6 +80,7 @@
 		left: 0;
 		width: 100%;
 		background-color: var(--grey-six);
+		margin-bottom: 16px;
 	}
 
 	.modal {
diff --git a/src/routes/poll/+page.svelte b/src/routes/poll/+page.svelte
index 04b4d38..8a9ace3 100644
--- a/src/routes/poll/+page.svelte
+++ b/src/routes/poll/+page.svelte
@@ -9,6 +9,9 @@
 	import Button from '$lib/components/atoms/Button.svelte';
 	import { goto } from '$app/navigation';
 
+	import questionMark from '$lib/assets/icons/help.svg';
+	import trash from '$lib/assets/icons/delete.svg';
+
 	interface Selected {
 		[key: string]: string[];
 	}
@@ -97,17 +100,17 @@
 		// update ui
 		logos = logos;
 
-		if (location.hash !== '') {
-			try {
-				await exchange_token(location.hash.substring(1));
-			} catch (err) {
-				alert(`Could not exchange the token: ${err}`);
-			}
-		} else if (localStorage.getItem('killswitch') === null) {
-			await goto('/poll/unauthorized/');
-		} else {
-			alert('Warning: no token!');
-		}
+		// if (location.hash !== '') {
+		// 	try {
+		// 		await exchange_token(location.hash.substring(1));
+		// 	} catch (err) {
+		// 		alert(`Could not exchange the token: ${err}`);
+		// 	}
+		// } else if (localStorage.getItem('killswitch') === null) {
+		// 	await goto('/poll/unauthorized/');
+		// } else {
+		// 	alert('Warning: no token!');
+		// }
 	});
 
 	function previousPage() {
@@ -219,14 +222,16 @@
 <main>
 	<div class="wrapper">
 		<div class="top-container">
-			<h3>ReVanced</h3>
-			<h1>{finalPage ? 'Review selected logos' : 'Select logos'}</h1>
-			<h2>
-				{ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages}
-			</h2>
+			<div class="top-container-text">
+				<h3>ReVanced</h3>
+				<h1>{finalPage ? 'Review selected logos' : 'Select logos'}</h1>
+				<h2>
+					{ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages}
+				</h2>
+			</div>
 			<div class="top-custom-button-container">
-				<button on:click={() => (modalOpen = !modalOpen)}>How does this work?</button>
-				<button on:click={clearLogos}>Clear All</button>
+				<Button on:click={() => (modalOpen = !modalOpen)} kind="icon" icon={questionMark}></Button>
+				<Button on:click={clearLogos} kind="icon" icon={trash}></Button>
 			</div>
 		</div>
 
@@ -407,20 +412,25 @@
 	}
 
 	.top-container {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
 		margin-bottom: 2rem;
 		background-color: var(--accent-color);
 		padding: 2rem;
 		border-radius: 20px;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.top-container-text{
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 	}
 
 	.top-custom-button-container {
 		margin-top: 0.5rem;
 		display: flex;
 		flex-direction: row;
-		gap: 0.5rem;
+		gap: 0.75rem;
 	}
 
 	.warning {