Change "Add New Device" Button to "Edit" Icon

[bryanboza]

Problem Statement

The "Add New Device" button in the interface currently does not add a new device but rather allows users to edit existing device settings. This misleads users, affecting usability and efficiency.

Then we need to change this icon by a edit pen.

Steps to Reproduce

• Login as admin
• Edit any page
• Open the preview drop-down
• In the devices list click in the + button on the top of the list
• Observe that the interface transitions to an edit mode for an existing device rather than adding a new device.

Acceptance Criteria

The "Add New Device" button should be replaced with an "Edit" icon that accurately reflects its function.
The new icon should be tested across different browsers and devices to ensure it performs consistently.
The tooltip and accessibility labels for the button should be updated to "Edit Device."

dotCMS Version

Tested on master // Docker // FF

Proposed Objective

Quality Assurance

Proposed Priority

Priority 2 - Important

[melissarojas-dotcms]

Link to Figma with the new icon.

[zJaaal]

IQA Passed

Icon is updated.

Docker Image: [dotcms/dotcms:trunk_743e6da]

Screenshot

Screen.Recording.2024-06-28.at.1.19.19.PM.mov

[bryanboza]

Fixed, tested on trunk // Docker