chore(VE-6918/error-text): warning message improved

Author: csAdityaPachauri

src/visualBuilder/components/emptyBlock.tsx

@@ -46,7 +46,18 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                     visualBuilderStyles()["visual-builder__empty-block-title"]
                 )}
             >
-                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
+                This page doesn’t have any{" "}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-field-name",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-field-name"
+                        ]
+                    )}
+                >
+                    {blockParentName.toLowerCase()}
+                </span>{" "}
+                added. Click the button below to add one.
             </div>
             <button
                 className={classNames(
@@ -59,8 +70,17 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 type="button"
                 data-testid="visual-builder__empty-block-add-button"
             >
-                <i className="fas fa-plus"></i> &nbsp;
-                {blockParentName}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-plus-icon",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-plus-icon"
+                        ]
+                    )}
+                >
+                    +
+                </span>
+                &nbsp; Add {blockParentName}
             </button>
         </div>
     );

src/visualBuilder/visualBuilder.style.ts

@@ -121,6 +121,13 @@ export function visualBuilderStyles() {
                 visibility: visible;
             }
         `,
+        "visual-builder__empty-block-plus-icon": css`
+            font-size: 22px;
+            font-weight: 300;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
         "visual-builder__overlay--outline": css`
             position: absolute;
             outline: 4px solid #715cdd;
@@ -571,19 +578,24 @@ export function visualBuilderStyles() {
             line-height: 100%;
             color: #647696;
         `,
+        "visual-builder__empty-block-field-name": css`
+            font-weight: 700;
+        `,
         "visual-builder__empty-block-add-button": css`
             height: 32px;
             border-radius: 4px;
             background: #f9f8ff;
             border-color: #6c5ce7;
             border-width: 1px;
-            padding: 8px 16px 8px 16px;
+            padding: 0 16px;
             font-size: 0.9rem;
             font-family: Inter;
             font-weight: 600;
             color: #6c5ce7;
-            padding-block: 0px;
             letter-spacing: 0.01rem;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
         `,
         "visual-builder__hover-outline": css`
             position: absolute;