Portlet UI Cleanup

[srenault-meeds]

Rationale

UI Theme used to display informations needs to be reviewed a bit to make sure we have consistencies between portlets: border, display of title, subtitle, body (padding, font-size, text-transform)
For example, in the stream page, we have:

• Your activity or Activity stream which is displayed differently than other portlet titles
• Border-radius have been applied to some portlet (composer, contributions) but not others
• Uppercase is applied to titles and some are forced as is

1. Functional Requirements

1. Functional Requirements

Top User Stories

Each time we add a new portlet, these characteristics below must be considered.

1. Portlet padding/margin characteristics UI

• Any existing portlet must be displayed with a border-radius of 8px (by default)
• Padding inside needs to be 20px 
• Margin-bottom (external) must be 20px. Other margins will be dealt by container
• Contents inside the portlet needs to be displayed as left aligned AND with margin depending what to display:
  a. title (if not only a title): padding: 0 0 20px 0
  b. subtitle (if something below): padding: 0 0 16px 0
  c. subtitle (if body above): padding: 20px 0 16px 0
  d. Body (until there are other items to list): padding: 0 0 16px 0

2. Portlet text styles

Ideally, portlet will have same styles and adding a class for each would be a good way to ensure consistency and reusability. Below, characteristics of each content:

Title:

• Font-size: 18px
• No text-transformation (no uppercase). If needed, labels can be updated from Crowdin
• Font-color: allPagesGreyColorLighten1,#707070
• Font-style: regular

See more:

• Font-size: 14px
• Font-color: primary color
• Font-style: regular

Subtitle:

• Font-size: 16px
• Font-color: --allPagesBaseTextColor: #20282c;
• Font-style: regular

body main text:

• Font-size: 14px
• Font-color: --allPagesBaseTextColor: #20282c;
• Font-style: regular

body subtitle:

• Font-size: 14px
• Font-color: --allPagesGreyColorLighten1: #707070;
• Font-style: regular

Example:

Detail of padding/margin:

Impacts

Any existing portlet must be updated to get those characteristics applied
Provide a reusable component so the portlet is still used when adding a new portlet

2. Technical Requirements

Extensibility

Like the drawers, the widgets has to define a single template to reuse for all existing widgets with centralized styled title, borders and margins.

4. Software Architecture

Access 

We have to use the same manner as overview banner and drawer to define generic and reusable style for widgets. Please refer to Widget.vue to take an example of using slots for overview page.

PS: no specific stylesheet has to be added for this reusable component.

[srenault-meeds]

Ready for review @margondicco
cc @Julien-Dubois-eXo if you want to take a look as well

[srenault-meeds]

Ready for review please @margondicco

[margondicco]

Perfect Go fonc

[srenault-meeds]

Thanks. Ready for tech spec @boubaker

[boubaker]

ok, thanks, Ready for Tec Review @rdenarie

@SaraBoutej FYI.

[rdenarie]

👍 go tech