Simplify global anchor styles

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

public/index.css

@@ -93,26 +93,12 @@ a {
   color: inherit;
   text-decoration: none;
 }
-a.link {
-  color: var(--color-foreground-6);
-  text-decoration: none;
-  border-bottom: 1px dashed var(--color-foreground-5);
-}
-a.link:hover {
+
+a:hover {
   color: var(--color-foreground);
   border-bottom-color: var(--color-foreground);
 }
-a.link.primary {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary-5);
-}
-a.link.primary:hover {
-  color: var(--color-primary-5);
-  border-bottom-color: var(--color-primary-5);
-}
-a.address {
-  border-bottom-color: transparent;
-}
+
 .off-centered {
   height: 100%;
   padding-top: 5rem;

public/typography.css

@@ -94,3 +94,12 @@ p {
   text-overflow: ellipsis;
   overflow-x: hidden;
 }
+.txt-link {
+  color: var(--color-foreground-6);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--color-foreground-5);
+}
+.txt-link:hover {
+  color: var(--color-foreground);
+  border-bottom-color: var(--color-foreground);
+}

src/Form.svelte

@@ -207,8 +207,8 @@
             {#if isUrl(field.value)}
               <span class="ellipsis">
                 <a
-                  class="link"
                   href={field.value}
+                  class="txt-link"
                   target="_blank"
                   rel="noreferrer">
                   {field.value}
@@ -230,7 +230,7 @@
               </div>
             {:else if field.url}
               <div>
-                <a class="link" use:link href={field.url}>{field.value}</a>
+                <a use:link href={field.url} class="txt-link">{field.value}</a>
               </div>
             {:else if field.validate === "id"}
               <div class="mobile">

src/Link.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { Link } from "svelte-routing";
-
-  export let to: string;
-  export let primary = false;
-
-  function getProps(/* props: any */) {
-    if (primary) {
-      return { class: "primary link" };
-    }
-    return { class: "link" };
-  }
-</script>
-
-<Link {to} {getProps}>
-  <slot />
-</Link>

src/Profile.svelte

@@ -215,7 +215,7 @@
         {#if utils.isAddressEqual(profile.address, profile.org.address)}
           <div class="overflow-text">
             {#if profile.name && profile.ens}
-              <a href={`/registrations/${profile.ens.name}`} class="link">
+              <a href={`/registrations/${profile.ens.name}`} class="txt-link">
                 {profile.name}
               </a>
             {:else}
@@ -227,7 +227,7 @@
         <!-- User Profile -->
         <div>
           {#if profile.name && profile.ens}
-            <a href={`/registrations/${profile.ens.name}`} class="link">
+            <a href={`/registrations/${profile.ens.name}`} class="txt-link">
               {profile.name}
             </a>
           {:else}

src/SeedAddress.svelte

@@ -35,14 +35,14 @@
     <span class="seed-icon">{seed.emoji}</span>
     {#if full}
       <span>
-        <a href="/seeds/{formatSeedHost(seed.host)}" class="link">
+        <a href="/seeds/{formatSeedHost(seed.host)}" class="txt-link">
           {formatSeedId(seed.id)}@{seed.host}
         </a>
       </span>
       <span class="txt-faded">:{port}</span>
     {:else}
       <span>
-        <a href="/seeds/{formatSeedHost(seed.host)}" class="link">
+        <a href="/seeds/{formatSeedHost(seed.host)}" class="txt-link">
           {formatSeedHost(seed.host)}
         </a>
       </span>

src/base/faucet/Index.svelte

@@ -132,7 +132,9 @@
       please
       <br />
       check
-      <a class="link" href="https://docs.radicle.xyz/get-involved/obtain-rad">
+      <a
+        href="https://docs.radicle.xyz/get-involved/obtain-rad"
+        class="txt-link">
         popular exchanges
       </a>
       &#8203;.

src/base/projects/ProjectMeta.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { link } from "svelte-routing";
   import Avatar from "@app/Avatar.svelte";
   import Clipboard from "@app/Clipboard.svelte";
-  import { Link } from "svelte-routing";
   import { formatSeedId } from "@app/utils";
   import { type PeerId, type Project, ProjectContent } from "@app/project";
 
@@ -45,6 +45,9 @@
     width: 2rem;
     height: 2rem;
   }
+  .project-name:hover {
+    color: inherit;
+  }
   .urn {
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
@@ -93,7 +96,7 @@
       <span class="divider">/</span>
     {/if}
     <span class="truncate">
-      <Link to={rootPath()}>{project.name}</Link>
+      <a use:link class="project-name" href={rootPath()}>{project.name}</a>
     </span>
     {#if peer}
       <span class="peer-id">

src/base/registrations/View.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { navigate } from "svelte-routing";
+  import { link, navigate } from "svelte-routing";
   import type { Config } from "@app/config";
   import type { ethers } from "ethers";
   import { session } from "@app/session";
   import Loading from "@app/Loading.svelte";
-  import Link from "@app/Link.svelte";
   import Modal from "@app/Modal.svelte";
   import Form from "@app/Form.svelte";
   import type { Field } from "@app/Form.svelte";
@@ -205,6 +204,14 @@
     justify-content: left;
     margin-bottom: 2rem;
   }
+  .register {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary-5);
+  }
+  .register:hover {
+    color: var(--color-primary-5);
+    border-bottom-color: var(--color-primary-5);
+  }
   main > header > * {
     margin: 0 1rem 0 0;
   }
@@ -244,7 +251,12 @@
     </span>
 
     <span slot="actions">
-      <Link to={`/registrations/${domain}/form`} primary>Register &rarr;</Link>
+      <a
+        use:link
+        href={`/registrations/${domain}/form`}
+        class="txt-link register">
+        Register &rarr;
+      </a>
     </span>
   </Modal>
 {:else if state.status === Status.Found}