feat(user card) - Update User Card to SHINE styles (part 2) #2123
Conversation
packages/stacks-classic/lib/components/user-card/user-card.less
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/AvatarDeleted16.svelte
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte
Outdated
Show resolved
Hide resolved
…m/StackExchange/Stacks into spark-127/update-user-card-part-2
| interface Props { | ||
| /** | ||
| * Account name for screen readers |
There was a problem hiding this comment.
NIT: wrong description. It's an internal only component, we could also skip jsdoc all together.
| width="72" | ||
| height="72" | ||
| preserveAspectRatio="none" | ||
| xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKZSURBVHgB7dxBbtpAFAbg92wv6I4jtDfIEWAT0UVbo4rQrBpOEOUEVU8Q9QRxV22gEo66oav6CO0NOALLLIJfPJEtHOTxMyZYIfyflMVocGx+yR4znmf+OQmFVqJPA79LBX5Mph0m/ksWyXZs60v2YbbrFPWJI6PTj/2gcJ/j6RkzX1Ex67Gm+xRbn5B0Twf9iCocq0NQCgEpvOQvyhrJKfTP9kHXo0V8t/rsRlj+k1jOwJjmts0chxYixfssO9ZUZOtwhRa2vtJjBQAA2Cts7pCzhhn+Tk762vD5oo3H06MlUztre/mfDzE/3Dt06YDFzJeMnxrVISAFAlIgIAUCUiAggJ2qPTN0/Nb3HVm2aUuz2e+grL/Xe3dGW3Pns1kYUQ0e1cSyPI8tE/EbCso6k31c0ZaYlhFRvdlQXKQVCEiBgBRe+qDsgXlSMBx8uKiy4auW27+9pa0v0hqH3DfUoOvJzWXyYPEoa5uLdCdrJB1UVRiG5tHJgnYsGX3m1KA0nE7WximmQEAKBKRAQAoEpPBEZJQ1HNn9qPTcyZ18JZe+EwAAwN5js9R21aK5bXnsobj+NfXjOL944fE65IhqTk2+FCJ8zoxf85UhIAUCUiAgBQJSVC5F2ITv++0mJvTzWi1apPPk21krRdhJUcJx732QDJifqUFMTvBndjOiJ4ZTTIGAFAhIUXt1RxmH4iC5KkTUKJ4TwLPDVaueDwWqnjeEgBQISIGAFAhIgYAUnnnRR9ZwsXiBHJGLfEkmAADA/uKqpQjmjQSm6N72j8pmAdaX9z86gFi+DYf9sKgvfW/al8LtlLKJ/PdaZ4Zy2xsmapcimHsDrlkftr68Py/2ShZMCr0mtrwcTi+b6Ng6yu5zUIqwIQSkuAe53NsA2WVtFwAAAABJRU5ErkJggg==" |
There was a problem hiding this comment.
@CGuindon this svg is actually embedding a png, is that on purpose? Didn't we have a regular svg?
There was a problem hiding this comment.
@ttaylor-stack Yes! Sorry that's a figma thing, I can't add an SVG to the figma component so I added the PNG for the design mockups. The SVG for the deleted user is here (also exported and attached)
There was a problem hiding this comment.
I don't think we need this file anymore @ttaylor-stack
CGuindon
left a comment
CGuindon
left a comment
There was a problem hiding this comment.
Is there an easy way to have the height of the container that the username is in be the same as the avatar height for both the Original poster and New contributor on the larger size. It's missing 1px of padding above and below I think to match.
@CGuindon updating original poster is fine I can do that now however with the new contributor in the figma it matches the height of the other user badges not the avatar. Do we still want to increase the height to match the avatars? Also if that's the case do we want to update all user badges to match the height of the avatar? |
| stroke-width="2.89086" | ||
| stroke-dasharray="5.78 5.78" | ||
| /> | ||
| <rect x="10" y="14" width="12" height="3.12" fill="#46484D" /> |
There was a problem hiding this comment.
@ttaylor-stack the color for the fill and stroke attributes need to use our color custom properties (e.g. var(--black-400)) otherwise it only looks good in light mode. @CGuindon could you help Tavian map the correct colors to the different part of the svg?
…m/StackExchange/Stacks into spark-127/update-user-card-part-2
No my mistake, just original poster is fine. |
SPARK-127
Figma
This PR covers part 2 of the User Card component which includes: