diff --git a/packages/ui/src/components/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay.tsx index 5f5c05f9..26c6d323 100644 --- a/packages/ui/src/components/AccountDisplay.tsx +++ b/packages/ui/src/components/AccountDisplay.tsx @@ -114,10 +114,16 @@ const AccountDisplay = ({ ) } -const NameWrapperStyled = styled('div')` - display: flex; - align-items: center; +const BoxStyled = styled(Box)` min-width: 0; + margin-left: 0.5rem; + display: grid !important; + justify-content: start; + justify-items: start; +` + +const NameWrapperStyled = styled('div')` + display: grid; ` const AddressStyled = styled('div')( @@ -128,19 +134,14 @@ const AddressStyled = styled('div')( ` ) -const BoxStyled = styled(Box)` - min-width: 0; - margin-left: 0.5rem; -` - const NameStyled = styled('div')` color: ${({ theme }) => theme.custom.text.primary}; font-size: 1rem; font-weight: 500; - white-space: nowrap; + min-width: 0; overflow: hidden; text-overflow: ellipsis; - min-width: 0; + white-space: nowrap; ` const BalanceStyled = styled('div')( diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx index a6d25b38..305841b5 100644 --- a/packages/ui/src/components/Transactions/Transaction.tsx +++ b/packages/ui/src/components/Transactions/Transaction.tsx @@ -114,7 +114,7 @@ export default styled(Transaction)( display: flex; flex-direction: column; margin-bottom: 1rem; - padding: 0.5rem; + @media (min-width: ${theme.breakpoints.values.sm}px) { flex-direction: row; @@ -138,14 +138,20 @@ export default styled(Transaction)( // FIXME this is duplicated .badge > .MuiBadge-badge { + max-height: 1.3125rem; left: 29px; top: 19px; - border-radius: 0 50px 50px 50px; + border-radius: 0.9375rem; + padding: 0.25rem 0.5rem; + max-width: 2.625rem; + font-size: 0.625rem; + font-weight: 500; + border: 1px solid ${theme.custom.gray[400]}; } .badge.red > .MuiBadge-badge { - box-shadow: ${theme.custom.boxShadow}; - background-color: ${theme.custom.identity.red}; + background-color: ${theme.custom.proxyBadge.multi}; + color: ${theme.custom.text.black}; } ` )