[Controls] Improve banner (#132301)

src/plugins/controls/public/control_group/control_group_strings.ts

@@ -18,9 +18,14 @@ export const ControlGroupStrings = {
       defaultMessage: 'Controls',
     }),
   emptyState: {
+    getBadge: () =>
+      i18n.translate('controls.controlGroup.emptyState.badgeText', {
+        defaultMessage: 'New',
+      }),
     getCallToAction: () =>
       i18n.translate('controls.controlGroup.emptyState.callToAction', {
-        defaultMessage: 'Controls let you filter and interact with your dashboard data',
+        defaultMessage:
+          'Filtering your data just got better with Controls, letting you display only the data you want to explore.',
       }),
     getAddControlButtonTitle: () =>
       i18n.translate('controls.controlGroup.emptyState.addControlButtonTitle', {

src/plugins/controls/public/controls_callout/controls_callout.scss

@@ -1,5 +1,5 @@
 @include euiBreakpoint('xs', 's') {
-  .controlsIllustration {
+  .controlsIllustration, .emptyStateBadge {
     display: none;
   }
 }
@@ -15,14 +15,15 @@
     }
 
     @include euiBreakpoint('m', 'l', 'xl') {
-      height: $euiSize * 4;
+      height: $euiSizeS * 6;
 
-      .emptyStateText {
+      .emptyStateBadge {
         padding-left: $euiSize * 2;
+        text-transform: uppercase;
       }
     }
     @include euiBreakpoint('xs', 's') {
-      min-height: $euiSize * 4;
+      min-height: $euiSizeS * 6;
 
       .emptyStateText {
         padding-left: 0;

src/plugins/controls/public/controls_callout/controls_callout.tsx

@@ -6,7 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiButtonEmpty,
+  EuiPanel,
+} from '@elastic/eui';
 import React from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 
@@ -39,6 +46,9 @@ export const ControlsCallout = ({ getCreateControlButton }: CalloutProps) => {
             <EuiFlexItem grow={false}>
               <ControlsIllustration />
             </EuiFlexItem>
+            <EuiFlexItem className="emptyStateBadge" grow={false}>
+              <EuiBadge color="accent">{ControlGroupStrings.emptyState.getBadge()}</EuiBadge>
+            </EuiFlexItem>
             <EuiFlexItem>
               <EuiText className="emptyStateText" size="s">
                 <p>{ControlGroupStrings.emptyState.getCallToAction()}</p>

src/plugins/controls/public/controls_callout/controls_illustration.tsx

@@ -11,8 +11,8 @@ import React from 'react';
 export const ControlsIllustration = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="130"
-    height="130"
+    width="120"
+    height="120"
     fill="none"
     viewBox="0 0 130 130"
     className="controlsIllustration"
@@ -85,20 +85,10 @@ export const ControlsIllustration = () => (
       fill="#FCC316"
       d="M67.873 63.635l-2.678 4.641-2.678-4.64-2.678-4.642H70.55l-2.678 4.641z"
     />
-    <path fill="#FFD80E" d="M83.408 92.69a4.433 4.433 0 11-8.866 0 4.433 4.433 0 018.866 0z" />
-    <path
-      fill="#FF90C8"
-      d="M80.561 33.722h3.471v3.47h-3.471v-3.47zM71.682 33.722h3.471v3.47h-3.47v-3.47zM62.816 33.722h3.47v3.47h-3.47v-3.47zM89.44 42.016h3.47v3.47h-3.47v-3.47zM80.561 42.016h3.471v3.47h-3.471v-3.47zM71.682 42.016h3.471v3.47h-3.47v-3.47zM62.816 42.016h3.47v3.47h-3.47v-3.47z"
-    />
-    <path fill="#00AAF7" d="M42.497 39.74l2.574-4.484 2.6 4.485 2.587 4.485H39.897l2.6-4.485z" />
     <path
       fill="#00BFB3"
       d="M107.458 65h-1.3a41.147 41.147 0 01-62.402 35.268A41.145 41.145 0 1197.89 40.3a41.018 41.018 0 018.268 24.7h2.6a43.76 43.76 0 00-52.295-42.917 43.756 43.756 0 00-31.89 59.663A43.76 43.76 0 0065 108.758 43.579 43.579 0 0095.99 95.992 43.583 43.583 0 00108.758 65h-1.3z"
     />
-    <path
-      fill="#7DE2D1"
-      d="M55.64 99.853l-4.836-4.849 1.924-1.91 2.912 2.911 5.681-5.68 1.924 1.923-7.605 7.605z"
-    />
     <path fill="#1BA9F5" d="M128.206 70.72a.38.38 0 00.182.35v-.675a.561.561 0 00-.182.325z" />
     <path
       fill="#7DE2D1"