Use correct icon in image upload in blog edition

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.10 DXP FP9, 7.1.X, Master
• Fix Version/s: Master
• Component/s: Collaboration > Item selector
• Labels:
  • 7.2-could
  • ux_review_7.2
  • visual
• Story Points: 0.25
• Fix Priority: 3
• Sprint: 025 - Pikachu
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/73109

Steps to reproduce

1. Blog
2. + button to create a new blog
3. Select file to upload blog image
4. Select image from file list
5. Click add to add an image to a blog post

 

Description

There are a few problems here    

1. Use the correct lexicon icon for the button
2. Align and button style
3. Use same metaphor for the same action

I’m only able to edit image when I can first upload an image

I can’t access edit image feature after I already uploaded the image

Current behavior

• Not using the correct lexicon icon
• Icons are not aligned ( Reload icon used to represent change image action, while in Alloy editor Picture icon is used to represent add image icon )
• Icon not representing correct action  ( Trash icon in Lexicon represent item going to recycle bin, In this case, the item is not going to recycle bin, the image will be removed therefore should be changed for an icon that the represent correct action.

see Lexicon definition, https://lexicondesign.io/docs/patterns/actionsDefinition.html

 

 

( This is a Alloy Editor in blog edition, where it's used picture icon for the similar type of action )

 

 

Expected behavior 

 

The icon representing image change action: picture

The icon representing remove action: times-circle

See detail in this mockup

https://www.figma.com/file/OzjqcPNzGIC01a75c6GyjOiH/LPS-92038-icon-image-upload-blog-edition?node-id=3%3A177