From 89ea5f904f85f3bf6712eec193f46448dbc90698 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 25 Mar 2024 12:18:23 +0100
Subject: [PATCH] Change ScopePolicy and httpd tooltip from hover to clickable
 tooltip

---
 src/views/home/Index.svelte                   | 16 ++++++++------
 .../home/components/HomepageSection.svelte    |  2 +-
 src/views/nodes/ScopePolicyPopover.svelte     | 21 ++++++++++---------
 src/views/nodes/View.svelte                   | 10 ++-------
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/views/home/Index.svelte b/src/views/home/Index.svelte
index 686a7ed45..9f59bd526 100644
--- a/src/views/home/Index.svelte
+++ b/src/views/home/Index.svelte
@@ -19,14 +19,15 @@
   import AppLayout from "@app/App/AppLayout.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
 
+  import Command from "@app/components/Command.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import FilterButton from "./components/FilterButton.svelte";
   import HomepageSection from "./components/HomepageSection.svelte";
-  import HoverPopover from "@app/components/HoverPopover.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import NewProjectButton from "./components/NewProjectButton.svelte";
+  import Popover from "@app/components/Popover.svelte";
   import PreferredSeedDropdown from "./components/PreferredSeedDropdown.svelte";
-  import Command from "@app/components/Command.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
 
   const selectedSeed = deduplicateStore(
     derived(preferredSeeds, $ => $?.selected),
@@ -208,12 +209,15 @@
         Pinned projects on your selected seed node
         {#if !nodeId}
           <div class="global-hide-on-mobile">
-            <HoverPopover stylePopoverPositionTop="0.5rem">
-              <div slot="toggle">
+            <Popover
+              popoverPositionTop="1.5rem"
+              popoverPositionLeft="0"
+              popoverPositionRight="-15rem">
+              <IconButton slot="toggle" let:toggle on:click={toggle}>
                 <span style:color="var(--color-fill-gray)">
                   <IconSmall name="info" />
                 </span>
-              </div>
+              </IconButton>
 
               <div slot="popover" class="popover txt-small">
                 <div style:padding-bottom="0.5rem">
@@ -221,7 +225,7 @@
                 </div>
                 <Command command="radicle-httpd" />
               </div>
-            </HoverPopover>
+            </Popover>
           </div>
         {/if}
       </svelte:fragment>
diff --git a/src/views/home/components/HomepageSection.svelte b/src/views/home/components/HomepageSection.svelte
index f0ed93c6f..7ec477d84 100644
--- a/src/views/home/components/HomepageSection.svelte
+++ b/src/views/home/components/HomepageSection.svelte
@@ -23,7 +23,7 @@
 
   .subtitle {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.25rem;
     align-items: center;
     margin-top: 0.25rem;
     color: var(--color-foreground-dim);
diff --git a/src/views/nodes/ScopePolicyPopover.svelte b/src/views/nodes/ScopePolicyPopover.svelte
index 3e2d8164c..417baed25 100644
--- a/src/views/nodes/ScopePolicyPopover.svelte
+++ b/src/views/nodes/ScopePolicyPopover.svelte
@@ -3,14 +3,15 @@
 
   import capitalize from "lodash/capitalize";
 
-  import HoverPopover from "@app/components/HoverPopover.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
+  import Popover from "@app/components/Popover.svelte";
 
   export let policy: Policy;
   export let scope: Scope;
-  export let stylePopoverPositionRight: string | undefined = undefined;
-  export let stylePopoverPositionLeft: string | undefined = undefined;
+  export let popoverPositionRight: string | undefined = undefined;
+  export let popoverPositionLeft: string | undefined = undefined;
 </script>
 
 <style>
@@ -43,19 +44,19 @@
     <span class="txt-semibold">{capitalize(scope)}</span>
   </span>
   <span style:color="var(--color-fill-gray)">
-    <HoverPopover
-      {stylePopoverPositionRight}
-      {stylePopoverPositionLeft}
-      stylePopoverPositionBottom="1.5rem">
-      <div slot="toggle">
+    <Popover
+      {popoverPositionRight}
+      {popoverPositionLeft}
+      popoverPositionBottom="1.5rem">
+      <IconButton slot="toggle" let:toggle on:click={toggle}>
         <span style:color="var(--color-fill-gray)">
           <IconSmall name="info" />
         </span>
-      </div>
+      </IconButton>
 
       <div slot="popover" class="popover">
         <ScopePolicyExplainer {scope} {policy} />
       </div>
-    </HoverPopover>
+    </Popover>
   </span>
 </div>
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
index 85d75ed4e..830e83958 100644
--- a/src/views/nodes/View.svelte
+++ b/src/views/nodes/View.svelte
@@ -150,19 +150,13 @@
         </div>
         <div class="global-hide-on-mobile" style:margin-left="auto">
           {#if policy && scope}
-            <ScopePolicyPopover
-              {scope}
-              {policy}
-              stylePopoverPositionRight="-1rem" />
+            <ScopePolicyPopover {scope} {policy} popoverPositionRight="0" />
           {/if}
         </div>
       </div>
       <div class="subtitle global-hide-on-desktop">
         {#if policy && scope}
-          <ScopePolicyPopover
-            {scope}
-            {policy}
-            stylePopoverPositionLeft="-14rem" />
+          <ScopePolicyPopover {scope} {policy} popoverPositionLeft="-5.5rem" />
         {/if}
       </div>