fix: tweak logo option design

src/app.css

@@ -51,7 +51,7 @@ body {
     --bg-color: #201A1B;
     --grey-one: #252b31;
     --grey-two: #5B3F46;
-    --grey-three: #30312B;
+    --grey-three: #ffd9e112;
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
     --grey-six: #2A2224;

src/lib/assets/logo.svg

@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 165" width="149" height="165" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="681" height="755" viewBox="0 0 681 755" fill="none">
-    <path d="M 88.61 160.69 L 147.72 8.14 C 149.06 4.67 146.5 0.93 142.78 0.93 L 125.65 0.93 C 123.41 0.93 121.41 2.34 120.66 4.45 L 74.5 134.43 L 28.34 4.45 C 27.59 2.34 25.59 0.93 23.35 0.93 L 6.22 0.93 C 2.5 0.93 -0.06 4.67 1.28 8.14 L 60.39 160.69 C 61.18 162.73 63.14 164.07 65.33 164.07 L 83.68 164.07 C 85.86 164.07 87.82 162.73 88.61 160.69 Z" fill="#ffffff"/>
+<path d="M591.66 1.68903C587.084 1.68903 582.996 4.54801 581.426 8.84601L350.612 640.764C347.127 650.307 333.629 650.307 330.144 640.764L99.33 8.84601C97.76 4.54801 93.671 1.68903 89.096 1.68903H11.03C3.35505 1.68903 -1.91401 9.41101 0.883989 16.557L286.962 747.203C288.597 751.378 292.623 754.126 297.108 754.126H383.649C388.133 754.126 392.159 751.378 393.794 747.203L679.872 16.557C682.67 9.41101 677.4 1.68903 669.727 1.68903H591.66Z" fill="url(#paint0_linear_1_3)"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M 39.29 0.93 C 36.07 0.93 33.98 4.31 35.42 7.19 C 46.03 28.41 59.79 55.94 70.64 77.63 C 72.24 80.82 76.78 80.82 78.38 77.63 C 89.22 55.94 102.99 28.41 113.6 7.19 C 115.04 4.31 112.94 0.93 109.73 0.93 L 39.29 0.93 Z" fill="#8bc3f5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M362.707 412.04C358.574 420.306 350.125 425.528 340.883 425.528C331.641 425.528 323.192 420.306 319.059 412.04C274.157 322.235 172.201 118.325 131.107 36.137C127.325 28.573 127.73 19.59 132.175 12.397C136.621 5.20297 144.475 0.825012 152.931 0.825012C239.012 0.825012 442.754 0.825012 528.834 0.825012C537.291 0.825012 545.144 5.20297 549.59 12.397C554.036 19.59 554.44 28.573 550.658 36.137C509.564 118.325 407.609 322.235 362.707 412.04Z" fill="url(#paint1_linear_1_3)"/>
+<defs>
+<linearGradient id="paint0_linear_1_3" x1="340.383" y1="754.13" x2="340.383" y2="1.69306" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF1CD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_3" x1="337.661" y1="30.234" x2="340.439" y2="413.569" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D21DAD"/>
+<stop offset="1" stop-color="#F1FF00"/>
+</linearGradient>
+</defs>
 </svg>

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">
+			<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"
 				/>
-			<h4>{i + 1}/{variants.length}</h4>
 				<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;

src/routes/poll/+page.svelte

@@ -111,7 +111,7 @@
 	});
 
 	function previousPage() {
-		if (currentPage <= 0 && !allowReviewSelections) {
+		if (currentPage <= 0) {
 			if (allowReviewSelections) {
 				// If the current page is 0 and the user has reached the final page beforehand, go to the final page
 				currentPage = logoPages - 1;