From 9a0ca6ebaaadda74a622c30e2065260a811eeda2 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Tue, 7 Mar 2023 02:46:34 -0500
Subject: [PATCH] fix: tweak logo option design

---
 src/app.css                                |  2 +-
 src/lib/assets/logo.svg                    | 16 +++++--
 src/lib/components/atoms/Button.svelte     | 22 ++++++----
 src/lib/components/atoms/Dialogue.svelte   |  6 +--
 src/lib/components/atoms/LogoOption.svelte | 50 ++++++++++++++--------
 src/routes/poll/+page.svelte               |  2 +-
 6 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/src/app.css b/src/app.css
index 3a0aee3..b9f3eee 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/lib/assets/logo.svg b/src/lib/assets/logo.svg
index 0e71d80..dfa7676 100644
--- a/src/lib/assets/logo.svg
+++ b/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">
-    <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 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"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="681" height="755" viewBox="0 0 681 755" fill="none">
+<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="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>
\ No newline at end of file
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index ad4e236..09f5197 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/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>
diff --git a/src/lib/components/atoms/Dialogue.svelte b/src/lib/components/atoms/Dialogue.svelte
index 13daa91..d7463a2 100644
--- a/src/lib/components/atoms/Dialogue.svelte
+++ b/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);
 	}
diff --git a/src/lib/components/atoms/LogoOption.svelte b/src/lib/components/atoms/LogoOption.svelte
index fb175b2..b56dca7 100644
--- a/src/lib/components/atoms/LogoOption.svelte
+++ b/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;
diff --git a/src/routes/poll/+page.svelte b/src/routes/poll/+page.svelte
index dd74918..04b4d38 100644
--- a/src/routes/poll/+page.svelte
+++ b/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;