Avatar editor ui revamp

[jordanmlacalle]

Candidate PR to update Avatar Editor UI per issue #40 .

This PR reworks the Avatar Editor UI to align it more with the rest of the app. It also adds a custom RoundedButton that can be used to reduce code duplication. This button could be dropped into profile.dart and EditProfile.dart to reduce the duplicated code of those buttons while providing a consistent UX/UI.

[Cryptonex7]

Also, @jordanmlacalle, extremely sorry for the delay in our response - we had so many PRs to review in more of our associated Open sourced projects of KIDE.

We are sorry for the inconvenience caused, we are trying our best to do justice to each and every contribution. Thanks for your patience.

[jordanmlacalle]

@Cryptonex7 Thank you for the feedback! I'll revisit this later today and make changes accordingly.

[vanshBhatia-A4k9]

Firstly, @jordanmlacalle , Thanks a lot for contributing to this project! We've tested your PR and it's almost ready to be merged, we had a few minor suggestions that we'd be grateful if you could change. I've added the screenshots and a brief description of the changes requested below for visualization purposes:

• Please consider improving the spacing between the avatar property to customize and the options:

• Some padding can be put on the tab highlighting or the AvatarEditorContainer itself:

• There's unused space on top of the Avatar whereas the Avatar, the button, and the AvatarEditorContainer are stacked very close to each other, evenly spreading the above can lead to better utilization of the space:

Once again, thanks for contributing to this project, hoping to hear back from you soon!

[Cryptonex7]

@jordanmlacalle,

• Considering @A4k9 's inputs, I think putting the value text between the arrows, (like: < Medium Hair > ) would help a bit.
• Also maybe consider reducing the font sizes.
• For the space left at the top, you might want to consider shifting the save button to the right (trailing edge) of the app bar (just an idea, you can avoid it if this seems to be difficult).
• Also, everything can be pushed a tad bit up on the screen to consider smaller screen sizes.

Thanks, we will be awaiting your changes with a lot of excitement. Please note - if this goes well you will receive a certificate from the team KIDE, acknowledging your contribution - as this particular issue is a significant change to our project!

[jordanmlacalle]

@Cryptonex7 , @A4k9

Thanks for the details! I'm starting to look back at this now and throughout the day. I'll do my best with the spacing between the avatar and editor, but unfortunately the extra spacing above the avatar is actually part of the SVG image. I think moving the save button the the AppBar as you suggested should alleviate some of the crowding.

[Cryptonex7]

Sure @jordanmlacalle, if that is the case, please do whatever best is possible in terms of optimizing the space.

[jordanmlacalle]

@Cryptonex7 Pushed some changes.

• Added a ScrollBar to the editor body so the user has visual indication of when scrolling has ended
• Moved the "Save" button to the AppBar. Kept the same styling. Let me know if it should be restyled
• Fixed the issue where the Avatar was not being saved properly anymore
• Decreased font size of avatar property title and value in the editor
• Moved property value text in between the arrows. Enabled overflow wrapping on this text.
• Added some padding to the editor container

Some screenshots below:

One thought for another issue is that the Avatar does not update throughout the app after saving. Fixing this might require keeping some global state of the avatar properties and updating this on press of the "Save" button as well. Could be a usecase for some state management like Provider + ChangeNotifier, etc. But best logged as a separate issue.

Let me know any other feedback you have or design / feature you might want in the editor!

Thanks

[Cryptonex7]

Hey @jordanmlacalle - thanks for the fixes. We will soon review this. Sorry for the delay. We are a team based in India - so there will be a 12 hour time lag between our communications :)

We will keep you posted about these changes - and soon send you the review.

Rest assured - the entire team is very excited about this particular PR.

Thanks

[Cryptonex7]

Hey @jordanmlacalle, things look good here - can you just make the save button a bit smaller, and maybe reduce the padding in the button?

[jordanmlacalle]

@Cryptonex7 , @A4k9 Made some minor adjustments, here's a new screenshot:

Sorry for the time between these changes!

[vanshBhatia-A4k9]

@Cryptonex7 Please review.

[vanshBhatia-A4k9]

@jordanmlacalle, we will soon be giving you a certificate acknowledging all your work towards our project, please accept it as a sign of gratitude from team KIDE for choosing to invest your precious time into helping us with this issue. 👍 🥇

[Cryptonex7]

Congratulations @jordanmlacalle

Your PR has really been of significant importance for team KIDE. Therefore, We would like to acknowledge you efforts through this certificate.

Feel free to upload this on LinkedIn or any social media - and if you do that, also link our repository with it so that we could get more such awesome contributions from people like you.

We are also looking forward to have you contribute more to KIDE. Please consider recontributing to more of our listed issues.

Thanks and Regards, Team Kide.