Restyle the page structure tree

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Pages > Page Editor
• Labels:
  • fc_20_03
  • fc_20_04
• Epic Link: Adjust the page structure tree Style
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/86609

The page structure tree of the page editor does not fit the styles and colors marked by Lexicon and Clay so that it does not integrate visually well into the set.

Acceptance criteria:

• The fragments that appear in the tree that belong to the Master must appear but disabled
• The colors used must be from the Clay palette
• The nodes are only activated when they are clicked
• Visual feedback of the item in hover:
  • Background color: #f7f8f9
• Visual feedback of the selected item:
  • Background color: #f7f8f9
  • font-weight: 600 (semibold)
• The column node must not appear in bold when they are selected

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)
The nodes of fragments inherited from Master should be shown in the Page Structure but disabled	Smoke	Manual	Yes	No
The background color of hovered or selected nodes should be #f7f8f9 in the Page Structure	Sanity	Manual	No	No
The font weight of selected nodes should be 600 in the Page Structure except Column nodes	Smoke	Manual	Yes	No
All elements in master should be enabled in the Page Structure	Regression	Manual	Yes	No