fix: utxo protection dropdown

leather-io · Dec 25, 2024 · 062eede · 062eede
1 parent 6b2ccb6
commit 062eede
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 import { type Inscription } from '@leather.io/models';
 import {
@@ -136,22 +136,36 @@ export function Inscription({ inscription }: InscriptionProps) {
                 _focus={{ outline: 'focus' }}
                 _hover={{ bg: 'ink.component-background-hover' }}
                 bg="ink.background-primary"
+                border="1px solid"
+                borderColor="ink.text-primary"
+                borderRadius="2px"
                 transform="rotate(90deg)"
                 color="ink.action-primary-default"
-                icon={<EllipsisVIcon variant="small" />}
+                icon={<EllipsisVIcon />}
               />
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content side="bottom">
+            <DropdownMenu.Content
+              align="end"
+              side="bottom"
+              sideOffset={4}
+              style={{ padding: '8px' }}
+            >
               <DropdownMenu.Item onClick={() => openInscriptionUrl(inscription.number)}>
-                <Flag img={<ExternalLinkIcon variant="small" />}>Open original</Flag>
+                <Flag img={<ExternalLinkIcon />}>
+                  <styled.span textStyle="label.02">Open original</styled.span>
+                </Flag>
               </DropdownMenu.Item>
               {hasInscriptionBeenDiscarded(inscription) ? (
                 <DropdownMenu.Item onClick={() => recoverInscription(inscription)}>
-                  <Flag img={<LockIcon variant="small" />}>Protect</Flag>
+                  <Flag img={<LockIcon />}>
+                    <styled.span textStyle="label.02">Protect</styled.span>
+                  </Flag>
                 </DropdownMenu.Item>
               ) : (
                 <DropdownMenu.Item onClick={() => discardInscription(inscription)}>
-                  <Flag img={<UnlockIcon variant="small" />}>Unprotect</Flag>
+                  <Flag img={<UnlockIcon />}>
+                    <styled.span textStyle="label.02">Unprotect</styled.span>
+                  </Flag>
                 </DropdownMenu.Item>
               )}
             </DropdownMenu.Content>

diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
@@ -20,6 +20,9 @@ import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
 
 import { BasicTooltip } from '../tooltip/basic-tooltip';
 
+const availableBalanceTooltipLabel =
+  'Total balance minus outbound transfers, protected collectibles and uneconomical UTXOs.';
+
 interface AccountCardProps {
   name: string;
   availableBalance: string;
@@ -109,10 +112,7 @@ export function AccountCard({
             <styled.h2 textStyle="label.02" color="ink.text-subdued" mt="space.01">
               Available balance:
               <styled.span ml="space.01">
-                <BasicTooltip
-                  side={tooltipSide}
-                  label="Some funds may be unavailable to protect your collectible assets. Disable protection to access your remaining balance."
-                >
+                <BasicTooltip side={tooltipSide} label={availableBalanceTooltipLabel}>
                   <Flag
                     reverse
                     spacing="space.01"