dadd82d Improve CommitVerifiedBadge UX — radicle-explorer

modified cypress/e2e/project.spec.ts

@@ -220,7 +220,7 @@ describe("Project view", () => {

     // Checking that the initial commit has the Verified badge
     cy.get(".popup .header").should(
       "have.text",
       "✔ This commit was signed\n          with the committer's radicle key.",
       "✔ This commit was signed\n            with the committer's radicle key.",
     );
     cy.get(".popup .peer").should(
       "contain.text",

modified package-lock.json

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

         "ethers": "^5.7.0",
         "eventemitter3": "4.0.7",
         "events": "^3.3.0",
         "lodash": "^4.17.21",
         "lru-cache": "^7.13.2",
         "marked": "^4.0.12",
         "md5": "^2.3.0",

@@ -53,6 +54,7 @@

         "@tsconfig/svelte": "^1.0.13",
         "@types/connect-history-api-fallback": "^1.3.5",
         "@types/express-serve-static-core": "^4.17.30",
         "@types/lodash": "^4.14.184",
         "@types/sanitize-html": "^2.6.2",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
         "@typescript-eslint/parser": "^5.25.0",

@@ -3618,6 +3620,12 @@

       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
     "node_modules/@types/lodash": {
       "version": "4.14.184",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
       "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
       "dev": true
     },
     "node_modules/@types/marked": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.2.tgz",

@@ -8572,8 +8580,7 @@

     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",

@@ -14555,6 +14562,12 @@

       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
     "@types/lodash": {
       "version": "4.14.184",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
       "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
       "dev": true
     },
     "@types/marked": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.2.tgz",

@@ -18300,8 +18313,7 @@

     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",

modified package.json

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

     "@tsconfig/svelte": "^1.0.13",
     "@types/connect-history-api-fallback": "^1.3.5",
     "@types/express-serve-static-core": "^4.17.30",
     "@types/lodash": "^4.14.184",
     "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",

@@ -62,6 +63,7 @@

     "ethers": "^5.7.0",
     "eventemitter3": "4.0.7",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
     "lru-cache": "^7.13.2",
     "marked": "^4.0.12",
     "md5": "^2.3.0",

modified src/base/projects/Commit.svelte

@@ -2,10 +2,10 @@

   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";
   import CommitVerifiedBadge from "@app/base/projects/Commit/CommitVerifiedBadge.svelte";
   export let project: proj.Project;
   export let commit: Commit;

@@ -70,7 +70,7 @@

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

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

@@ -1,14 +1,25 @@

 <script lang="ts">
   import type { CommitMetadata } from "@app/commit";
   import CommitAuthorship from "./CommitAuthorship.svelte";
   import { debounce } from "lodash";
   import Badge from "@app/Badge.svelte";
   import CommitAuthorship from "./CommitAuthorship.svelte";
   export let commit: CommitMetadata;
   let hover = false;
   let visible = false;
   const showDelay = 50; // ms
   const setVisible = debounce((value: boolean) => {
     visible = value;
   }, showDelay);
 </script>
 <style>
   .container {
     cursor: default;
   }
   .wrapper {
     position: absolute;
   }

@@ -18,7 +29,7 @@

     box-shadow: 16px 16px 32px 32px var(--color-shadow);
     color: var(--color-foreground);
     font-size: 0.75rem;
     left: -1rem;
     left: -10rem;
     margin-top: 0.5rem;
     padding: 0.5rem 0;
     position: absolute;

@@ -43,35 +54,32 @@

   }
 </style>
 <Badge
   variant="tertiary"
   on:mouseenter={() => {
     hover = true;
   }}
   on:mouseleave={() => {
     hover = false;
   }}>
   Verified
 </Badge>
 <div
   class="container"
   on:click|stopPropagation
   on:mouseenter={() => setVisible(true)}
   on:mouseleave={() => setVisible(false)}>
   <Badge variant="tertiary">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>
       <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>
   {#if visible}
     <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>
         {/if}
         </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>
           {/if}
         </div>
       </div>
     </div>
   </div>
 {/if}
   {/if}
 </div>