refactor: stuff yop

src/app.css

@@ -47,6 +47,7 @@ body {
     --white: #fff;
     --accent-color: #9fd5ff;
     --accent-color-two: hsl(207, 65%, 90%);
+    --accent-low-opacity: #4b5f798a;
     --bg-color: hsl(240, 2%, 11%);
     --grey-one: #252b31;
     --grey-two: #28313b;

src/lib/components/atoms/LogoOption.svelte

@@ -17,7 +17,6 @@
 			selected = selected;
 		}
 		console.log(selected);
-		localStorage.setItem('selected', JSON.stringify(selected));
 	};
 </script>
 
@@ -68,7 +67,7 @@
 	}
 
 	.clicked {
-		background-color: var(--grey-three);
+		background-color: var(--accent-low-opacity);
 	}
 
 	.clicked h2,

src/routes/polling/+page.svelte

@@ -15,15 +15,8 @@
 	let min = 0;
 	let max = logoAmount;
 	let token: string = '';
-
 	let submit = false;
-
+	$: finalPage = currentPage >= logoPages;
-	// try {
-	// 		currentPage = Number(localStorage.getItem('currentPage')) || 0;
-	// 		selected = JSON.parse(localStorage.getItem('selected')) || [];
-	// 	} catch (err) {
-	// 		console.log(err);
-	// 	}
 
 	// TODO: catch blocks.
 	async function exchange_token(bot_token: string) {
@@ -45,7 +38,7 @@
 
 	// you will never see shittier code tm
 	// will refactor later maybe idk
-  // Reply: don't think we need to refactor because nobody cares if this code is shit lol
+	// Reply: don't think we need to refactor because nobody cares if this code is shit lol
 	onMount(async () => {
 		window['use_token'] = exchange_token;
 		window['submit_poll'] = submitBallot;
@@ -87,9 +80,9 @@
 	});
 
 	function previousPage() {
-		if (currentPage <= 0 || submit) return null;
+		if (currentPage <= 0) return null;
 		currentPage--;
-		// localStorage.setItem('currentPage', currentPage.toString());
+		submit = false;
 
 		min = currentPage * logoAmount;
 		max = min + logoAmount;
@@ -99,7 +92,6 @@
 	function nextPage() {
 		if (currentPage >= logoPages || submit) return null;
 		currentPage++;
-		// localStorage.setItem('currentPage', currentPage.toString());
 
 		min = currentPage * logoAmount;
 		max = min + logoAmount;
@@ -107,11 +99,10 @@
 	}
 
 	function clearLogos() {
-    if (submit) {
+		if (submit) {
-      return;
+			return;
-    }
+		}
 		selected = [];
-		// localStorage.setItem('selected', JSON.stringify(selected));
 	}
 
 	async function submitBallot() {
@@ -138,8 +129,6 @@
 			throw Error('Vote not cast.');
 		}
 	}
-
-	$: finalPage = currentPage >= logoPages;
 </script>
 
 <svelte:head>
@@ -203,11 +192,29 @@
 				<h6>No logos have been selected.</h6>
 			</div>
 		{/if}
+
+		{#if submit}
+			<div style="text-align: center;">
+				{#await submitBallot()}
+					<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
+						Submitting...
+					</h6>
+				{:then _}
+					<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
+						Your vote has been cast.
+					</h6>
+				{:catch err}
+					<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
+						An error occured. Try again later.
+						<br />
+						{err}
+					</h6>
+				{/await}
+			</div>
+		{/if}
 	</div>
 	<div class="buttons-container">
-		<Button on:click={previousPage} unclickable={currentPage <= 0 || submit}
+		<Button on:click={previousPage} unclickable={currentPage <= 0}>Previous</Button>
-			>Previous</Button
-		>
 		<Button
 			kind="primary"
 			on:click={finalPage ? () => (submit = true) : nextPage}
@@ -216,22 +223,6 @@
 			{finalPage ? 'Submit' : 'Next'}
 		</Button>
 	</div>
-
-	{#if submit}
-		<div style="text-align: center;">
-			{#await submitBallot()}
-				<h6>Submitting...</h6>
-			{:then _}
-				<h6>Your vote has been cast.</h6>
-			{:catch err}
-				<h6>
-					An error occured. Try again later.
-					<br />
-					{err}
-				</h6>
-			{/await}
-		</div>
-	{/if}
 </main>
 
 <style>
@@ -276,18 +267,21 @@
 		border-top: 1px solid var(--grey-three);
 	}
 
-	/* This is better for large screens, but I am not entirely sure about the media query... */
+	@media screen and (orientation: landscape) and (min-width: 1500px) and (min-height: 950px) {
-	/* @media screen and (orientation: landscape) and (min-width: 1500px) and (min-height: 950px) {
+		.buttons-container {
-	 .buttons-container {
+			justify-content: center;
-	 justify-content: center;
+			z-index: unset;
-	 z-index: unset;
+			position: unset;
-	 position: unset;
+			bottom: unset;
-	 bottom: unset;
+			right: unset;
-	 right: unset;
+			border-top: none;
-	 border-top: unset;
+			background-color: transparent;
-	 background-color: inherit;
+		}
-	 }
+
-	 } */
+		:global(.wrapper) {
+			padding-bottom: 0;
+		}
+	}
 
 	button {
 		background-color: transparent;