Tweak Styles for ang-notice in Elementor editor

[JohnPixle]

We should improve and make consistent the appearance of our custom messages in the Elementor editor.

Please excuse my poorly written CSS below, but I hope you get the point.

• All properties are the same for all three notice styles, only the background color changes.
• Styles can be the same for both light / dark modes of Elementor Editor.

Below I am sharing the suggested styles. Figma link.

Neutral (default style for ang notice. )

This should apply to all our notices by default, and replace their current style.

.ang-notice {
font-size:12px;
font-style:normal;
color: rgba(0, 0, 0, 0.7);
background: #EFEFEF;
border-radius: 4px;
}

.ang-notice a{
text-decoration: underline;
}

.ang-notice a:hover{
text-decoration: none;
}

blue

.ang-notice .blue{
background: #E6F6FF;
}

Yellow

.ang-notice .yellow{
background: #FDEAB9;
}

Please let me know if you need any further clarifications, and ping me for any help!

[lushkant]

Addressed in #550

[JohnPixle]

Re-opening

[JohnPixle]

Based on our discussion on Slack:

• [x] Revert bottom left toasts to default elementor style
• [x] Please use classes so we can change the color and text color in the future
• [x] Test Dark Mode of the Elementor Sidebar, and let's make sure they look ok there as well ;)

This is how it is supposed to look:

No descriptions, only the link. Text will always be "edit in Style Kits"

Instances:

• [x] Container Padding
• [x] Container background presets
• [x] Button Sizes
• [x] Text Sizes
• [x] Drop Shadow Presets
• [x] Outer Section Padding
• [x] Column Gaps

Let me know if you need any further help with this 👍🏻