Avatar

[tyler-reitz]

I'd be happy to work on the Avatar component but would need some visual guidance. Is there anything to reference?

[goodmind]

Would need canvas to reduce bit depth tho, or maybe css custom filter

[arturbien]

@tyler-reitz @goodmind I think something this simple would be great:

Avatar component is frequently used in AppBars as a user navigation or in chat apps so we could do something similar to material-ui avatar. Also it would be nice to implement the letter avatar too (that's great as a placeholder when user didn't set any profile pic yet) 😊

Maybe we could use canvas like @goodmind mentioned to apply some filters or slightly pixelate the circle edges but that's not essential.

[goodmind]

@arturbien but this isn't real app :P

[arturbien]

@goodmind yes it's a design. Just like any UI design you get from designers to convert it into something real. 😊

We are not attempting to exactly RECREATE Windows95 components. We are going to make them usable in the modern mobile / web apps. Thus, any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95.

[tyler-reitz]

@arturbien thanks for the notes. That pixelated circle looks 👌 but I'm not sure there's any sane CSS to pull it off with. Maybe the recessed border from @goodmind's ex. would work instead?

[panmona]

@tyler-reitz I looked this up the other day and it should be possible with a canvas.

[goodmind]

@tyler-reitz how would this border look on the circle?

[tyler-reitz]

@goodmind probably not as good as the example provided by @arturbien. @maracuja-juice says the pixelated border effect is achievable with canvas anyway, so no need to fix what ain't broke.

[arturbien]

In #30 I added simple Avatar component with 'noBorder' and 'square' prop. What do you think? Maybe we could add pixelated / depth buffer / vintage effects as react hooks ? Then users could use it for whatever image they want, not only Avatar. What do you think?

[arturbien]

Added in #30