From c7027c1f2f603cc79bdf12f678ba9386985957c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 14 Nov 2023 15:04:18 +0100
Subject: [PATCH] Extract all external link styling into a component

---
 public/typography.css                        |  6 ----
 src/App/Footer.svelte                        | 14 ++++----
 src/components/ErrorMessage.svelte           |  5 +--
 src/components/ExternalLink.svelte           | 36 ++++++++++++++++++++
 src/components/LoadError.svelte              |  5 +--
 src/modals/ErrorModal.svelte                 |  7 ++--
 src/views/projects/Header/CloneButton.svelte | 12 +++----
 src/views/projects/Header/TrackButton.svelte |  9 ++---
 8 files changed, 61 insertions(+), 33 deletions(-)
 create mode 100644 src/components/ExternalLink.svelte

diff --git a/public/typography.css b/public/typography.css
index 7eae4abad..c3f5d5d7a 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -128,12 +128,6 @@ p {
 .txt-missing {
   color: var(--color-foreground-dim);
 }
-.txt-link {
-  text-decoration: none;
-}
-.txt-link:hover {
-  color: var(--color-fill-primary);
-}
 .txt-emoji {
   height: 1em;
   width: 1em;
diff --git a/src/App/Footer.svelte b/src/App/Footer.svelte
index 69356c18b..bc1b715a7 100644
--- a/src/App/Footer.svelte
+++ b/src/App/Footer.svelte
@@ -30,13 +30,16 @@
     gap: 1.5rem;
   }
 
-  .radworks {
-    display: flex;
+  .logo {
     color: var(--color-foreground-contrast);
   }
 
-  .radworks:hover {
-    color: var(--color-fill-primary);
+  a {
+    display: flex;
+  }
+
+  a:hover {
+    color: var(--color-fill-secondary);
   }
 </style>
 
@@ -44,9 +47,9 @@
   <div class="left">
     <span class="layout-desktop">Supported by</span>
     <a
+      class="logo"
       target="_blank"
       rel="noreferrer"
-      class="radworks"
       href="https://radworks.org">
       <RadworksLogo />
     </a>
@@ -74,7 +77,6 @@
       style:gap="0.25rem"
       target="_blank"
       rel="noreferrer"
-      class="txt-link"
       href="https://radicle.xyz">
       radicle.xyz
       <IconSmall name="arrow-box-up-right" />
diff --git a/src/components/ErrorMessage.svelte b/src/components/ErrorMessage.svelte
index d7e395437..ddc946115 100644
--- a/src/components/ErrorMessage.svelte
+++ b/src/components/ErrorMessage.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Command from "./Command.svelte";
+  import ExternalLink from "./ExternalLink.svelte";
   import Icon from "./Icon.svelte";
 
   export let message: string;
@@ -33,9 +34,9 @@
       If you need help resolving this issue, copy the error message
       <br />
       below and send it to us on
-      <a class="txt-link" href="https://radicle.zulipchat.com/" target="_blank">
+      <ExternalLink href="https://radicle.zulipchat.com">
         radicle.zulipchat.com
-      </a>
+      </ExternalLink>
     </div>
     <div style:max-width="25rem">
       <Command
diff --git a/src/components/ExternalLink.svelte b/src/components/ExternalLink.svelte
new file mode 100644
index 000000000..b2093c265
--- /dev/null
+++ b/src/components/ExternalLink.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import IconSmall from "./IconSmall.svelte";
+
+  export let href: string;
+</script>
+
+<style>
+  a {
+    font-weight: var(--font-weight-semibold);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    text-decoration: none;
+    box-shadow: 0 1px 0 0 var(--color-foreground-contrast);
+  }
+
+  a:hover {
+    color: var(--color-fill-secondary);
+    box-shadow: 0 1px 0 0 var(--color-fill-secondary);
+  }
+
+  .icon {
+    color: var(--color-foreground-gray);
+    position: relative;
+    bottom: 1px;
+  }
+
+  a:hover .icon {
+    color: var(--color-fill-secondary-hover);
+  }
+</style>
+
+<a {href} target="_blank" rel="noreferrer">
+  <slot>{href}</slot>
+  <span class="icon"><IconSmall name="arrow-box-up-right" /></span>
+</a>
diff --git a/src/components/LoadError.svelte b/src/components/LoadError.svelte
index fd7efec1f..0bd7fd3c5 100644
--- a/src/components/LoadError.svelte
+++ b/src/components/LoadError.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Command from "./Command.svelte";
+  import ExternalLink from "./ExternalLink.svelte";
   import Icon from "./Icon.svelte";
 
   export let title: string;
@@ -34,9 +35,9 @@
       If you need help resolving this issue, copy the error message
       <br />
       below and send it to us on
-      <a class="txt-link" href="https://radicle.zulipchat.com/" target="_blank">
+      <ExternalLink href="https://radicle.zulipchat.com">
         radicle.zulipchat.com
-      </a>
+      </ExternalLink>
     </div>
   </div>
 
diff --git a/src/modals/ErrorModal.svelte b/src/modals/ErrorModal.svelte
index 1c2a9d92b..a75f90e02 100644
--- a/src/modals/ErrorModal.svelte
+++ b/src/modals/ErrorModal.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Command from "@app/components/Command.svelte";
-  import Modal from "@app/components/Modal.svelte";
+  import ExternalLink from "@app/components/ExternalLink.svelte";
   import Icon from "@app/components/Icon.svelte";
+  import Modal from "@app/components/Modal.svelte";
 
   export let title: string;
   export let subtitle: string[];
@@ -20,9 +21,9 @@
     If you need help resolving this issue, copy the error message
     <br />
     below and send it to us on
-    <a class="txt-link" href="https://radicle.zulipchat.com/" target="_blank">
+    <ExternalLink href="https://radicle.zulipchat.com">
       radicle.zulipchat.com
-    </a>
+    </ExternalLink>
   </div>
 
   <div slot="body">
diff --git a/src/views/projects/Header/CloneButton.svelte b/src/views/projects/Header/CloneButton.svelte
index 6b9034822..d40e5c8c9 100644
--- a/src/views/projects/Header/CloneButton.svelte
+++ b/src/views/projects/Header/CloneButton.svelte
@@ -6,8 +6,9 @@
 
   import Button from "@app/components/Button.svelte";
   import Command from "@app/components/Command.svelte";
-  import Popover from "@app/components/Popover.svelte";
+  import ExternalLink from "@app/components/ExternalLink.svelte";
   import Icon from "@app/components/Icon.svelte";
+  import Popover from "@app/components/Popover.svelte";
 
   export let baseUrl: BaseUrl;
   export let id: string;
@@ -47,13 +48,8 @@
   <div slot="popover" style:width="24rem">
     <div style:margin-bottom="1.5rem">
       <label for="rad-clone-url">
-        Use the <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://radicle.xyz/#try"
-          class="txt-link txt-bold">
-          Radicle CLI
-        </a>
+        Use the
+        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
         to clone this project.
       </label>
       <Command command={radCloneUrl} />
diff --git a/src/views/projects/Header/TrackButton.svelte b/src/views/projects/Header/TrackButton.svelte
index ec1972bf1..45ef38319 100644
--- a/src/views/projects/Header/TrackButton.svelte
+++ b/src/views/projects/Header/TrackButton.svelte
@@ -3,6 +3,7 @@
 
   import Button from "@app/components/Button.svelte";
   import Command from "@app/components/Command.svelte";
+  import ExternalLink from "@app/components/ExternalLink.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Popover from "@app/components/Popover.svelte";
 
@@ -59,13 +60,9 @@
 
   <div slot="popover" style:width="31rem">
     <div class="track-label">
-      Use the <a
-        target="_blank"
-        rel="noreferrer"
-        href="https://radicle.xyz/#try"
-        class="txt-link txt-bold">
+      Use the <ExternalLink href="https://radicle.xyz/#try">
         Radicle CLI
-      </a>
+      </ExternalLink>
       to {command} this project.
       {#if command === "track"}
         <br />