Description

The current header UI has alignment issues with the components and icons, as seen in the provided screenshot.

We need to update the header to ensure all components and icons are properly aligned with each other for a cleaner and more consistent look.

Requirements

1. Align Components:

   • Ensure all components in the header are vertically centered.
   • Make sure there is consistent spacing between the components.

2. Align Icons:

   • Align all icons in the header so they are vertically centered and match the alignment of the other components.

3. Spacing:

   • Ensure there is appropriate and consistent spacing around each component and icon to enhance readability and aesthetics.

4. Sizes:

   • Icon sizes: 24px
   • Make the top header component padding:
     - top: 8px
     - bottom: 8px