• Type: Task
• Resolution: Done
• Priority: L3 - Default
• Fix Version/s: 3.3.0-alpha2, 3.3.0
• Affects Version/s: None
• Component/s: frontend
• Labels:

  • nice_to_have

This is the controller panel for Smart Panels app

1. 

   Screenshot 2020-11-23 at 10.52.40.png

   104 kB

   23/Nov/20 11:23 AM

2. 

   Screenshot 2020-11-23 at 14.40.58.png

   160 kB

   23/Nov/20 2:41 PM

3. 

   Screenshot 2020-11-24 at 13.28.25.png

   22 kB

   24/Nov/20 1:29 PM

[OPT-3851] Use CSS variables instead of SASS variables

Collapse comment: Asia Malina added a comment - 23/Nov/20 11:23 AM, Edited by Asia Malina - 23/Nov/20 2:42 PM

Asia Malina added a comment - 23/Nov/20 11:23 AM - edited

Design hints

COLOUR TWEAKS

---

BLUE

• Snippet colour
.FilterList .ActionItem .previewItemValue, .Tooltip .filterValues .previewItemValue {
    background-color: var(--blue-base-65)• But if we can keep the Flow node Selected colour as is, that would be ideal.

• Gateway selection in branch analysis still uses the green. We can update to var(--blue-base-65)

WHITE

Previously white colours have become silver.
1. Pop over background
2. Menu item backgrounds
3. Entity list background - have lost the hover.
4. Page Header backgrounds in home, collections, event based processesIdea:
either
a) Make the above all white again

or

b) Make Page header backgrounds and page backgrounds
Silver-base-97 (To match Cawemo)
in pages that have the entity list.
Let's discuss sebastian.stamm

 

SIDEBAR BACKGROUND
#silver-darken-94

Current colour is the same as the selects. Suggested colour adds contrast. 

 

 

See screenshots

Expand comment: Asia Malina added a comment - 23/Nov/20 11:23 AM, Edited by Asia Malina - 23/Nov/20 2:42 PM

Asia Malina added a comment - 23/Nov/20 11:23 AM - edited Design hints COLOUR TWEAKS BLUE • Snippet colour .FilterList .ActionItem .previewItemValue, .Tooltip .filterValues .previewItemValue {     background-color: var(--blue-base-65)• But if we can keep the Flow node Selected colour as is, that would be ideal. • Gateway selection in branch analysis still uses the green. We can update to var(--blue-base-65) WHITE Previously white colours have become silver. 1. Pop over background 2. Menu item backgrounds 3. Entity list background - have lost the hover. 4. Page Header backgrounds in home, collections, event based processesIdea: either a) Make the above all white again or b) Make Page header backgrounds and page backgrounds Silver-base-97 (To match Cawemo) in pages that have the entity list. Let's discuss sebastian.stamm   SIDEBAR BACKGROUND #silver-darken-94 Current colour is the same as the selects. Suggested colour adds contrast.      See screenshots

Collapse comment: Asia Malina added a comment - 24/Nov/20 1:30 PM

Asia Malina added a comment - 24/Nov/20 1:30 PM

sebastian.stamm Just saw the warning message background needs updating too...see screenshot 

 

 

Expand comment: Asia Malina added a comment - 24/Nov/20 1:30 PM

Asia Malina added a comment - 24/Nov/20 1:30 PM sebastian.stamm  Just saw the warning message background needs updating too...see screenshot     

Collapse comment: Asia Malina added a comment - 25/Nov/20 8:07 AM

Asia Malina added a comment - 25/Nov/20 8:07 AM

sebastian.stamm
I have added two new colours in the styleguide so that the warning messages look as before. I have also defined a info, warning and success for this style just for completeness. We don't currently use anything but the warning though. 

#orange-lighten-85
#green-lighten-80

Design -> https://zpl.io/V0KrGdw

Expand comment: Asia Malina added a comment - 25/Nov/20 8:07 AM

Asia Malina added a comment - 25/Nov/20 8:07 AM sebastian.stamm I have added two new colours in the styleguide so that the warning messages look as before. I have also defined a info, warning and success for this style just for completeness. We don't currently use anything but the warning though.  #orange-lighten-85 #green-lighten-80 Design ->  https://zpl.io/V0KrGdw