From ddcec0f24947a325d34bb4b82428758ccc21a7ce Mon Sep 17 00:00:00 2001
From: jakebogan01 <jakebogan01@gmail.com>
Date: Fri, 24 May 2024 23:55:05 -0400
Subject: [PATCH 1/3] updates announcement banner

---
 .../molecules/AnnouncementModal.svelte        | 177 +++++++++++++-----
 1 file changed, 133 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/molecules/AnnouncementModal.svelte b/src/lib/components/molecules/AnnouncementModal.svelte
index 5cf1b3a..b9d474e 100644
--- a/src/lib/components/molecules/AnnouncementModal.svelte
+++ b/src/lib/components/molecules/AnnouncementModal.svelte
@@ -14,53 +14,142 @@
 
 {#if show}
 	<div class="modal" transition:slide={{ duration: 500 }}>
-		<div class="modal-content">
-			<button class="close-button" on:click={() => (show = false)}>X</button>
-			<div class="content">
-				<h4>🚀 Excited to announce the launch of our innovative 'Learn to Earn' Token Project</h4>
-				<p>
-					🥇 Get ready to revolutionize language learning and earn reward <SparklingHighlight
-						><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight
-					> while you improve your skills!
-				</p>
+		<div class="wrapper">
+			<p>Get ready to revolutionize language learning and earn reward <SparklingHighlight><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight> while you improve your skills!</p>
+			<div class="btn-wrapper">
+				<a href="http://token.langx.io" target="_blank" class="open">Visit</a>
+				<button type="button" class="close" on:click={() => (show = false)}>Close</button>
 			</div>
 		</div>
 	</div>
+
+<!--	<div class="modal" transition:slide={{ duration: 500 }}>-->
+<!--		<div class="modal-content">-->
+<!--			<button class="close-button" on:click={() => (show = false)}>X</button>-->
+<!--			<div class="content">-->
+<!--				<h4>🚀 Excited to announce the launch of our innovative 'Learn to Earn' Token Project</h4>-->
+<!--				<p>-->
+<!--					🥇 Get ready to revolutionize language learning and earn reward <SparklingHighlight-->
+<!--						><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight-->
+<!--					> while you improve your skills!-->
+<!--				</p>-->
+<!--			</div>-->
+<!--		</div>-->
+<!--	</div>-->
 {/if}
 
-<style>
-	@import '$lib/scss/_themes.scss';
-	.modal {
-		position: relative;
-		z-index: 9999;
-		width: 100%;
-		background-color: var(--color--secondary);
-	}
-
-	.modal-content {
-		position: relative;
-		margin: 0 auto;
-		padding: 20px;
-		width: 90%;
-	}
-
-	a {
-		text-decoration-color: var(--color--text);
-	}
-
-	.content {
-		padding-right: 50px;
-	}
-
-	.close-button {
-		position: absolute;
-		right: 10px;
-		top: 50%;
-		transform: translateY(-50%);
-		border: none;
-		background: none;
-		font-size: 1.5em;
-		cursor: pointer;
-		color: var(--color--text);
-	}
+<style lang="scss">
+		@import '$lib/scss/_themes.scss';
+
+		.modal {
+				position: fixed;
+				left: 0px;
+				right: 0px;
+				bottom: 0px;
+    		background-color: var(--color--secondary);
+				z-index: 9999;
+
+				.wrapper {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						column-gap: 2rem; /* 32px */
+						row-gap: 1rem; /* 16px */
+          	padding: 1.5rem; /* 24px */
+						max-width: 1400px;
+						margin: auto;
+
+						@media (min-width: 768px) {
+								flex-direction: row;
+								align-items: center;
+						}
+
+						@media (min-width: 1024px) {
+								padding-left: 2rem; /* 32px */
+								padding-right: 2rem; /* 32px */
+						}
+
+						p {
+								max-width: 56rem; /* 896px */
+								font-size: 1rem; /* 16px */
+								line-height: 1.5rem; /* 24px */
+								color: #ffffff;
+								font-weight: bold;
+
+								a {
+										color: var(--color--yellow);
+								}
+						}
+
+						.btn-wrapper {
+								display: flex;
+								flex: none;
+								align-items: center;
+								column-gap: 1.25rem; /* 20px */
+
+								.open {
+										text-decoration: none;
+										border-radius: 0.375rem; /* 6px */
+										background-color: #111827;
+										padding: 0.5rem 0.75rem;
+										font-size: 0.875rem; /* 14px */
+										line-height: 1.25rem; /* 20px */
+										font-weight: 500;
+    								color: #ffffff;
+										box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+										cursor: pointer;
+
+										&:hover {
+												background-color: #000000;
+										}
+								}
+
+								.close {
+										background-color: transparent;
+										border: none;
+									  outline: none;
+									  box-shadow: none;
+										font-size: 0.875rem; /* 14px */
+										line-height: 1.5rem; /* 24px */
+										font-weight: 600;
+    								color: #ffffff;
+                  	cursor: pointer;
+								}
+						}
+				}
+		}
+
+	//.modal {
+	//	position: relative;
+	//	z-index: 9999;
+	//	width: 100%;
+	//	background-color: var(--color--secondary);
+	//}
+	//
+	//.modal-content {
+	//	position: relative;
+	//	margin: 0 auto;
+	//	padding: 20px;
+	//	width: 90%;
+	//}
+	//
+	//a {
+	//	text-decoration-color: var(--color--text);
+	//}
+	//
+	//.content {
+	//	padding-right: 50px;
+	//}
+	//
+	//.close-button {
+	//	position: absolute;
+	//	right: 10px;
+	//	top: 50%;
+	//	transform: translateY(-50%);
+	//	border: none;
+	//	background: none;
+	//	font-size: 1.5em;
+	//	cursor: pointer;
+	//	color: var(--color--text);
+	//}
 </style>

From 58700f22db26816c0e65f982ad84689fcf2e9839 Mon Sep 17 00:00:00 2001
From: xue <behicsakar@gmail.com>
Date: Sat, 25 May 2024 07:14:55 +0300
Subject: [PATCH 2/3] chore: Update AnnouncementModal content and styling

---
 .../molecules/AnnouncementModal.svelte        | 186 +++++++++---------
 1 file changed, 95 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/molecules/AnnouncementModal.svelte b/src/lib/components/molecules/AnnouncementModal.svelte
index b9d474e..c194173 100644
--- a/src/lib/components/molecules/AnnouncementModal.svelte
+++ b/src/lib/components/molecules/AnnouncementModal.svelte
@@ -15,7 +15,11 @@
 {#if show}
 	<div class="modal" transition:slide={{ duration: 500 }}>
 		<div class="wrapper">
-			<p>Get ready to revolutionize language learning and earn reward <SparklingHighlight><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight> while you improve your skills!</p>
+			<p>
+				Get ready to revolutionize language learning and earn reward <SparklingHighlight
+					><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight
+				> while you improve your skills!
+			</p>
 			<div class="btn-wrapper">
 				<a href="http://token.langx.io" target="_blank" class="open">Visit</a>
 				<button type="button" class="close" on:click={() => (show = false)}>Close</button>
@@ -23,101 +27,101 @@
 		</div>
 	</div>
 
-<!--	<div class="modal" transition:slide={{ duration: 500 }}>-->
-<!--		<div class="modal-content">-->
-<!--			<button class="close-button" on:click={() => (show = false)}>X</button>-->
-<!--			<div class="content">-->
-<!--				<h4>🚀 Excited to announce the launch of our innovative 'Learn to Earn' Token Project</h4>-->
-<!--				<p>-->
-<!--					🥇 Get ready to revolutionize language learning and earn reward <SparklingHighlight-->
-<!--						><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight-->
-<!--					> while you improve your skills!-->
-<!--				</p>-->
-<!--			</div>-->
-<!--		</div>-->
-<!--	</div>-->
+	<!--	<div class="modal" transition:slide={{ duration: 500 }}>-->
+	<!--		<div class="modal-content">-->
+	<!--			<button class="close-button" on:click={() => (show = false)}>X</button>-->
+	<!--			<div class="content">-->
+	<!--				<h4>🚀 Excited to announce the launch of our innovative 'Learn to Earn' Token Project</h4>-->
+	<!--				<p>-->
+	<!--					🥇 Get ready to revolutionize language learning and earn reward <SparklingHighlight-->
+	<!--						><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight-->
+	<!--					> while you improve your skills!-->
+	<!--				</p>-->
+	<!--			</div>-->
+	<!--		</div>-->
+	<!--	</div>-->
 {/if}
 
 <style lang="scss">
-		@import '$lib/scss/_themes.scss';
-
-		.modal {
-				position: fixed;
-				left: 0px;
-				right: 0px;
-				bottom: 0px;
-    		background-color: var(--color--secondary);
-				z-index: 9999;
-
-				.wrapper {
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
-						column-gap: 2rem; /* 32px */
-						row-gap: 1rem; /* 16px */
-          	padding: 1.5rem; /* 24px */
-						max-width: 1400px;
-						margin: auto;
-
-						@media (min-width: 768px) {
-								flex-direction: row;
-								align-items: center;
-						}
-
-						@media (min-width: 1024px) {
-								padding-left: 2rem; /* 32px */
-								padding-right: 2rem; /* 32px */
-						}
-
-						p {
-								max-width: 56rem; /* 896px */
-								font-size: 1rem; /* 16px */
-								line-height: 1.5rem; /* 24px */
-								color: #ffffff;
-								font-weight: bold;
-
-								a {
-										color: var(--color--yellow);
-								}
-						}
-
-						.btn-wrapper {
-								display: flex;
-								flex: none;
-								align-items: center;
-								column-gap: 1.25rem; /* 20px */
-
-								.open {
-										text-decoration: none;
-										border-radius: 0.375rem; /* 6px */
-										background-color: #111827;
-										padding: 0.5rem 0.75rem;
-										font-size: 0.875rem; /* 14px */
-										line-height: 1.25rem; /* 20px */
-										font-weight: 500;
-    								color: #ffffff;
-										box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-										cursor: pointer;
-
-										&:hover {
-												background-color: #000000;
-										}
-								}
-
-								.close {
-										background-color: transparent;
-										border: none;
-									  outline: none;
-									  box-shadow: none;
-										font-size: 0.875rem; /* 14px */
-										line-height: 1.5rem; /* 24px */
-										font-weight: 600;
-    								color: #ffffff;
-                  	cursor: pointer;
-								}
-						}
+	@import '$lib/scss/_themes.scss';
+
+	.modal {
+		position: fixed;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		background-color: var(--color--secondary);
+		z-index: 9999;
+
+		.wrapper {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			column-gap: 2rem; /* 32px */
+			row-gap: 1rem; /* 16px */
+			padding: 1.5rem; /* 24px */
+			max-width: 1400px;
+			margin: auto;
+
+			@media (min-width: 768px) {
+				flex-direction: row;
+				align-items: center;
+			}
+
+			@media (min-width: 1024px) {
+				padding-left: 2rem; /* 32px */
+				padding-right: 2rem; /* 32px */
+			}
+
+			p {
+				max-width: 56rem; /* 896px */
+				font-size: 1rem; /* 16px */
+				line-height: 1.5rem; /* 24px */
+				color: #ffffff;
+				font-weight: bold;
+
+				a {
+					color: var(--color--yellow);
 				}
+			}
+
+			.btn-wrapper {
+				display: flex;
+				flex: none;
+				align-items: center;
+				column-gap: 1.25rem; /* 20px */
+
+				.open {
+					text-decoration: none;
+					border-radius: 0.375rem; /* 6px */
+					background-color: #111827;
+					padding: 0.5rem 0.75rem;
+					font-size: 0.875rem; /* 14px */
+					line-height: 1.25rem; /* 20px */
+					font-weight: 500;
+					color: #ffffff;
+					box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+					cursor: pointer;
+
+					&:hover {
+						background-color: #000000;
+					}
+				}
+
+				.close {
+					background-color: transparent;
+					border: none;
+					outline: none;
+					box-shadow: none;
+					font-size: 0.875rem; /* 14px */
+					line-height: 1.5rem; /* 24px */
+					font-weight: 600;
+					color: #ffffff;
+					cursor: pointer;
+				}
+			}
 		}
+	}
 
 	//.modal {
 	//	position: relative;

From 67f8938773227d2fbe13371ea795498e3dc783e8 Mon Sep 17 00:00:00 2001
From: xue <behicsakar@gmail.com>
Date: Sat, 25 May 2024 07:15:46 +0300
Subject: [PATCH 3/3] chore: remove commented out code

---
 .../molecules/AnnouncementModal.svelte        | 48 -------------------
 1 file changed, 48 deletions(-)

diff --git a/src/lib/components/molecules/AnnouncementModal.svelte b/src/lib/components/molecules/AnnouncementModal.svelte
index c194173..353afef 100644
--- a/src/lib/components/molecules/AnnouncementModal.svelte
+++ b/src/lib/components/molecules/AnnouncementModal.svelte
@@ -26,20 +26,6 @@
 			</div>
 		</div>
 	</div>
-
-	<!--	<div class="modal" transition:slide={{ duration: 500 }}>-->
-	<!--		<div class="modal-content">-->
-	<!--			<button class="close-button" on:click={() => (show = false)}>X</button>-->
-	<!--			<div class="content">-->
-	<!--				<h4>🚀 Excited to announce the launch of our innovative 'Learn to Earn' Token Project</h4>-->
-	<!--				<p>-->
-	<!--					🥇 Get ready to revolutionize language learning and earn reward <SparklingHighlight-->
-	<!--						><a href="http://token.langx.io" target="_blank">LangX Token</a></SparklingHighlight-->
-	<!--					> while you improve your skills!-->
-	<!--				</p>-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--	</div>-->
 {/if}
 
 <style lang="scss">
@@ -122,38 +108,4 @@
 			}
 		}
 	}
-
-	//.modal {
-	//	position: relative;
-	//	z-index: 9999;
-	//	width: 100%;
-	//	background-color: var(--color--secondary);
-	//}
-	//
-	//.modal-content {
-	//	position: relative;
-	//	margin: 0 auto;
-	//	padding: 20px;
-	//	width: 90%;
-	//}
-	//
-	//a {
-	//	text-decoration-color: var(--color--text);
-	//}
-	//
-	//.content {
-	//	padding-right: 50px;
-	//}
-	//
-	//.close-button {
-	//	position: absolute;
-	//	right: 10px;
-	//	top: 50%;
-	//	transform: translateY(-50%);
-	//	border: none;
-	//	background: none;
-	//	font-size: 1.5em;
-	//	cursor: pointer;
-	//	color: var(--color--text);
-	//}
 </style>