feat: Address smaller UI issues in the new navigation (WPB-9694)

[thisisamir98]

WPB-9694 Fix smaller UI issues in the new navigation

Pull Request: Fix Smaller UI Issues in New Navigation

Overview

This pull request addresses a collection of minor UI issues in the new navigation that need to be resolved before the public release. The changes aim to enhance the overall user experience and visual consistency of the navigation interface.

Changes Implemented

1. Icon Button for "+Group"

   • Changed the “+Group” button to an icon button.
   • Removed “Group” from the label.

2. Consistent Font Style

   • Applied the same font style for:
     • Display name
     • Title in the conversation list
     • Title in the conversation title

3. Avatar Padding

   • Added 16px padding to the top of the user avatar in both collapsed and expanded states.

4. Sidebar Collapse/Expand Button

   • Made the sidebar collapse/expand button visible only on hover in both collapsed and expanded states.

5. Icon for “Connect” Item

   • Changed the icon of the “connect” item to “Add participants”.

6. Updated Sidebar Icons

   • Updated the icon for the folder in the sidebar.
   • Added an arrow for collapsing and expanding the folder section (design specs referenced).

7. Support Link Icon

   • Added an icon to the support link in the sidebar to indicate it opens an external link.

Screenshots

1. Before and After for "+Group" Button

2. Font Style Consistency in Conversation List and Title

3. User Avatar Padding

4. Sidebar Collapse/Expand Button Hover State

5. Updated "Connect" Item Icon

6. Folder Icon and Arrow in Sidebar

7. Support Link Icon

[sonarcloud[bot]]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud