Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract all external link styling into a component
Rūdolfs Ošiņš committed 2 years ago
commit c7027c1f2f603cc79bdf12f678ba9386985957c6
parent 2bd18935045c3709a69340080c384d0ec15fb161
8 files changed +61 -33
modified 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;
modified 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" />
modified 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
added 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>
modified 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>
modified 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">
modified 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} />
modified 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 />