fix(clerk-js): Align some sections in User Profile with the designs #2814
Conversation
🦋 Changeset detectedLatest commit: cf24ec6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| id='connectedAccounts' | ||
| sx={t => ({ | ||
| borderRadius: t.radii.$lg, | ||
| ':hover': { backgroundColor: t.colors.$neutralAlpha50 }, |
There was a problem hiding this comment.
Can we avoid the duplication here by putting the styles inside ProfileSection.Item ?
There was a problem hiding this comment.
We can't move them in ProfileSection.Item as we use it for stuff that don't need the hover state and the border radius but we can create a new component or add a prop to add those styles.
There was a problem hiding this comment.
We can move them in and add a prop or make a small wrapper as you said. I prefer the wrapper tbh.
There was a problem hiding this comment.
The only thing I don't like about the wrapper is that it's can be a bit confusing as it would be the same thing, the hover state is like having a variant.
| @@ -62,6 +62,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu | |||
| justifyContent: 'center', | |||
| borderColor: theme.colors.$neutralAlpha100, | |||
| alignItems: 'center', | |||
| padding: `${theme.space.$1x5} ${theme.space.$3} ${theme.space.$1x5} ${theme.space.$2x5}`, | |||
There was a problem hiding this comment.
Why is this necessary? Isn't it going to make most screens deviate from designs now?
There was a problem hiding this comment.
This is the padding that the designs have.
| @@ -128,7 +128,7 @@ const ProfileSectionItem = (props: ProfileSectionItemProps) => { | |||
| justifyContent: 'space-between', | |||
| width: '100%', | |||
| alignItems: 'center', | |||
| padding: `${t.space.$1x5} ${t.space.$none} ${t.space.$1x5} ${t.space.$4}`, | |||
| padding: `${t.space.$1x5} ${t.space.$3} ${t.space.$1x5} ${t.space.$2x5}`, | |||
There was a problem hiding this comment.
This change is made to be completely aligned with the designs
|
!preview |
|
Hey @anagstef, your preview is available.
|
octoper
force-pushed
the
vaggelis/sdk-1362-fix-email-address-highlighted-state-on-userprofile
branch
2 times, most recently
from
ba41574
to
770c57b
Compare
octoper
force-pushed
the
vaggelis/sdk-1362-fix-email-address-highlighted-state-on-userprofile
branch
from
770c57b
to
1647a19
Compare
|
!preview |
|
!preview |
|
!preview |
nikosdouvlis
deleted the
vaggelis/sdk-1362-fix-email-address-highlighted-state-on-userprofile
branch
Description
This PR adds a hover state for all profile section items that include an action menu (eg. Emails, Phone numbers etc.)
Before
After
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change