Feat: implement rename user UI in profile page

kanta1207 commented 7 months ago

Overview

This PR aims to Implement rename user UI in profile page. API client functionality is not included in this PR

Changes

Mark up in UserProfile component
Add RenameUserForm component
Add Rename user schema
Refactor Form component to index-export it.

Review points

Was it okay to change Form to be index-export?
The basic UI functionality in UserProfile and RenameUserForm UI

Screen Captures

https://github.com/nishiki-tech/nishiki-frontend/assets/99339182/a67c0cc8-00e8-4405-88f4-bda1d86be523

Assignee Checklist:

[x] The naming convention of the PR title is correct (See the comment at the top of this template)
[x] The base branch is correct (See: Types of Branches)
[x] The branch name follows the Branch Naming Conventions
[x] The correct assignees and reviewers have been designated for this PR
[x] The coding style follows the Coding Style Guide
[x] All the related issues are associated with this PR
[x] All criteria in the associated issues are met (please tick the checkboxes)
[x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

[ ] Double-check the "Assignee Checklist"
[ ] The code follows the generic best practices and our Coding Style Guide
[ ] The code is well-commented and easy to understand
[ ] The UI changes accurately reflect the provided design

kanta1207 commented 7 months ago

@nick-y-ito

Only the displayed "name" should be center-aligned, excluding the pen icon.

Looking back at the design, it looks like both text and icon is placed at the center.

Please correct me if I'm looking at the wrong one or anything!
Or, please tell me if this is actually your suggestion to improve the design itself.

IMO, both text and icon center-aligned design makes sense when the text gets longer. If only text is center-aligned, pen icon will be placed more right and it might be not good balance.

nick-y-ito commented 7 months ago

@kanta1207 It appears that the design has been adjusted.

IMO, both text and icon center-aligned design makes sense when the text gets longer. If only text is center-aligned, pen icon will be placed more right and it might be not good balance.

I agree with this. Let me ask the designers.

kanta1207 commented 7 months ago

@nick-y-ito Thank you for helping me out! I resolved all the issues, so please take a look anytime when you have a time

nick-y-ito commented 7 months ago

@kanta1207

Thank you for the update. I have replied to your messages, so please take a look :)

kanta1207 commented 6 months ago

@nick-y-ito Thank you for the suggestions & investigation! I resolved the avatar issue in the latest commit! Please have a look when you have a moment :)

nishiki-tech / nishiki-frontend