Merge pull request #93 from Honzoraptor31415/main

Made powered by / verified by companie's icons on home page change color to the brand color when hovered
langx · Jan 9, 2025 · 4aef627 · 4aef627
2 parents b875c7e + 234dec5
commit 4aef627
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 21 deletions.
diff --git a/src/lib/components/molecules/AnnouncementModal.svelte b/src/lib/components/molecules/AnnouncementModal.svelte
@@ -6,9 +6,14 @@
 	let show = false;
 
 	onMount(() => {
-		setTimeout(() => {
-			show = true;
-		}, 3000); // Delay
+		if (
+			localStorage.getItem('show-accouncment-modal') === null ||
+			localStorage.getItem('show-accouncment-modal') === 'true'
+		) {
+			setTimeout(() => {
+				show = true;
+			}, 3000); // Delay
+		}
 	});
 </script>
 
@@ -22,7 +27,14 @@
 			</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>
+				<button
+					type="button"
+					class="close"
+					on:click={() => {
+						show = false;
+						localStorage.setItem('show-accouncment-modal', 'false');
+					}}>Close</button
+				>
 			</div>
 		</div>
 	</div>

diff --git a/src/lib/components/organisms/BCSponsors.svelte b/src/lib/components/organisms/BCSponsors.svelte
@@ -3,7 +3,7 @@
 		<h2>Powered by Growing Companies Worldwide</h2>
 		<div class="sponsor-container">
 			<div>
-				<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer" id="cloudflare-link">
 					<svg
 						fill="var(--color--text)"
 						width="58px"
@@ -26,7 +26,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer" id="digitalocean-link">
 					<svg
 						width="52px"
 						height="52px"
@@ -50,7 +50,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer" id="backblaze-link">
 					<svg
 						width="50px"
 						height="50px"
@@ -71,7 +71,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">
+				<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer" id="nodejs-link">
 					<svg
 						width="50px"
 						height="50px"
@@ -93,7 +93,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer">
+				<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer" id="appwrite-link">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="45"
@@ -116,6 +116,7 @@
 
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
+	@import '$lib/scss/variables.scss';
 
 	$yellow: var(--color--primary);
 
@@ -183,9 +184,29 @@
 						transition: fill 0.3s ease-in-out;
 					}
 
-					&:hover svg,
-					&:hover path {
-						fill: var(--color--secondary);
+					&#cloudflare-link:hover svg,
+					&#cloudflare-link:hover path {
+						fill: var(--cloudflare-color);
+					}
+
+					&#digitalocean-link:hover svg,
+					&#digitalocean-link:hover path {
+						fill: var(--digitalocean-color);
+					}
+
+					&#backblaze-link:hover svg,
+					&#backblaze-link:hover path {
+						fill: var(--backblaze-color);
+					}
+
+					&#nodejs-link:hover svg,
+					&#nodejs-link:hover path {
+						fill: var(--nodejs-color);
+					}
+
+					&#appwrite-link:hover svg,
+					&#appwrite-link:hover path {
+						fill: var(--appwrite-color);
 					}
 				}
 			}

diff --git a/src/lib/components/organisms/CSponsors.svelte b/src/lib/components/organisms/CSponsors.svelte
@@ -3,7 +3,7 @@
 		<h2>Verified by Leading Companies Worldwide</h2>
 		<div class="sponsor-container">
 			<div>
-				<a href="https://apple.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://apple.com" target="_blank" rel="noopener noreferrer" id="apple-link">
 					<svg
 						width="48px"
 						height="48px"
@@ -36,7 +36,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" id="facebook-link">
 					<svg
 						width="68px"
 						height="68px"
@@ -56,7 +56,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" id="tiktok-link">
 					<svg
 						fill="var(--color--text)"
 						width="50px"
@@ -75,7 +75,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://google.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://google.com" target="_blank" rel="noopener noreferrer" id="google-link">
 					<svg
 						width="45px"
 						height="45px"
@@ -155,7 +155,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://x.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://x.com" target="_blank" rel="noopener noreferrer" id="twitter-link">
 					<svg
 						width="50px"
 						height="50px"
@@ -188,7 +188,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://huawei.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://huawei.com" target="_blank" rel="noopener noreferrer" id="huawei-link">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="50"
@@ -207,6 +207,7 @@
 
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
+	@import '$lib/scss/variables.scss';
 
 	$yellow: var(--color--primary);
 
@@ -278,9 +279,56 @@
 						transition: fill 0.3s ease-in-out;
 					}
 
-					&:hover svg,
-					&:hover path {
-						fill: var(--color--secondary);
+					&#apple-link:hover svg,
+					&#apple-link:hover path {
+						fill: var(--apple-color);
+					}
+
+					&#facebook-link:hover svg,
+					&#facebook-link:hover path {
+						fill: var(--facebook-color);
+					}
+
+					&#apple-link:hover svg,
+					&#apple-link:hover path {
+						fill: var(--apple-color);
+					}
+
+					&#tiktok-link svg {
+						transition: 0.3s;
+					}
+
+					&#tiktok-link:hover svg {
+						box-shadow:
+							-2px -2px 5px 1px var(--tiktok-color-blue),
+							2px 2px 5px 1px var(--tiktok-color-red);
+						background: black;
+					}
+
+					&#google-link:hover path#Fill-4 {
+						fill: var(--google-color-blue);
+					}
+
+					&#google-link:hover path#Fill-3 {
+						fill: var(--google-color-green);
+					}
+
+					&#google-link:hover path#Fill-2 {
+						fill: var(--google-color-red);
+					}
+
+					&#google-link:hover path#Fill-1 {
+						fill: var(--google-color-yellow);
+					}
+
+					&#twitter-link:hover svg,
+					&#twitter-link:hover path {
+						fill: var(--twitter-color);
+					}
+
+					&#huawei-link:hover svg,
+					&#huawei-link:hover path {
+						fill: var(--huawei-color);
 					}
 				}
 			}

diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
@@ -10,4 +10,21 @@
 	--ease-out-1: cubic-bezier(0, 0, 0.75, 1);
 	--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
 	--ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+
+	// Verified by / Powered by companie's accent colors
+	--apple-color: #fff;
+	--facebook-color: #0866FF;
+	--tiktok-color-red: #fe2c55;
+	--tiktok-color-blue: #25f4ee;
+	--google-color-yellow: #FBC02D;
+	--google-color-red: #E53935;
+	--google-color-green: #4CAF50;
+	--google-color-blue: #1565C0;
+	--twitter-color: #03A9F4;
+	--huawei-color: #c7000b;
+	--cloudflare-color: #f6821f;
+	--digitalocean-color: #0069ff;
+	--backblaze-color: #e21e29;
+	--nodejs-color: #5fa04e;
+	--appwrite-color: #FD366E;
 }