diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx b/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx
index c91d8d8ee74..3e399c476ee 100644
--- a/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx
+++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Button, DropdownMenuItemProps, Row } from '@trezor/components';
import { StaticSessionId } from '@trezor/connect';
+import { spacings } from '@trezor/theme';
import type { TimerId } from '@trezor/type-utils';
import { addMetadata, init, setEditing } from 'src/actions/suite/metadataLabelingActions';
@@ -61,9 +62,7 @@ const LabelButton = styled(Button)`
`;
// eslint-disable-next-line local-rules/no-override-ds-component
-const ActionButton = styled(Button)<{ $isValueVisible?: boolean; $isVisible?: boolean }>`
- margin-left: ${({ $isValueVisible, $isVisible, isLoading }) =>
- $isValueVisible || !$isVisible || isLoading ? '12px' : '4px'};
+const ActionButton = styled(Button)<{ $isVisible?: boolean }>`
visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
`;
@@ -71,7 +70,6 @@ const ActionButton = styled(Button)<{ $isValueVisible?: boolean; $isVisible?: bo
// eslint-disable-next-line local-rules/no-override-ds-component
const SuccessButton = styled(Button)`
cursor: wait;
- margin-left: 12px;
width: auto;
background-color: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation0};
color: ${({ theme }) => theme.textPrimaryDefault};
@@ -282,6 +280,7 @@ export const MetadataLabeling = ({
onSubmit,
visible,
updateFlag,
+ withLeftMargin,
}: Props) => {
const metadata = useSelector(state => state.metadata);
const dispatch = useDispatch();
@@ -383,6 +382,7 @@ export const MetadataLabeling = ({
}, [payload.value]);
const labelContainerDataTest = `${dataTestBase}/hover-container`;
+ const margin = withLeftMargin ? { left: spacings.sm } : undefined;
// Should "add label"/"edit label" button be visible?
const showActionButton =
@@ -397,7 +397,7 @@ export const MetadataLabeling = ({
return (
{defaultVisibleValue}
-
+
@@ -436,7 +436,7 @@ export const MetadataLabeling = ({
isDisabled={actionButtonsDisabled}
$isVisible={isVisible}
size="tiny"
- $isValueVisible={!!payload.value}
+ margin={margin}
onClick={e => {
e.stopPropagation();
// By clicking on add label button, metadata.editing field is set
@@ -478,6 +478,7 @@ export const MetadataLabeling = ({
isDisabled={actionButtonsDisabled}
$isVisible={isVisible}
size="tiny"
+ margin={margin}
onClick={e => {
e.stopPropagation();
activateEdit();
@@ -495,6 +496,7 @@ export const MetadataLabeling = ({
data-testid={`${dataTestBase}/success`}
icon="check"
size="tiny"
+ margin={margin}
>
{l10nLabelling.edited}
diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts b/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts
index bd4e1db9069..1c3380039c0 100644
--- a/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts
+++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts
@@ -20,6 +20,7 @@ export interface Props {
visible?: boolean;
placeholder?: string;
updateFlag?: any;
+ withLeftMargin?: boolean;
}
export interface ExtendedProps extends Props {
diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx b/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx
index b9b3120e99f..0e024a4e82d 100644
--- a/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx
+++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx
@@ -9,7 +9,7 @@ import {
import styled, { useTheme } from 'styled-components';
-import { AutoScalingInput, Icon } from '@trezor/components';
+import { AutoScalingInput, Icon, Row } from '@trezor/components';
const IconWrapper = styled.div<{ $bgColor: string }>`
display: flex;
@@ -89,7 +89,7 @@ export const withEditable =
}, [value, touched]);
return (
- <>
+
- >
+
);
};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
index e58436c6cef..5875328c5f9 100644
--- a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
+++ b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
@@ -113,6 +113,7 @@ export const AccountDetails = ({ selectedAccount, isBalanceShown }: AccountDetai
theme.textSubdued};
overflow: hidden;
`;
@@ -42,7 +42,7 @@ const LabelPart = styled.div`
const DetailPartVisibleOnHover = styled.div<{ $alwaysVisible?: boolean }>`
display: flex;
align-items: center;
- gap: ${ROW_GAP};
+ gap: ${ROW_GAP}px;
color: ${({ theme }) => theme.textSubdued};
${({ $alwaysVisible }) =>
@@ -174,7 +174,7 @@ export const UtxoSelection = ({ transaction, utxo }: UtxoSelectionProps) => {
},
} = useSendFormContext();
// selecting metadata from store rather than send form context which does not update on metadata change
- const { outputLabels } = useSelector(selectLabelingDataForSelectedAccount);
+ const { addressLabels, outputLabels } = useSelector(selectLabelingDataForSelectedAccount);
const dispatch = useDispatch();
@@ -247,8 +247,18 @@ export const UtxoSelection = ({ transaction, utxo }: UtxoSelectionProps) => {
iconColor={utxoTagIconColor}
/>
)}
-
- {utxo.address}
+
+ {utxo.address}}
+ />
+