fix: tweak logo option design

src/lib/components/atoms/Button.svelte

@@ -16,6 +16,7 @@
 
 <style>
 	button {
+		cursor: pointer;
 		text-decoration: none;
 		border-radius: 16px;
 		transition: all 0.2s var(--bezier-one);
@@ -25,8 +26,10 @@
 		cursor: not-allowed;
 		opacity: 0.4;
 	}
+
 	button,
-	.button-secondary {
+	.button-secondary,
+	.button-circle {
 		min-width: max-content;
 		font-size: 1rem;
 		color: #ffd9e1;
@@ -38,6 +41,10 @@
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
 	}
 
 	.button-primary {
@@ -50,15 +57,12 @@
 		filter: brightness(85%);
 	}
 
-	button,
-	.button-secondary {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
 	img {
 		height: 25px;
 	}
+
+	.button-circle {
+		padding: 0.85rem;
+	}
+
 </style>

src/lib/components/atoms/Dialogue.svelte

@@ -78,14 +78,14 @@
 		gap: 1rem;
 		top: 0;
 		left: 0;
-
 		width: 100%;
 		background-color: var(--grey-six);
-		margin-bottom: 16px;
 	}
 
 	.modal {
 		position: fixed;
+		min-width: 17.5rem;
+		max-width: 35rem;
 		max-height: 75%;
 		overflow-y: scroll;
 		top: 50%;
@@ -101,7 +101,7 @@
 		flex-direction: column;
 		gap: 2px;
 		z-index: 1001;
-		padding: 1rem;
+		padding: 1.5rem;
 		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
 			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 	}

src/lib/components/atoms/LogoOption.svelte

@@ -109,27 +109,32 @@
 	</div>
 	{#if !hideDetails}
 		<div class="actions">
-			<Button
-				on:click={prevVariant}
-				on:click={stopAutoScroll}
-				unclickable={i <= 0}
-				icon={previous}
-				alt="previous"
-			/>
-			<h4>{i + 1}/{variants.length}</h4>
-			<Button
-				on:click={nextVariant}
-				on:click={stopAutoScroll}
-				unclickable={i + 1 >= variants.length}
-				icon={next}
-				alt="next"
-			/>
+			<h3>{i + 1}/{variants.length}</h3>
+			<div class="action-buttons">
+				<Button
+					on:click={prevVariant}
+					on:click={stopAutoScroll}
+					unclickable={i <= 0}
+					icon={previous}
+					alt="previous"
+					kind="circle"
+				/>
+				<Button
+					on:click={nextVariant}
+					on:click={stopAutoScroll}
+					unclickable={i + 1 >= variants.length}
+					icon={next}
+					alt="next"
+					kind="circle"
+				/>
+			</div>
 		</div>
 	{/if}
 </div>
 
 <style>
 	.option {
+		border: 1.5px solid var(--grey-three);
 		width: 100%;
 		color: var(--white);
 		transition: all 0.3s var(--bezier-one);
@@ -147,11 +152,21 @@
 	}
 
 	.actions {
+		border-top: 1px solid var(--grey-three);
 		display: flex;
 		flex-direction: row;
-		padding: 0 1.25rem 1.25rem 1.25rem;
+		padding: 1rem 1.25rem;
 		align-items: center;
+		border-radius: 0 0 16px 16px;
 		justify-content: space-between;
+		pointer-events: none;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: 1rem;
+		pointer-events: all;
+		width: max-content;
 	}
 
 	.variants {
@@ -199,9 +214,6 @@
 	}
 
 	@media screen and (max-width: 768px) {
-		div {
-			flex-direction: column;
-		}
 
 		.text {
 			text-align: center;