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}} + /> +