Adjust the position of the close [ x ] button of the Dialog component

nishiki-tech / nishiki-frontend

Nishiki is an app for tracking and sharing food inventories within groups for better pantry management.

https://nishiki.tech

MIT License

20 stars 5 forks source link

Adjust the position of the close [ x ] button of the Dialog component #229

Closed nick-y-ito closed 6 months ago

nick-y-ito commented 6 months ago

Description

The cross button should be aligned to the center line of the header.

Criteria

[ ] Move the cross button into the DialogHeader
[ ] Align the contents of the header to the center line, as instructed in the image.

Screen Captures

Notes

The component structure and styles of DrawerHeader in src/components/ui/Drawer.tsx should be similar.
To inspect the style, you can refer to src/components/ui/DrawerUsageExample.tsx.

AnukratiMehta commented 6 months ago

Hello, I would like to work on this.

nick-y-ito commented 6 months ago

@AnukratiMehta

Thank you for showing interest in the Nishiki project! We are thrilled to have your support in addressing the issue.

As per your request, I have added some notes in the description that should assist you in tackling the problem. Please let me know if you require any further assistance or clarification.