93b7b6b Extract global .badge class into a component — radicle-explorer

modified cypress/e2e/project.spec.ts

@@ -142,10 +142,11 @@ describe("Project view", () => {

         });
       });
     cy.get('.commit-teaser .badge').trigger('mouseenter');
     // Checking that the initial commit has the Verified badge
     cy.get(".verified-popup-body").should("have.text", "This commit was signed\n            with the committer's radicle key.");
     cy.get(".verified-popup-peer").should("have.text", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue");
     cy.get(".verified-popup .verified-committer").should("have.text", "dabit3");
     cy.get(".popup .header").should("have.text", "✔ This commit was signed\n          with the committer's radicle key.");
     cy.get(".popup .peer").should("contain.text", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue");
     cy.get(".popup .committer").should("contain.text", "dabit3");
     cy.get(".commit").last().click();
   });

modified public/index.css

@@ -366,34 +366,10 @@ label.input {

 .bold {
 	font-weight: bold !important;
 }
 .badge {
 	color: var(--color-foreground-faded);
 	background: var(--color-foreground-background);
 	border-radius: var(--border-radius);
 	padding: 0.125rem 0.5rem;
 	margin: 0 0.5rem;
 	font-size: 0.75rem;
 	line-height: 1.6;
 	height: var(--button-tiny-height);
 }
 .badge.primary {
 	color: var(--color-primary);
 	background: var(--color-primary-background);
 }
 .badge.tertiary {
 	color: var(--color-tertiary);
 	background: var(--color-tertiary-background);
 }
 .badge.safe {
 	color: var(--color-yellow);
 	background: var(--color-yellow-background);
 }
 .yellow {
 	color: var(--color-yellow);
 	background: var(--color-yellow-background-solid);
 }
 .off-centered {
 	height: 100%;
 	padding-top: 5rem;

modified src/Address.svelte

@@ -5,6 +5,7 @@

   import { safeLink, explorerLink, identifyAddress, formatAddress, AddressType, parseEnsLabel } from '@app/utils';
   import { Profile, ProfileType } from '@app/profile';
   import Avatar from "@app/Avatar.svelte";
   import Badge from "@app/Badge.svelte";
   import type { Config } from '@app/config';
   export let address: string;

@@ -47,9 +48,6 @@

     align-items: center;
     height: 100%;
   }
   .address.no-badge .badge {
     display: none;
   }
   .address a {
     color: var(--color-foreground-90);
   }

@@ -60,10 +58,14 @@

     color: var(--color-foreground-90);
     font-weight: bold;
   }
   .wrapper {
     gap: 0.5rem;
     display: flex;
     align-items: center;
   }
 </style>
 <div class="address" title={address}
   class:no-badge={noBadge}
   class:text-small={small}
   class:text-xsmall={xsmall}
   class:highlight>

@@ -74,18 +76,26 @@

       <Avatar inline source={address} title={address}/>
     {/if}
   {/if}
   {#if addressType === AddressType.Org}
     <a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
     <span class="badge">org</span>
   {:else if addressType === AddressType.Safe}
     <a href={safeLink(address, config)} target="_blank">{addressLabel}</a>
     <span class="badge safe">safe</span>
   {:else if addressType === AddressType.Contract}
     <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
     <span class="badge">contract</span>
   {:else if addressType === AddressType.EOA}
     <a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
   {:else} <!-- While we're waiting to find out what address type it is -->
     <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
   {/if}
   <div class="wrapper">
     {#if addressType === AddressType.Org}
       <a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
       {#if !noBadge}
         <Badge variant="foreground">org</Badge>
       {/if}
     {:else if addressType === AddressType.Safe}
       <a href={safeLink(address, config)} target="_blank">{addressLabel}</a>
       {#if !noBadge}
         <Badge variant="caution">safe</Badge>
       {/if}
     {:else if addressType === AddressType.Contract}
       <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
       {#if !noBadge}
         <Badge variant="foreground">contract</Badge>
       {/if}
     {:else if addressType === AddressType.EOA}
       <a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
     {:else} <!-- While we're waiting to find out what address type it is -->
       <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
     {/if}
   </div>
 </div>

added src/Badge.svelte

@@ -0,0 +1,41 @@

 <script lang="ts">
   export let variant: "foreground" | "caution" | "primary" | "tertiary";
 </script>
 <style>
   .badge {
     border-radius: var(--border-radius);
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
     line-height: 1.6;
     height: var(--button-tiny-height);
     display: flex;
   }
   .foreground {
     color: var(--color-foreground-faded);
     background: var(--color-foreground-background);
   }
   .primary {
     color: var(--color-primary);
     background: var(--color-primary-background);
   }
   .tertiary {
     color: var(--color-tertiary);
     background: var(--color-tertiary-background);
   }
   .caution {
     color: var(--color-yellow);
     background: var(--color-yellow-background);
   }
 </style>
 <span
   on:mouseenter
   on:mouseleave
   class="badge"
   class:foreground={variant === "foreground"}
   class:caution={variant === "caution"}
   class:primary={variant === "primary"}
   class:tertiary={variant === "tertiary"}>
   <slot />
 </span>

modified src/Dropdown.svelte

@@ -1,5 +1,6 @@

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import Badge from "@app/Badge.svelte";
   export let items: { key: string; title: string; value: string; badge: string | null }[];
   export let selected: string | null = null;

@@ -19,9 +20,6 @@

   .dropdown-item:hover, .selected {
     background-color: var(--color-foreground-background-lighter);
   }
   .dropdown .badge {
     margin: 0;
   }
   @media (max-width: 720px) {
     .dropdown {

@@ -36,7 +34,7 @@

     {#if key && value}
       <div class="dropdown-item" class:selected={value === selected} on:click={() => onSelect(value)} {title}>{@html key}
         {#if badge}
           <span class="badge primary">{badge}</span>
           <Badge variant="primary">{badge}</Badge>
         {/if}
       </div>
     {/if}

deleted src/Popup.svelte

@@ -1,16 +0,0 @@

 <script lang="ts"></script>
 <style>
   .popup {
     color: var(--color-foreground);
     width: 14rem;
     left: -1rem;
     z-index: 99;
   }
   @media (max-width: 720px) {}
 </style>
 <div class="popup">
   <slot />
 </div>

modified src/Profile.svelte

@@ -20,6 +20,7 @@

   import { MissingReverseRecord, NotFoundError } from '@app/error';
   import NotFound from '@app/NotFound.svelte';
   import RadicleUrn from '@app/RadicleUrn.svelte';
   import Badge from '@app/Badge.svelte';
   export let config: Config;
   export let addressOrName: string;

@@ -115,6 +116,7 @@

   .title {
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   .links {
     display: flex;

@@ -193,7 +195,7 @@

             {profile.name ? utils.formatName(profile.name, config) : utils.formatAddress(profile.address)}
           </span>
           {#if profile.name && profile.org}
             <span class="badge">org</span>
             <Badge variant="foreground">org</Badge>
           {/if}
         </span>
         <div class="links">

modified src/base/profiles/AnchorActions.svelte

@@ -7,6 +7,7 @@

   import Modal from "@app/Modal.svelte";
   import Avatar from "@app/Avatar.svelte";
   import { createEventDispatcher } from 'svelte';
   import Badge from "@app/Badge.svelte";
   export let safe: Safe;
   export let anchor: PendingAnchor;

@@ -129,7 +130,7 @@

   </button>
   <!-- Check whether or not we've signed this proposal -->
 {:else if isSigned}
   <span class="badge safe no-margin">✓ signed</span>
   <Badge variant="caution">✓ signed</Badge>
 {:else}
   <button on:click|stopPropagation={() => {
     action = Action.Sign;

modified src/base/projects/Commit.svelte

@@ -2,6 +2,7 @@

   import * as proj from "@app/project";
   import { formatCommit } from "@app/utils";
   import type { Commit } from "@app/commit";
   import Badge from "@app/Badge.svelte";
   import Changeset from "@app/base/projects/SourceBrowser/Changeset.svelte";
   import CommitAuthorship from "@app/base/projects/Commit/CommitAuthorship.svelte";

@@ -40,9 +41,6 @@

     color: var(--color-foreground-80);
     font-size: 0.875rem;
   }
   .badge {
     margin: 0;
   }
   .authorship {
     display: flex;
     align-items: center;

@@ -71,7 +69,7 @@

     <div class="authorship">
       <CommitAuthorship {commit} />
       {#if commit.context?.committer}
         <span class="badge tertiary">Verified</span>
         <Badge variant="tertiary">Verified</Badge>
       {/if}
     </div>
   </header>

modified src/base/projects/Commit/CommitTeaser.svelte

@@ -94,7 +94,11 @@

     <CommitAuthorship {commit} />
   </div>
   <div class="column-right">
     <CommitVerifiedBadge {commit} />
     {#if commit.context.committer}
       <div class="desktop">
         <CommitVerifiedBadge {commit} />
       </div>
     {/if}
     <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
     <div class="browse" title="View file" on:click|stopPropagation={() => browseCommit(commit.header.sha1)}>
       <Icon name="browse" />

modified src/base/projects/Commit/CommitVerifiedBadge.svelte

@@ -1,69 +1,67 @@

 <script lang="ts">
   import type { CommitMetadata } from "@app/commit";
   import Popup from "@app/Popup.svelte";
   import CommitAuthorship from "./CommitAuthorship.svelte";
   import Badge from "@app/Badge.svelte";
   export let commit: CommitMetadata;
   let hover = false;
 </script>
 <style>
   .badge {
     margin: 0;
   }
   .badge:hover .verified-popup {
     display: block;
   }
   .verified-popup {
     display: none;
   .wrapper {
     position: absolute;
   }
   .verified-popup-header {
   .popup {
     width: 14rem;
     left: -1rem;
     z-index: 99;
     color: var(--color-foreground);
     font-size: 0.75rem;
   }
   .header {
     display: flex;
     padding: 1rem 0.75rem;
     gap: 0.5rem;
   }
   .verified-popup-highlight {
   .highlight {
     color: var(--color-tertiary);
   }
   .verified-popup-committer {
   .committer {
     border-top: 1px dashed var(--color-foreground-subtle);
     padding: 0.75rem;
   }
   .verified-popup-checkmark {
     margin-right: 0.5rem;
   }
   .verified-popup-peer {
   .peer {
     padding-top: 0.5rem;
     word-break: break-all;
   }
   @media (max-width: 720px) {
     .badge {
       display: none !important;
     }
   }
 </style>
 {#if commit.context.committer}
   <span class="badge tertiary">
     Verified
     <div class="verified-popup">
       <Popup>
         <div class="verified-popup-header">
           <div class="verified-popup-checkmark verified-popup-highlight">
             ✔
           </div>
           <div class="verified-popup-body">
             This commit was <span class="verified-popup-highlight">signed</span>
             with the committer's radicle key.</div>
 <Badge
   variant="tertiary"
   on:mouseenter={() => {hover = true;}}
   on:mouseleave={() => {hover = false;}}>
   Verified
 </Badge>
 {#if hover}
   <div class="wrapper">
     <div class="popup">
       <div class="header">
         <div class="highlight">✔</div>
         <div>
           This commit was <span class="highlight">signed</span>
           with the committer's radicle key.
         </div>
         <div class="verified-popup-committer">
           <CommitAuthorship {commit} showAuthor={false} showTime={false} />
           <div class="verified-popup-peer">
             <span class="text-faded">{commit.context.committer?.peer.id}</span>
       </div>
       <div class="committer">
         <CommitAuthorship {commit} showAuthor={false} showTime={false} />
         {#if commit.context.committer}
           <div class="peer">
             <span class="text-faded">{commit.context.committer.peer.id}</span>
           </div>
         </div>
       </Popup>
         {/if}
       </div>
     </div>
   </span>
   </div>
 {/if}

modified src/base/projects/PeerSelector.svelte

@@ -5,6 +5,7 @@

   import { formatSeedId } from "@app/utils";
   import type { Peer } from "@app/project";
   import Floating from "@app/Floating.svelte";
   import Badge from "@app/Badge.svelte";
   export let peer: string | null = null;
   export let peers: Peer[];

@@ -52,9 +53,6 @@

   .selector .peer.not-allowed {
     cursor: not-allowed;
   }
   .selector .badge {
     margin: 0;
   }
   .peer-id {
     margin: 0 0.5rem;
   }

@@ -80,7 +78,7 @@

           {meta.person?.name ?? formatSeedId(meta.id)}
         </span>
         {#if meta.delegate}
           <span class="badge primary">delegate</span>
           <Badge variant="primary">delegate</Badge>
         {/if}
       <!-- If the delegate metadata is not found -->
       {:else if peer}