From 0a0a1361e1aa504d0766582e8bd08ea08adc2094 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Thu, 12 Dec 2024 03:11:40 +0900
Subject: [PATCH] footer icon position fix

---
 assets/tailwind-output.css          |  8 +++--
 manifest.json                       |  2 +-
 src/modules/footer/FooterModule.tsx | 45 ++++++++++++++++++++++++-----
 style.css                           | 26 ++++++++---------
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index dbf43d411..d614df46b 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -4170,8 +4170,8 @@ iframe#launcher {
     margin-bottom: 0px;
   }
 
-  .sm\:mb-20 {
-    margin-bottom: 5rem;
+  .sm\:mb-6 {
+    margin-bottom: 1.5rem;
   }
 
   .sm\:ml-2 {
@@ -4182,6 +4182,10 @@ iframe#launcher {
     margin-top: 0px;
   }
 
+  .sm\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
   .sm\:mt-padding-x-large {
     margin-top: 2.25rem;
   }
diff --git a/manifest.json b/manifest.json
index b7a1a0152..6abd6f4f8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Copenhagen",
   "author": "Sanctuary Computer",
-  "version": "4.2.23",
+  "version": "4.2.24",
   "api_version": 4,
   "default_locale": "en-us",
   "settings": [
diff --git a/src/modules/footer/FooterModule.tsx b/src/modules/footer/FooterModule.tsx
index ac71474a2..33367e438 100644
--- a/src/modules/footer/FooterModule.tsx
+++ b/src/modules/footer/FooterModule.tsx
@@ -13,7 +13,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
   return (
     <footer className="px-margin-mobile pt-margin-web sm:px-margin-web sm:pb-margin-web">
       <h2 className="sr-only">Footer</h2>
-      <div className="default-grid sm:mb-20">
+      <div className="default-grid sm:mb-6">
         <div className="mb-12 hidden items-start sm:col-span-8 sm:flex md:col-span-4 md:mb-0">
           <LinkBase href="/" className="flex flex-row items-center">
             <MiniUnicon color="neutral-1" className="mb-[0.1875rem] h-8 w-8" />
@@ -27,11 +27,11 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             {footerPageData?.footerLinksSupport && footerPageData.footerLinksSupport.length > 0 ? (
               <div className="space-y-[0.3125rem]">
                 <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Support</h3>
-                <ul>
+                <ul className="flex flex-col space-y-1">
                   {footerPageData?.footerLinksSupport.map((link) => (
                     <li key={link.name}>
                       <TextButton
-                        textClassName="body-2 text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1 transition-colors"
+                        textClassName="body-2 text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 block group-hover:dark:text-dark-neutral-1 transition-colors"
                         href={link.url}
                         label={link.name}
                       />
@@ -44,7 +44,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             footerPageData.footerLinksEcosystem.length > 0 ? (
               <div className="col-span-1 space-y-[0.3125rem]">
                 <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Protocol</h3>
-                <ul>
+                <ul className="flex flex-col space-y-1">
                   {footerPageData.footerLinksEcosystem.map((link) => (
                     <li key={link.name}>
                       <TextButton
@@ -60,7 +60,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             {footerPageData?.footerLinksCompany && footerPageData?.footerLinksCompany.length > 0 ? (
               <div className="space-y-[0.3125rem]">
                 <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Company</h3>
-                <ul>
+                <ul className="flex flex-col space-y-1">
                   {footerPageData.footerLinksCompany.map((link) => (
                     <li key={link.name}>
                       <TextButton
@@ -76,7 +76,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             {footerPageData?.footerLinksHelp && footerPageData.footerLinksHelp.length > 0 ? (
               <div className="space-y-[0.3125rem]">
                 <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Need Help?</h3>
-                <ul>
+                <ul className="flex flex-col space-y-1">
                   {footerPageData?.footerLinksHelp.map((link) => (
                     <li key={link.name}>
                       <TextButton
@@ -91,12 +91,41 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             ) : null}
           </nav>
         </div>
+        <div className="col-span-full flex flex-row space-x-gap-large border-b border-light-surface-3 py-margin-web dark:border-dark-surface-3 sm:border-0 sm:px-0 sm:py-0 sm:mt-6">
+          {footerPageData?.footerGithubLink ? (
+            <LinkBase
+              className="group"
+              href={footerPageData.footerGithubLink}
+              ariaLabel="Link to Uniswap Labs Github"
+            >
+              <Github className="h-6 w-6" />
+            </LinkBase>
+          ) : null}
+          {footerPageData?.footerXLink ? (
+            <LinkBase
+              className="group"
+              href={footerPageData.footerXLink}
+              ariaLabel="Link to Uniswap Labs X account"
+            >
+              <X className="h-6 w-6" />
+            </LinkBase>
+          ) : null}
+          {footerPageData?.footerDiscordLink ? (
+            <LinkBase
+              className="group"
+              href={footerPageData.footerDiscordLink}
+              ariaLabel="Link to Uniswap Labs Discord"
+            >
+              <Discord className="h-6 w-6" />
+            </LinkBase>
+          ) : null}
+        </div>
       </div>
       <div className="flex flex-col-reverse border-light-surface-3 dark:border-dark-surface-3 sm:flex-row sm:items-center sm:justify-between sm:border-t sm:pt-padding-large">
         <p className="body-3 my-padding-large text-light-neutral-2 dark:text-dark-neutral-2 sm:my-0">
           @{new Date().getFullYear()} Uniswap Labs
         </p>
-        <div className="flex flex-row space-x-gap-large border-b border-light-surface-3 py-margin-web dark:border-dark-surface-3 sm:border-0 sm:px-0 sm:py-0">
+        {/* <div className="flex flex-row space-x-gap-large border-b border-light-surface-3 py-margin-web dark:border-dark-surface-3 sm:border-0 sm:px-0 sm:py-0">
           {footerPageData?.footerGithubLink ? (
             <LinkBase
               className="group"
@@ -124,7 +153,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
               <Discord className="h-6 w-6" />
             </LinkBase>
           ) : null}
-        </div>
+        </div> */}
       </div>
     </footer>
   );
diff --git a/style.css b/style.css
index 2e0a69ffc..38c1da480 100644
--- a/style.css
+++ b/style.css
@@ -196,47 +196,47 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(1) {
-  animation-duration: 6s;
-  animation-delay: 2s;
+  animation-duration: 5s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 5s;
+  animation-duration: 4s;
   animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(3) {
-  animation-duration: 5s;
-  animation-delay: 2s;
+  animation-duration: 4s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
-  animation-duration: 4s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(5) {
-  animation-duration: 6s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 6s;
+  animation-duration: 4s;
   animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
-  animation-duration: 6s;
+  animation-duration: 4s;
   animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
   animation-duration: 4s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 6s;
+  animation-duration: 5s;
   animation-delay: 1s;
 }