Update UI to Match Figma Specs: Labels, Buttons, Gaps

[Bonapara]

Current Behavior

• Section labels are uppercase.
• The "Esc to cancel" text helper should be removed.

Desired Behavior

Match the following Figma design:

• Replace the Esc to cancel helper with an X button.
• Set the section labels to lowercase - except the first letter of course (use the same style as NavigationDrawerSectionTitle.tsx, and ideally the same component).
• Add a gap between the first section label and the search bar.
• Check if other details are matching

[greptile-apps]

Implementation Steps

1. Update Section Labels:

   • Locate the section labels in the relevant component file.
   • Replace the current label implementation with the NavigationDrawerSectionTitle component from NavigationDrawerSectionTitle.tsx.

2. Remove 'Esc to cancel' Helper:

   • Find the text helper displaying 'Esc to cancel' in the component file.
   • Remove this text helper.

3. Add 'X' Button:

   • Add an 'X' button in place of the removed 'Esc to cancel' helper.
   • Ensure the button has the appropriate styling and functionality.

4. Add Gap Between Section Label and Search Bar:

   • Locate the section containing the first section label and the search bar.
   • Add a CSS margin or padding to create the desired gap.

Relevant Files

• NavigationDrawerSectionTitle.tsx for section label styling.
• The component file containing the section labels and 'Esc to cancel' helper.

References

[sanidhyasin]

hey @Bonapara, would love to work on this issue, please assign this to me.

[Bonapara]

Sure @sanidhyasin, thanks for contributing!

[ehconitin]

Could u assign this to me @Bonapara

[Bonapara]

Sure @sanidhyasin, thanks for contributing!

[ehconitin]

@Bonapara please check PR 6415