From a8f1b3ff4cd36ed5328a3866b9160bb373f7348c Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 21 Dec 2022 13:14:57 +0800
Subject: [PATCH] #101 footer links to open browser

---
 .../components/FooterLinks/FooterLinks.svelte | 62 ++++++++++++++-----
 .../gui/src/components/NavBar/NavBar.svelte   | 11 ++--
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/modules/gui/src/components/FooterLinks/FooterLinks.svelte b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
index 9bc56ef..50e294c 100644
--- a/modules/gui/src/components/FooterLinks/FooterLinks.svelte
+++ b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
@@ -12,35 +12,55 @@
 					here.
 				</p>
 				<div class="w-3/4">
-					<img src="/static/images/footer-grid-element.svg" />
+					<img src="/static/images/footer-grid-element.svg" alt="grid" />
 				</div>
 			</div>
 
 			<div class="card social-box h-full w-1/4 border-2 border-gray">
 				<ul class="list-group list-group-flush">
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://twitter.com/teaxyz"
-							><i class="icon-twitter social-icon mr-3" />Twitter</a
+						<a
+							class="list-group-item"
+							role="button"
+							href="https://twitter.com/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-twitter social-icon mr-3" />Twitter</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"
-							><i class="icon-discord social-icon mr-3" />Discord</a
+						<a
+							class="list-group-item"
+							role="button"
+							href="https://discord.gg/KCZsXfJphn"
+							target="_blank"
+							rel="noreferrer"><i class="icon-discord social-icon mr-3" />Discord</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://github.com/teaxyz"
-							><i class="icon-github social-icon mr-3" />GitHub</a
+						<a
+							class="list-group-item"
+							role="button"
+							href="https://github.com/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-github social-icon mr-3" />GitHub</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"
-							><i class="icon-reddit social-icon mr-3" />Reddit</a
+						<a
+							class="list-group-item"
+							role="button"
+							href="https://reddit.com/r/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-reddit social-icon mr-3" />Reddit</a
 						>
 					</div>
 					<div class="p-3">
-						<a class="list-group-item" role="button" href="https://t.me/tea_xyz"
-							><i class="icon-telegram social-icon mr-3" />Telegram</a
+						<a
+							class="list-group-item"
+							role="button"
+							href="https://t.me/tea_xyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
 						>
 					</div>
 				</ul>
@@ -52,19 +72,29 @@
 		<div class="flex">
 			<div class="w-1/2 pt-2">
 				<p class="text-xs">
-					©2022 tea inc. You can also share our <a href="https://linktr.ee/teaxyz">Linktree</a>.
+					©2022 tea inc. You can also share our <a
+						href="https://linktr.ee/teaxyz"
+						target="_blank"
+						rel="noreferrer">Linktree</a
+					>.
 				</p>
 			</div>
 			<div class="flex w-1/2 pt-2">
 				<ul class="nav ml-auto flex text-xs">
 					<li class="nav-item mr-3 ">
-						<a class="nav-link footer-link small" href="https://tea.xyz/privacy-policy/"
-							>Privacy Policy</a
+						<a
+							class="nav-link footer-link small"
+							href="https://tea.xyz/privacy-policy/"
+							target="_blank"
+							rel="noreferrer">Privacy Policy</a
 						>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link footer-link small" href="https://tea.xyz/terms-of-use/"
-							>Terms of Use</a
+						<a
+							class="nav-link footer-link small"
+							href="https://tea.xyz/terms-of-use/"
+							target="_blank"
+							rel="noreferrer">Terms of Use</a
 						>
 					</li>
 				</ul>
diff --git a/modules/gui/src/components/NavBar/NavBar.svelte b/modules/gui/src/components/NavBar/NavBar.svelte
index 5070054..7a3d3ed 100644
--- a/modules/gui/src/components/NavBar/NavBar.svelte
+++ b/modules/gui/src/components/NavBar/NavBar.svelte
@@ -41,6 +41,12 @@
 			path: '/packages',
 			active: false,
 			label: 'PACKAGES'
+		},
+		{
+			path: 'https://github.com/teaxyz',
+			active: false,
+			label: 'VIEW ON GITHUB',
+			target: '_blank'
 		}
 	];
 
@@ -83,14 +89,11 @@
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
-			<a href={route.path}>
+			<a href={route.path} target={route.target || ''}>
 				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
 			</a>
 		</li>
 	{/each}
-	<li class="nav_button">
-		<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
-	</li>
 
 	<footer class="w-full border border-x-0 border-gray">
 		<a href="/profile">