From ef12e1a36eeb1f2a38b4eed62d18ef52db119261 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 18 Jan 2023 09:59:46 +0800
Subject: [PATCH] #151 new footer layout

---
 .../components/FooterLinks/FooterLinks.svelte | 150 +++++++-----------
 modules/gui/src/routes/+layout.svelte         |   8 +-
 2 files changed, 57 insertions(+), 101 deletions(-)

diff --git a/modules/gui/src/components/FooterLinks/FooterLinks.svelte b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
index 18aba0a..4e69983 100644
--- a/modules/gui/src/components/FooterLinks/FooterLinks.svelte
+++ b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
@@ -1,104 +1,62 @@
-<footer class="h-autofont-machina relative w-full bg-black">
-	<section class="p-4 px-16 py-16">
-		<div class="flex">
-			<div class="footer-text w-3/4 pr-16">
-				<h3 class="mb-5 text-4xl text-primary">
-					Changing the way you build. And what happens after you build it.
-				</h3>
-				<p class="mb-5">
-					tea.cli is a delightful package manager that gets out of your way and sets you up for a
-					joyful development process. You can install it today. Our web3 protocol will create an OSS
-					ecosystem that is safer for all users, and fair for all maintainers. Read our white paper
-					here.
-				</p>
-				<div class="w-3/4">
-					<img src="/images/footer-grid-element.svg" alt="grid" />
-				</div>
-			</div>
+<script lang="ts">
+	import Button from '@tea/ui/Button/Button.svelte';
+</script>
 
-			<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"
-							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"
-							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"
-							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"
-							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"
-							target="_blank"
-							rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
-						>
-					</div>
-				</ul>
+<footer class="relative h-auto w-full bg-black font-machina">
+	<section class="p-4 px-16 py-16">
+		<h3 class="mb-5 text-2xl text-primary">QUICK LINKS</h3>
+		<menu class="flex gap-4">
+			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+				<a href="/">
+					<Button>
+						<div class="flex justify-between text-primary hover:text-black">
+							<div class="uppercase">About the tea store</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
 			</div>
-		</div>
+			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+				<a href="/">
+					<Button>
+						<div class="flex justify-between text-primary hover:text-black">
+							<div class="uppercase">REPORT A PROBLEM</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
+			</div>
+			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+				<a href="https://tea.xyz" target="_blank" rel="noreferrer">
+					<Button>
+						<div class="flex justify-between text-primary hover:text-black">
+							<div class="uppercase">VISIT TEA.XYZ</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
+			</div>
+		</menu>
 	</section>
 
 	<section class="h-16 border border-r-0 border-gray p-4 px-16">
-		<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"
-						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/"
-							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/"
-							target="_blank"
-							rel="noreferrer">Terms of Use</a
-						>
-					</li>
-				</ul>
-			</div>
+		<div class="flex gap-4 text-xs text-gray">
+			<a
+				href="https://tea.xyz/terms-of-use/"
+				target="_blank"
+				rel="noreferrer"
+				class="hover:text-white"
+			>
+				TERMS & SERVICES
+			</a>
+			<a
+				href="https://tea.xyz/privacy-policy/"
+				target="_blank"
+				rel="noreferrer"
+				class="hover:text-white"
+			>
+				PRIVACY POLICY
+			</a>
 		</div>
 	</section>
 </footer>
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index 47451c0..57d3d85 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -23,7 +23,7 @@
 
 <div id="main-layout" class="w-full">
 	<TopBar />
-	<section class="pt-24" bind:this={view}>
+	<section class="relative pt-24" bind:this={view}>
 		<figure />
 
 		<div class="content">
@@ -42,11 +42,9 @@
 		height: 100vh;
 	}
 	section {
-		position: fixed;
-		left: 0px;
-		right: 0px;
-		height: 100vh;
+		height: calc(100vh - 82px);
 		overflow-y: scroll;
+		box-sizing: border-box;
 	}
 
 	figure {