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

[AnukratiMehta]

Overview

I changed the position of DialogClose from PrimitiveContent to DialogHeader so that it is properly aligned in the center.

Changes

• Moved DialogClose to DialogHeader
• Enclosed the div in DialogHeader in a parent div and added DialogClose as the sibling

Review points

• Your instructions said that "The component structure and styles of DrawerHeader in src/components/ui/Drawer.tsx should be similar," however, I didn't need to make any changes there.

Screen Captures

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:

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

[nick-y-ito]

@AnukratiMehta Additionally, your code does not look formatted correctly. Code formatting is supposed to be performed automatically whenever the git commit is executed. If you use a GUI git tool, kindly ensure that the git hook path has been configured correctly.

Moreover, kindly confirm that the file .husky/_/husky.sh exists.

If everything is set up correctly, you should see the message "Preparing lint-staged..." when committing changes.

[AnukratiMehta]

@nick-y-ito Thank you so much for the help. The .husky/_/husky.sh exists and I was able to see "Preparing lint-staged..." when committing changes so everything should work fine now :)

[nick-y-ito]

@AnukratiMehta Thank you for updating.

I was wondering if you have access to this Figma design? You will find the Dialog design there, which is used repeatedly throughout the design.

I hope you accurately reflect the design into the code: However, there are still a few remaining issues that need to be addressed:

• [ ] The color of the cross button is not accurately reflected
• [ ] The clickable area of the cross button is too small. Please match its style with the one in the Drawer. *The entire "DialogHeader" should be almost the same as the "DrawerHeader".

As you might have already noticed, you can also see the currently implemented "Drawer" by utilizing "src/components/ui/DrawerUsageExample.tsx"

Thank you for your attention to these issues.

[AnukratiMehta]

@nick-y-ito

Thanks for your patience. I did, in fact, not realize there was a Figma design. I've addressed the two remaining issues. Hope it works now!