refactor: ProposalStatusInfo+InformationTooltip (#1949)

packages/desktop/components/ProposalCard.svelte

@@ -2,7 +2,7 @@
     import { onMount } from 'svelte'
     import { EventStatus } from '@iota/sdk/out/types'
 
-    import { ProposalStatusInfo } from '@components'
+    import { ProposalStatusInfo } from '@views/governance'
     import { Text } from '@ui'
     import { FontWeight } from '@ui/enums'
     import { TooltipIcon, IconName } from '@bloomwalletio/ui'

packages/desktop/components/index.ts

@@ -21,7 +21,6 @@ export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.svelte'
-export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
 export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
 export { default as SidebarTab } from './SidebarTab.svelte'
 export { default as StatusTile, type StatusTileProps } from './StatusTile.svelte'

packages/desktop/components/ProposalStatusInfo.svelte → packages/desktop/views/governance/components/ProposalStatusInfo.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
     import { ProposalStatusTimelineTooltip } from '@components'
     import { InformationTooltip, ProposalStatusPill } from '@ui'
-    import { Position } from '@ui/enums'
 
     import { IProposal } from '@contexts/governance/interfaces'
     import { localize } from '@core/i18n'
     import { ProposalError } from '@lib/contexts/governance'
 
     export let proposal: IProposal
-    export let position: Position = Position.Right
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
     let anchor: HTMLElement
     let isTooltipVisible = false
@@ -51,14 +50,14 @@
     {#if proposal?.error}
         {@const { title, body } = getProposalErrorText(proposal)}
         {#if title && body}
-            <InformationTooltip {anchor} {position} {title} {body} />
+            <InformationTooltip {anchor} {placement} {title} {body} />
         {/if}
     {:else}
         <ProposalStatusTimelineTooltip
             bind:anchor
             milestones={proposal.milestones}
             status={proposal?.status}
-            {position}
+            position={placement}
         />
     {/if}
 {/if}

packages/desktop/views/governance/components/index.ts

@@ -0,0 +1 @@
+export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'

packages/desktop/views/governance/index.ts

@@ -0,0 +1 @@
+export * from './components'

packages/shared/src/components/InformationTooltip.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
-    import { Text, Tooltip } from '@ui'
-    import { TextType } from './enums'
+    import { Popover, Text, type TextColor } from '@bloomwalletio/ui'
 
     export let title: string = ''
     export let body: string = ''
+
+    export let titleColor: TextColor | undefined = undefined
+    export let bodyColor: TextColor | undefined = undefined
 </script>
 
-<Tooltip {...$$restProps}>
-    <div class="flex flex-col text-left space-y-2">
-        {#if title}
-            <Text type={TextType.h4} color={$$restProps?.titleColor ?? undefined}>
-                {title}
-            </Text>
-        {/if}
-        {#if body}
-            <Text type={TextType.p} color={$$restProps?.bodyColor ?? undefined}>
-                {body}
-            </Text>
-        {/if}
-    </div>
-</Tooltip>
+<Popover
+    showArrow
+    event="hover"
+    class="shadow-elevation-4 p-4 rounded-xl flex flex-col text-left space-y-2 max-w-[15rem]"
+    {...$$restProps}
+>
+    {#if title}
+        <Text type="h6" textColor={titleColor}>
+            {title}
+        </Text>
+    {/if}
+    {#if body}
+        <Text textColor={bodyColor} fontWeight="medium">
+            {body}
+        </Text>
+    {/if}
+</Popover>

packages/shared/src/components/atoms/MenuItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Icon, Text, Spinner, Position, InformationTooltip } from '@ui'
+    import { Icon, Text, Spinner, InformationTooltip } from '@ui'
     import { Icon as IconEnum } from '@auxiliary/icon'
 
     export let icon: string = ''
@@ -66,7 +66,7 @@
 </button>
 
 {#if showTooltip}
-    <InformationTooltip anchor={menuItem} position={Position.Right} body={tooltip} />
+    <InformationTooltip anchor={menuItem} body={tooltip} />
 {/if}
 
 <style lang="scss">

packages/shared/src/components/inputs/OptionalInput.svelte

@@ -2,7 +2,6 @@
     import { onMount } from 'svelte'
     import { fade } from 'svelte/transition'
     import { ClosableInput, AddInputButton, FontWeight, InformationTooltip } from '@ui'
-    import { Position } from '@ui/enums'
 
     export let label: string = ''
     export let description: string = ''
@@ -64,11 +63,10 @@
             <tooltip-container transition:fade={{ duration: 100 }}>
                 <InformationTooltip
                     anchor={buttonElement}
-                    position={Position.Right}
                     title={label}
-                    titleColor="gray-900"
+                    titleColor="primary"
                     body={description}
-                    bodyColor="gray-700"
+                    bodyColor="secondary"
                 />
             </tooltip-container>
         {/if}