Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › 3c3f4f42
Tweak NodeInfo button wording
Merged rudolfs opened 2 years ago

Sync -> Offline
Syncing -> Online

check check-visual check-unit-test check-httpd-api-unit-test check-e2e check-build

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

Activity Changes +41 -59
5 files changed +41 -59 90de4d53 → 4d259a94
modified src/App/Header.svelte
@@ -67,7 +67,7 @@
          let:toggle

          on:click={toggle}

          title={buttonTitle[$httpdStore.state]}
- 
          variant="naked-toggle-off">
+ 
          variant="naked-toggle">

          <IconSmall name="device" />

          Connect

        </Button>
modified src/App/Header/Authenticate.svelte
@@ -41,11 +41,7 @@


{#if $httpdStore.state === "authenticated"}

  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
- 
    <Button
- 
      slot="toggle"
- 
      let:toggle
- 
      on:click={toggle}
- 
      variant="naked-toggle-on">
+ 
    <Button slot="toggle" let:toggle on:click={toggle} variant="naked-toggle">

      <div class="peer-info">

        <div style:height="1.25rem" style:margin-right="0.5rem">

          <Avatar nodeId={$httpdStore.session.publicKey} />
@@ -72,11 +68,7 @@
  </Popover>

{:else}

  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
- 
    <Button
- 
      slot="toggle"
- 
      let:toggle
- 
      on:click={toggle}
- 
      variant="naked-toggle-off">
+ 
    <Button slot="toggle" let:toggle on:click={toggle} variant="naked-toggle">

      <IconSmall name="key" />

      Authenticate

    </Button>
modified src/App/Header/NodeInfo.svelte
@@ -1,7 +1,6 @@
<script lang="ts">

  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";
@@ -18,32 +17,29 @@
</style>



<Popover popoverPositionTop="3rem" popoverPositionRight="0">
- 
  <Button
- 
    slot="toggle"
- 
    let:toggle
- 
    on:click={toggle}
- 
    variant={running ? "naked-toggle-on" : "naked-toggle-off"}>
- 
    <IconSmall name="broadcasting" />
+ 
  <Button slot="toggle" let:toggle on:click={toggle} variant={"naked-toggle"}>

    {#if running}
- 
      Syncing
+ 
      <IconSmall name="online" />
+ 
      Online

    {:else}
- 
      Sync
+ 
      <IconSmall name="offline" />
+ 
      Offline

    {/if}

  </Button>



  <div slot="popover" style:width="18rem">

    {#if running}

      <div class="label">
- 
        Use the
- 
        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
- 
        to stop your node.
+ 
        Your node is running and syncing with the network.
+ 
      </div>
+ 
      <div class="label">
+ 
        Shut down your node if you want to stop sharing and receiving updates.

      </div>

      <Command command="rad node stop" fullWidth />

    {:else}
+ 
      <div class="label">Your node is not running.</div>

      <div class="label">
- 
        Use the
- 
        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
- 
        to start your node.
+ 
        Start your node to seed, clone or share your changes.

      </div>

      <Command command="rad node start" fullWidth />

    {/if}
modified src/components/Button.svelte
@@ -16,8 +16,7 @@
    | "secondary-toggle-on"

    | "secondary-mobile"

    | "secondary-mobile-toggle"
- 
    | "naked-toggle-off"
- 
    | "naked-toggle-on"
+ 
    | "naked-toggle"

    | "tab"

    | "tab-active" = "gray";

  export let size: "small" | "regular" | "large" = "regular";
@@ -224,34 +223,20 @@
    border: 1px solid var(--color-border-focus);

  }
- 
  .naked-toggle-off {
+ 
  .naked-toggle {

    background-color: transparent;

    color: var(--color-foreground-contrast);

    border: 1px solid transparent;

  }
- 
  .naked-toggle-off[disabled] {
+ 
  .naked-toggle[disabled] {

    background-color: transparent;

    color: var(--color-fill-gray);

  }
- 
  .naked-toggle-off:not([disabled]):hover {
+ 
  .naked-toggle:not([disabled]):hover {

    background-color: transparent;

    border: 1px solid var(--color-fill-secondary);

  }
- 
  .naked-toggle-on {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-emphasized);
- 
    border: 1px solid transparent;
- 
  }
- 
  .naked-toggle-on[disabled] {
- 
    background-color: transparent;
- 
    color: var(--color-fill-gray);
- 
  }
- 
  .naked-toggle-on:not([disabled]):hover {
- 
    background-color: transparent;
- 
    border: 1px solid var(--color-border-focus);
- 
  }
- 


  .secondary {

    color: var(--color-foreground-match-background);

    background-color: var(--color-fill-secondary);
@@ -364,8 +349,7 @@
  class:primary-toggle-on={variant === "primary-toggle-on"}

  class:secondary-toggle-off={variant === "secondary-toggle-off"}

  class:secondary-toggle-on={variant === "secondary-toggle-on"}
- 
  class:naked-toggle-off={variant === "naked-toggle-off"}
- 
  class:naked-toggle-on={variant === "naked-toggle-on"}
+ 
  class:naked-toggle={variant === "naked-toggle"}

  class:secondary={variant === "secondary"}

  class:secondary-mobile={variant === "secondary-mobile"}

  class:secondary-mobile-toggle={variant === "secondary-mobile-toggle"}
modified src/components/IconSmall.svelte
@@ -8,7 +8,6 @@
    | "arrow-reply"

    | "badge"

    | "branch"
- 
    | "broadcasting"

    | "brush"

    | "chat"

    | "checkbox-checked"
@@ -48,6 +47,8 @@
    | "menu"

    | "more"

    | "network"
+ 
    | "offline"
+ 
    | "online"

    | "patch"

    | "plus"

    | "settings"
@@ -134,17 +135,6 @@
      fill-rule="evenodd"

      clip-rule="evenodd"

      d="M8.83331 3.58333L8.83331 2.25L9.83331 2.25L9.83331 3.58333C9.83331 3.85948 9.60946 4.08333 9.33331 4.08333C9.05717 4.08333 8.83331 3.85948 8.83331 3.58333Z" />
- 
  {:else if name === "broadcasting"}
- 
    <path
- 
      d="M4.51041 2.85355C4.70567 2.65829 4.70567 2.34171 4.51041 2.14645C4.31515 1.95118 3.99856 1.95118 3.8033 2.14645C1.3989 4.55085 1.3989 8.44916 3.8033 10.8536C3.99856 11.0488 4.31515 11.0488 4.51041 10.8536C4.70567 10.6583 4.70567 10.3417 4.51041 10.1465C2.49653 8.13258 2.49653 4.86743 4.51041 2.85355Z" />
- 
    <path
- 
      d="M12.5104 2.14645C12.3152 1.95118 11.9986 1.95118 11.8033 2.14645C11.608 2.34171 11.608 2.65829 11.8033 2.85355C13.8172 4.86743 13.8172 8.13258 11.8033 10.1465C11.608 10.3417 11.608 10.6583 11.8033 10.8536C11.9986 11.0488 12.3152 11.0488 12.5104 10.8536C14.9148 8.44916 14.9148 4.55085 12.5104 2.14645Z" />
- 
    <path
- 
      d="M6.01041 4.35355C6.20567 4.15829 6.20567 3.84171 6.01041 3.64645C5.81515 3.45118 5.49856 3.45118 5.3033 3.64645C3.72733 5.22242 3.72733 7.77758 5.3033 9.35356C5.49856 9.54882 5.81515 9.54882 6.01041 9.35356C6.20567 9.1583 6.20567 8.84171 6.01041 8.64645C4.82496 7.461 4.82496 5.539 6.01041 4.35355Z" />
- 
    <path
- 
      d="M11.0104 3.64645C10.8152 3.45118 10.4986 3.45118 10.3033 3.64645C10.108 3.84171 10.108 4.15829 10.3033 4.35355C11.4888 5.539 11.4888 7.461 10.3033 8.64645C10.108 8.84171 10.108 9.1583 10.3033 9.35356C10.4986 9.54882 10.8152 9.54882 11.0104 9.35356C12.5864 7.77758 12.5864 5.22242 11.0104 3.64645Z" />
- 
    <path
- 
      d="M8.92309 8.34797C9.64744 8.04729 10.1569 7.33314 10.1569 6.5C10.1569 5.39543 9.26143 4.5 8.15686 4.5C7.05229 4.5 6.15686 5.39543 6.15686 6.5C6.15686 7.33314 6.66629 8.0473 7.39065 8.34798L5.65202 14.4332C5.57759 14.6937 5.74329 14.9348 6.02212 14.9718C6.30095 15.0087 6.58732 14.8275 6.66175 14.567L8.15687 9.33407L9.65198 14.5669C9.7264 14.8274 10.0128 15.0087 10.2916 14.9717C10.5704 14.9348 10.7361 14.6936 10.6617 14.4331L8.92309 8.34797Z" />

  {:else if name === "chat"}

    <path

      fill-rule="evenodd"
@@ -455,6 +445,26 @@
      fill-rule="evenodd"

      clip-rule="evenodd"

      d="M6 4C6 4.55228 5.55228 5 5 5C4.44772 5 4 4.55228 4 4C4 3.44772 4.44772 3 5 3C5.55228 3 6 3.44772 6 4ZM7 4C7 4.9319 6.36264 5.71493 5.50006 5.93698V8.06302C5.8119 8.1433 6.0943 8.29688 6.32779 8.50432L9.13526 6.72449C9.04792 6.49985 9 6.25552 9 6C9 4.89543 9.89543 4 11 4C12.1046 4 13 4.89543 13 6C13 6.93192 12.3626 7.71497 11.5 7.93699V11.063C12.3626 11.285 13 12.0681 13 13C13 14.1046 12.1046 15 11 15C9.89543 15 9 14.1046 9 13C9 12.9239 9.00425 12.8489 9.01252 12.775L6.45484 11.3724C6.09018 11.7588 5.57325 12 5 12C3.89543 12 3 11.1046 3 10C3 9.06806 3.63742 8.28499 4.50006 8.06299V5.93701C3.63742 5.71501 3 4.93194 3 4C3 2.89543 3.89543 2 5 2C6.10457 2 7 2.89543 7 4ZM6.93782 10.4968L9.37527 11.8334C9.64466 11.4589 10.0404 11.1813 10.5 11.063V7.93699C10.2094 7.8622 9.94439 7.72374 9.72068 7.53738L6.88648 9.33415C6.96 9.54244 7 9.76655 7 10C7 10.1715 6.97842 10.3379 6.93782 10.4968ZM12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6ZM12 13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12C11.5523 12 12 12.4477 12 13ZM5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11Z" />
+ 
  {:else if name === "offline"}
+ 
    <path
+ 
      d="M2.21803 11.0448C2.05026 10.8255 2.09207 10.5117 2.31141 10.3439L2.97907 9.83324C1.44084 7.44877 1.71567 4.23437 3.80358 2.14646C3.99884 1.9512 4.31542 1.9512 4.51068 2.14646C4.70595 2.34172 4.70595 2.65831 4.51068 2.85357C2.78185 4.5824 2.53715 7.23336 3.77659 9.22323L4.67273 8.53778C3.76723 6.99185 3.97751 4.97253 5.30358 3.64646C5.49884 3.4512 5.81542 3.4512 6.01068 3.64646C6.20595 3.84172 6.20595 4.15831 6.01068 4.35357C5.04408 5.32017 4.86563 6.77647 5.47534 7.92388L6.31548 7.28127C6.21353 7.04126 6.15714 6.77722 6.15714 6.50002C6.15714 5.39545 7.05257 4.50002 8.15714 4.50002C8.62359 4.50002 9.05275 4.6597 9.39292 4.92739L10.2416 4.27825C10.1111 4.08389 10.1318 3.81823 10.3036 3.64646C10.4988 3.4512 10.8154 3.4512 11.0107 3.64646L11.0352 3.67121L11.9313 2.98583C11.8897 2.94117 11.8471 2.89708 11.8036 2.85357C11.6083 2.65831 11.6083 2.34172 11.8036 2.14646C11.9988 1.9512 12.3154 1.9512 12.5107 2.14646C12.5857 2.2215 12.6584 2.29799 12.7288 2.37585L13.2686 1.96297C13.4879 1.7952 13.8017 1.83701 13.9695 2.05634C14.1372 2.27568 14.0954 2.58949 13.8761 2.75726L13.337 3.1696C13.3384 3.1717 13.3397 3.17379 13.3411 3.17589C13.316 3.18898 13.2918 3.20438 13.2686 3.22213L12.5395 3.77976C12.5395 3.77972 12.5395 3.7798 12.5395 3.77976L11.6432 4.46515C11.6432 4.46511 11.6433 4.46519 11.6432 4.46515L10.8406 5.07926C10.8405 5.07922 10.8406 5.0793 10.8406 5.07926L10.0001 5.72193C10.0001 5.72188 10.0002 5.72197 10.0001 5.72193L6.92416 8.07486C6.92412 8.07483 6.9242 8.07488 6.92416 8.07486L6.07453 8.72456C6.0745 8.72452 6.07455 8.7246 6.07453 8.72456L4.38525 10.0167C4.38522 10.0166 4.38528 10.0167 4.38525 10.0167L3.58782 10.6268C3.58779 10.6267 3.58785 10.6268 3.58782 10.6268L2.91894 11.1382C2.69961 11.306 2.3858 11.2642 2.21803 11.0448Z" />
+ 
    <path
+ 
      d="M7.16102 9.15268L5.6523 14.4332C5.57787 14.6937 5.74357 14.9348 6.0224 14.9718C6.30122 15.0087 6.58759 14.8275 6.66202 14.567L8.15714 9.33408L9.65225 14.567C9.72668 14.8275 10.013 15.0087 10.2919 14.9717C10.5707 14.9348 10.7364 14.6936 10.662 14.4331L8.92336 8.34799C9.53166 8.09548 9.98839 7.55137 10.1191 6.89007L7.16102 9.15268Z" />
+ 
    <path
+ 
      d="M11.165 6.09007C11.288 6.99718 11.0008 7.94923 10.3036 8.64647C10.1083 8.84173 10.1083 9.15831 10.3036 9.35358C10.4988 9.54884 10.8154 9.54884 11.0107 9.35358C12.0769 8.28735 12.4218 6.77293 12.0453 5.41676L11.165 6.09007Z" />
+ 
    <path
+ 
      d="M12.9891 4.69489C13.6727 6.52825 13.2775 8.6725 11.8036 10.1465C11.6083 10.3417 11.6083 10.6583 11.8036 10.8536C11.9988 11.0488 12.3154 11.0488 12.5107 10.8536C14.3462 9.01802 14.7805 6.31182 13.8135 4.0643L12.9891 4.69489Z" />
+ 
  {:else if name === "online"}
+ 
    <path
+ 
      d="M4.51041 2.85355C4.70567 2.65829 4.70567 2.34171 4.51041 2.14645C4.31515 1.95118 3.99856 1.95118 3.8033 2.14645C1.3989 4.55085 1.3989 8.44916 3.8033 10.8536C3.99856 11.0488 4.31515 11.0488 4.51041 10.8536C4.70567 10.6583 4.70567 10.3417 4.51041 10.1465C2.49653 8.13258 2.49653 4.86743 4.51041 2.85355Z" />
+ 
    <path
+ 
      d="M12.5104 2.14645C12.3152 1.95118 11.9986 1.95118 11.8033 2.14645C11.608 2.34171 11.608 2.65829 11.8033 2.85355C13.8172 4.86743 13.8172 8.13258 11.8033 10.1465C11.608 10.3417 11.608 10.6583 11.8033 10.8536C11.9986 11.0488 12.3152 11.0488 12.5104 10.8536C14.9148 8.44916 14.9148 4.55085 12.5104 2.14645Z" />
+ 
    <path
+ 
      d="M6.01041 4.35355C6.20567 4.15829 6.20567 3.84171 6.01041 3.64645C5.81515 3.45118 5.49856 3.45118 5.3033 3.64645C3.72733 5.22242 3.72733 7.77758 5.3033 9.35356C5.49856 9.54882 5.81515 9.54882 6.01041 9.35356C6.20567 9.1583 6.20567 8.84171 6.01041 8.64645C4.82496 7.461 4.82496 5.539 6.01041 4.35355Z" />
+ 
    <path
+ 
      d="M11.0104 3.64645C10.8152 3.45118 10.4986 3.45118 10.3033 3.64645C10.108 3.84171 10.108 4.15829 10.3033 4.35355C11.4888 5.539 11.4888 7.461 10.3033 8.64645C10.108 8.84171 10.108 9.1583 10.3033 9.35356C10.4986 9.54882 10.8152 9.54882 11.0104 9.35356C12.5864 7.77758 12.5864 5.22242 11.0104 3.64645Z" />
+ 
    <path
+ 
      d="M8.92309 8.34797C9.64744 8.04729 10.1569 7.33314 10.1569 6.5C10.1569 5.39543 9.26143 4.5 8.15686 4.5C7.05229 4.5 6.15686 5.39543 6.15686 6.5C6.15686 7.33314 6.66629 8.0473 7.39065 8.34798L5.65202 14.4332C5.57759 14.6937 5.74329 14.9348 6.02212 14.9718C6.30095 15.0087 6.58732 14.8275 6.66175 14.567L8.15687 9.33407L9.65198 14.5669C9.7264 14.8274 10.0128 15.0087 10.2916 14.9717C10.5704 14.9348 10.7361 14.6936 10.6617 14.4331L8.92309 8.34797Z" />

  {:else if name === "patch"}

    <path

      fill-rule="evenodd"