diff --git a/src/components/pages/profile/ProfileDetails.tsx b/src/components/pages/profile/ProfileDetails.tsx index f1da8de56..748162507 100644 --- a/src/components/pages/profile/ProfileDetails.tsx +++ b/src/components/pages/profile/ProfileDetails.tsx @@ -160,7 +160,7 @@ const ActionWrapper = styled.div<{ leading?: boolean fullMobileWidth?: boolean }>( - ({ leading, fullMobileWidth }) => css` + ({ leading, fullMobileWidth, theme }) => css` ${fullMobileWidth && css` width: 100%; diff --git a/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx b/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx index 9f492a9a8..e29386ab3 100644 --- a/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx +++ b/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx @@ -161,19 +161,21 @@ export const NameWrapper = ({ {t('tabs.more.token.status.wrapped')} {status === 'locked' ? ( - + ) : ( - + )} {isPCC ? ( <> - {t('tabs.more.token.pcc.not-controllable')} + {t('tabs.more.token.pcc.not-controllable')}{' '} + ) : ( <> - {t('tabs.more.token.pcc.controllable')} + {t('tabs.more.token.pcc.controllable')}{' '} + )} diff --git a/src/components/pages/profile/settings/PrimarySection.tsx b/src/components/pages/profile/settings/PrimarySection.tsx index 3e1f52368..8288fdfab 100644 --- a/src/components/pages/profile/settings/PrimarySection.tsx +++ b/src/components/pages/profile/settings/PrimarySection.tsx @@ -47,7 +47,7 @@ const NoNameTitle = styled(Typography)( ) const NoNameButton = styled(Button)( - () => css` + ({ theme }) => css` grid-area: button; @media (min-width: ${theme.breakpoints.sm}px) { width: fit-content; @@ -57,7 +57,7 @@ const NoNameButton = styled(Button)( ) const NoNameDisabledButtonContainer = styled.div( - () => css` + ({ theme }) => css` grid-area: button; @media (min-width: ${theme.breakpoints.sm}px) { width: fit-content; @@ -85,8 +85,8 @@ const PrimaryNameContainer = styled.div( `, ) -const PrimaryNameInfo = styled.div(() => [ - css` +const PrimaryNameInfo = styled.div( + ({ theme }) => css` display: flex; width: 100%; position: relative; @@ -105,7 +105,7 @@ const PrimaryNameInfo = styled.div(() => [ } } `, -]) +) const AvatarContainer = styled.div( ({ theme }) => css`