diff --git a/cypress/e2e/project.spec.ts b/cypress/e2e/project.spec.ts index 0c450322c..79ffa50b2 100644 --- a/cypress/e2e/project.spec.ts +++ b/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(); }); diff --git a/public/index.css b/public/index.css index ccb8b9534..e95d31a9f 100644 --- a/public/index.css +++ b/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; diff --git a/src/Address.svelte b/src/Address.svelte index fd652bc3e..e93c51f8a 100644 --- a/src/Address.svelte +++ b/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; + }
@@ -74,18 +76,26 @@ {/if} {/if} - {#if addressType === AddressType.Org} - {addressLabel} - org - {:else if addressType === AddressType.Safe} - {addressLabel} - safe - {:else if addressType === AddressType.Contract} - {addressLabel} - contract - {:else if addressType === AddressType.EOA} - {addressLabel} - {:else} - {addressLabel} - {/if} +
+ {#if addressType === AddressType.Org} + {addressLabel} + {#if !noBadge} + org + {/if} + {:else if addressType === AddressType.Safe} + {addressLabel} + {#if !noBadge} + safe + {/if} + {:else if addressType === AddressType.Contract} + {addressLabel} + {#if !noBadge} + contract + {/if} + {:else if addressType === AddressType.EOA} + {addressLabel} + {:else} + {addressLabel} + {/if} +
diff --git a/src/Badge.svelte b/src/Badge.svelte new file mode 100644 index 000000000..2220d318a --- /dev/null +++ b/src/Badge.svelte @@ -0,0 +1,41 @@ + + + + + + + diff --git a/src/Dropdown.svelte b/src/Dropdown.svelte index dd59dabfc..266e12b61 100644 --- a/src/Dropdown.svelte +++ b/src/Dropdown.svelte @@ -1,5 +1,6 @@ - - - -
- -
diff --git a/src/Profile.svelte b/src/Profile.svelte index fda6485d5..68f4c5015 100644 --- a/src/Profile.svelte +++ b/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)} {#if profile.name && profile.org} - org + org {/if}
diff --git a/src/base/profiles/AnchorActions.svelte b/src/base/profiles/AnchorActions.svelte index 03ec73d21..b9baec6cf 100644 --- a/src/base/profiles/AnchorActions.svelte +++ b/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 @@ {:else if isSigned} - ✓ signed + ✓ signed {:else}
- + {#if commit.context.committer} +
+ +
+ {/if} {formatCommit(commit.header.sha1)}
browseCommit(commit.header.sha1)}> diff --git a/src/base/projects/Commit/CommitVerifiedBadge.svelte b/src/base/projects/Commit/CommitVerifiedBadge.svelte index 9fd9231e0..468038dea 100644 --- a/src/base/projects/Commit/CommitVerifiedBadge.svelte +++ b/src/base/projects/Commit/CommitVerifiedBadge.svelte @@ -1,69 +1,67 @@ -{#if commit.context.committer} - - Verified -
- -
-
- ✔ -
-
- This commit was signed - with the committer's radicle key.
+ {hover = true;}} + on:mouseleave={() => {hover = false;}}> + Verified + + +{#if hover} +
+
+
+
✔
+
+ This commit was signed + with the committer's radicle key.
-
- -
- {commit.context.committer?.peer.id} +
+
+ + {#if commit.context.committer} +
+ {commit.context.committer.peer.id}
-
- + {/if} +
- +
{/if} diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte index 61728c62e..0ec142672 100644 --- a/src/base/projects/PeerSelector.svelte +++ b/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)} {#if meta.delegate} - delegate + delegate {/if} {:else if peer}