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`