From d8b998be4e66c6c4f8f72a16513e641824e54e0c Mon Sep 17 00:00:00 2001
From: Matthew Scott <matthew.scott@external-sentry.io>
Date: Mon, 5 Aug 2024 12:07:17 -0500
Subject: [PATCH] fix: add branded link styles and fix mobile external icon

---
 public/images/icons/gitHub-logo.svg  |  3 +++
 public/images/icons/twitter-logo.svg |  3 +++
 src/layouts/Layout.astro             | 36 ++++++++++++++++++++++++----
 src/pages/join.astro                 |  2 +-
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 public/images/icons/gitHub-logo.svg
 create mode 100644 public/images/icons/twitter-logo.svg

diff --git a/public/images/icons/gitHub-logo.svg b/public/images/icons/gitHub-logo.svg
new file mode 100644
index 0000000..81b0a6d
--- /dev/null
+++ b/public/images/icons/gitHub-logo.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4959 0C9.52833 0.00152411 6.65809 1.04194 4.39839 2.9352C2.13869 4.82847 0.636876 7.45113 0.161491 10.3342C-0.313894 13.2173 0.268142 16.1728 1.80354 18.6723C3.33893 21.1718 5.72755 23.0522 8.5423 23.9774C9.16328 24.0915 9.39718 23.7105 9.39718 23.3866C9.39718 23.0626 9.38476 22.1234 9.38062 21.0966C5.90314 21.8402 5.16832 19.644 5.16832 19.644C4.60116 18.2179 3.78146 17.843 3.78146 17.843C2.64714 17.081 3.86634 17.0953 3.86634 17.0953C5.12278 17.1829 5.78309 18.3645 5.78309 18.3645C6.89671 20.245 8.70789 19.701 9.41994 19.3832C9.53172 18.5866 9.8567 18.0447 10.2148 17.737C7.43696 17.4274 4.51836 16.372 4.51836 11.6576C4.50114 10.435 4.9621 9.2526 5.80586 8.35512C5.67752 8.04544 5.24904 6.79452 5.92798 5.09538C5.92798 5.09538 6.97744 4.76533 9.36614 6.35649C11.415 5.80501 13.5767 5.80501 15.6256 6.35649C18.0122 4.76533 19.0596 5.09538 19.0596 5.09538C19.7406 6.79044 19.3121 8.04137 19.1838 8.35512C20.0302 9.25275 20.4922 10.4372 20.4734 11.6617C20.4734 16.3863 17.5486 17.4274 14.7666 17.7309C15.2137 18.114 15.6132 18.8617 15.6132 20.0107C15.6132 21.6569 15.5987 22.9811 15.5987 23.3866C15.5987 23.7146 15.8243 24.0976 16.4577 23.9774C19.2728 23.0521 21.6616 21.1714 23.197 18.6715C24.7324 16.1716 25.3141 13.2156 24.8382 10.3322C24.3622 7.44886 22.8597 4.82617 20.5992 2.93323C18.3388 1.04029 15.4679 0.000558055 12.5 0H12.4959Z" fill="white"/>
+</svg>
diff --git a/public/images/icons/twitter-logo.svg b/public/images/icons/twitter-logo.svg
new file mode 100644
index 0000000..f17f641
--- /dev/null
+++ b/public/images/icons/twitter-logo.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9027 9.08345L19.3482 0.428711H17.5838L11.119 7.9435L5.95547 0.428711H0L7.8082 11.7924L0 20.8682H1.76443L8.59152 12.9323L14.0445 20.8682H20L11.9027 9.08345ZM2.40018 1.75695H5.11025L17.5847 19.6004H14.8746L2.40018 1.75695Z" fill="white"/>
+</svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3282574..b91d58f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -274,21 +274,49 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   a.emphasized:hover {
     opacity: 80%;
   }
-  a.emphasized.github.branded {
+
+  a.emphasized.branded {
     color: white;
+    font-size: 22px;
+    font-weight: 500;
+    padding: 0.25rem 1.1875rem 0.4375rem 0.75rem;
+    line-height: 1.7875rem;
+    margin: 0 0.25rem;
+    white-space: nowrap;
+  }
+  a.emphasized.branded::before {
+    display: inline-block;
+    width: 1.625rem;
+    height: 1.625rem;
+    margin-right: 0.75rem;
+  }
+  a.emphasized.github {
     background-color: #6E5494;
+    padding-left: 0.5rem;
   }
-  a.emphasized.twitter.branded {
-    color: white;
+  a.emphasized.github::before {
+    content: url('/images/icons/gitHub-logo.svg');
+    transform: translateY(4px);
+  }
+  a.emphasized.twitter {
     background-color: #1E1E1E;
   }
+  a.emphasized.twitter:before {
+    content: url('/images/icons/twitter-logo.svg');
+    transform: translateY(3px);
+  }
   a.emphasized.external::after {
     content: url('/images/icons/external-link-icon.svg');
     display: inline-block;
     width: 0.75rem;
     height: 0.75rem;
     margin-left: 1rem;
-    transform: scale(1.25) translateY(-5px);
+    transform: scale(1.25) translateY(-2px);
+  }
+  @media (min-width: 1024px) {
+    a.emphasized.external::after {
+      transform: scale(1.25) translateY(-4px);
+    }
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */
diff --git a/src/pages/join.astro b/src/pages/join.astro
index 26e8d35..01bce61 100644
--- a/src/pages/join.astro
+++ b/src/pages/join.astro
@@ -158,7 +158,7 @@ const seoMetaData = {
       sectionStyles="!bg-taupe px-[1.5rem] min-h-[20rem] lg:px-[3.5rem]"
       backgroundStyling="bg-[url('/images/background-images/moreHelp-top.svg')] bg-contain bg-no-repeat bg-left h-full top-0 bottom-0 left-0 w-1/2 z-0"
       backgroundBottomStyling="bg-[url('/images/background-images/moreHelp-bottom.svg')] bg-contain bg-no-repeat bg-right bottom-0 right-0 h-full w-1/2 z-0">
-      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem]">
+      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem] z-10">
         <h2 class="text-center">Want some more help?</h2>
         <p class="text-center">Reach out to us at <a href="" target="_BLANK" class="emphasized github branded">Github</a> or <a href="" target="_BLANK" class="emphasized twitter branded">Twitter</a> if you’ve got more questions. We’re happy to help!</p>
       </div>