Latest screenshot

@andersonjeccel Im all for the modernization of the campaign builder, but I gotta say that the new color-scene of "Decision" and "Action" look too indifferent in my option:

Going from "Green", "Blue", "Red/Orange" colorscheme to "Blue", "darker blue", "yellow" lowers the visual clarity by a significant amount.

@oltmanns-leuchtfeuer What you say totally makes sense and I agree about it
We're dealing with the fact that this pull request shouldn't be changing anything in the panel from the start, it's out of the proposed scope
but we just can't keep moving other changes forward using this PR, it'd never be merged
so right now I'm just trying to address what community says to make the new design be in the next release

Could you create a design proposal for this panel? Then I can implement it

Hi @andersonjeccel, I have made up my mind regarding the campaign builder and worked on a different color scheme:

It sticks closer to the old one, but with slightly different colors to make them feel more connected while being clearly visibly distinguishable. Color codes are these ones, all taken from the Mautic.org frontpage:

• Blue: #425090
• Green: #00bf9a
• Yellow: #ffb900

In my opinion, this already gives a lot more "first look clarity":

New Colors:

Old/Current Colors:

My bigger concern currently is the size each box per Action/Decision/Condition. They went up in size by a big margin and differ in size. While, for smaller campaigns this is rather positiv, bigger and more complex campaigns get overwhelming instantly. For Example this campaign, made in the old builder would get unfathomably difficult to glance at in the new builder:

I got different approaches in mind to solve this:

1. Have a "toggle" to switch between old and new box styles e.g. "Smaller Boxes (less info, but smaller)/ Bigger Boxes(more info, but takes more space)"
2. Make the boxes resizeable in the builder via dragging the box to a wanted size
3. Have them all in the same size, but in the new design.

Please feel free to comment and constructively criticise my takes. :)

@LordRembo In terms of technical implementation for the proposed color scheme in the previous comment, I would have to extend the tokens system to address a third brand color (which adds a new layer of complexity both for the tokens and for branding later)

Do you think it’s worth it?

I’m thinking about reverting the color changes made to the panel so they go back to green and red, just to finish this PR for now and merge
Then I tackle the panel in another PR

Because the yellow background color will keep being inaccessible, low contrast even for people without disabilities ; solving this issue requires a greater panel redesign

@andersonjeccel If it would be easier to get alignment & clear technical hurdles, I think it's a good idea to split the color changes into a different PR and keep the rest of the changes in this PR.

Consider this for the color changes:
I think the Campaign builder is one of those components that stands on its own and doesn't have to reuse generic color classes or generic/branding color variables that are in use everywhere else.
The use of color in here is directly tied to content (eg. green means 'decision'), that is not a general practice in most of the site except for things like alerts & notifications. There are at least 2 ways to go forward:

• align the colors with colors used in those other components: eg. green/orange/red/blue but run the risk of running out of colors if there's more than 3 or 4 distinctions
• or make class names related only to the Builder (eg. prefix with .campaign-builder- or some other naming system that is already in use), that are not changed in branding. That leaves you some freedom to make unique colors & color variables for the Builder. Specifically for dark mode, you'll have to see if the same colors still work on dark background or make some slight 'dark mode only' variant variables.

As for accessibility considerations: the yellow could work if the text was made dark instead of white. Or you'd have to make the background-color brown (#946C00) instead.

@oltmanns-leuchtfeuer

I''l fix things using another PR to improve readability and more careful planning to avoid just throwing something in the interface, ok?
In the meanwhile, I'd be happy to see your review in more of my pull requests

Regarding size, to me it feels that bigger and complex campaigns are already overwhelming by their existance; this new redesign introduced visible information for users to understand a campaign like yours without entering in each of the 35809 thousands steps manually

For example, I have no idea of what "Change multiselect" is about in your campaign. Are you changing the value of a custom field? Are you changing which form appears to a lead? Something completely unrelated to both?

It gets even more difficult when talking about clients that just make campaigns like there was no tomorrow without labeling steps...

Now to answer your last ideas:

1. Good idea, we can leave it open for someone from the community to build on top of this PR (probably needs PHP)
2. That certainly need JavaScript coding, do you know someone able to do it? I'm limited to CSS and basic Twig knowledge
3. Have to check if that's possible, because there are new information blocks. What if you give a try on the next release to see if this idea keeps relevant?

Okay then, let's document some thoughts

• The panel will be reverted to the original colors
• Another PR will be created to address the panel design

@oltmanns-leuchtfeuer Oh, enter in the Slack channel #tt-ux_ui to see more things

@kuzmany I'll tackle this in another PR, thanks for reporting!