Avatar about react95 HOT 10 CLOSED

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

from react95.

@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.

from react95.

@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.

from react95.

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?

from react95.

@arturbien but this isn't real app :P

from react95.

@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?

from react95.

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

from react95.

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

from react95.

@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.

from react95.

Added in #30

from react95.