feat: local storage

src/lib/components/atoms/Button.svelte

@@ -1,7 +1,7 @@
 <script>
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
-	export let href = '#';
+	export let href = '';
 	export let maxWidth = false;
 	export let icon = '';
 	export let target = '';
@@ -21,11 +21,12 @@
 	a {
 		text-decoration: none;
 		border-radius: 16px;
+		transition: all 0.2s var(--bezier-one);
 	}
 
 	.unclickable {
-		pointer-events: none;
-		cursor:not-allowed;
+		cursor: not-allowed;
+		opacity: 0.4;
 	}
 	div,
 	.button-secondary {
@@ -37,7 +38,6 @@
 		border-radius: 12px;
 		padding: 1rem 1.75rem;
 		display: block;
-		cursor: pointer;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;

src/lib/components/atoms/LogoOption.svelte

@@ -16,9 +16,9 @@
 			// the Updater
 			selected = selected;
 		}
-		console.log(selected)
+		console.log(selected);
+		localStorage.setItem("selected", JSON.stringify(selected));
 	};
-
 </script>
 
 <div on:click={handleClick} class:clicked>
@@ -33,30 +33,36 @@
 	div {
 		color: var(--white);
 		text-decoration: none;
-		padding: 1rem;
+		padding: 1.5rem;
 		width: 100%;
 		transition: all 0.3s var(--bezier-one);
-		border-radius: 8px;
+		border-radius: 4px;
 		display: flex;
 		gap: 1.5rem;
-		align-items: center;
 		background-color: var(--grey-six);
 		border: 1px solid var(--grey-three);
 		cursor: pointer;
+		align-items: center;
 	}
 
+
 	h2 {
 		font-size: 1rem;
 		font-weight: 500;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		
 	}
 
 	h6 {
 		font-size: 0.9rem;
 	}
 
+	h2, h6 {
+		display: block;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 	.text {
 		flex-direction: column;
 	}