fix(detailed pages): Make delete btns more visible on detail pages WD-3870

[aaryanporwal]

Done

• Previously lxd-ui was only using delete icons on detail pages (instance, profile and storage).
• The delete icons were hard to see, and were often missed by the users.
• Replaced with "Default" vanilla-framework buttons on large screens, and only icon on mobile viewport.

Fixes [list issues/bugs if needed]

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @lorumic or @edlerd for access.
   • With a local copy of this branch, run as described in the Readme.
2. Perform the following QA steps:
   • [List the steps to QA the new feature(s) or prove that a bug has been resolved]

Screenshots

Before:

After:

[webteam-app]

Demo starting at https://lxd-ui-353.demos.haus

[lorumic]

Some QA comments:

• The button in its "expanded" form should probably not be dense, correct me if I'm wrong @al-bakalova @edlerd
• It should not break the layout for instances with a long name:
  
• The "collapse on small screen" behaviour is not implemented:

When resizing, we should turn the big button into a small icon button, or just “Delete” one. Let’s explore this together.

[al-bakalova]

@aaryanporwal on top of Michele's feedback, please review the "Delete instance" and "Delete profile" buttons. We need less space before and after the label. Also, please remove the delete icon. It should only be visible on smaller screens to replace the label.

[lorumic]

@aaryanporwal on top of Michele's feedback, please review the "Delete instance" and "Delete profile" buttons. We need less space before and after the label. Also, please remove the delete icon. It should only be visible on smaller screens to replace the label.

So, to recap: on small screens, we keep what we have now (icon only, no borders etc). On medium screens and bigger, we show a default button with the label only "Delete instance/profile" and no icon. Is this a good summary @al-bakalova ?

[al-bakalova]

@lorumic Yes! I hope this makes sense. When we are dealing with longer instance or profile names, we can probably use the icon button earlier. I don't know if this is possible from dev point of view, so I'd leave the decision to you and Aaryan!

[lorumic]

@lorumic Yes! I hope this makes sense. When we are dealing with longer instance or profile names, we can probably use the icon button earlier. I don't know if this is possible from dev point of view, so I'd leave the decision to you and Aaryan!

It's probably easier to constrain the appearance of the button to the screen size only. So, on medium and bigger screens, the style of the other elements in the header (breadcrumbs and actions) should be updated to accommodate a bigger button than the one with the icon only, and be opportunely responsive.

[edlerd]

LGTM, thank you for applying the changes.

[al-bakalova]

@aaryanporwal Good job! Looks good to me! Thank you for applying all these changes!