From 14d84c8025834f3b5ba439c14da52a96d473ecdc Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:37:04 +1200
Subject: [PATCH] fix(UI): message styling on ingress form EE-5665 (#9161)

---
 .../CreateIngressView/IngressForm.tsx         | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
index 25158025f..7771e1958 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@@ -1,10 +1,9 @@
 import { ChangeEvent, ReactNode } from 'react';
-import { Info, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Plus, RefreshCw, Trash2 } from 'lucide-react';
 
 import Route from '@/assets/ico/route.svg?c';
 
 import { Link } from '@@/Link';
-import { Icon } from '@@/Icon';
 import { Select, Option } from '@@/form-components/Input/Select';
 import { FormError } from '@@/form-components/FormError';
 import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
@@ -388,12 +387,11 @@ export function IngressForm({
                   </div>
                 )}
                 {host.NoHost && (
-                  <p className="vertical-center text-muted small col-sm-12 !p-0">
-                    <Icon icon={Info} mode="primary" size="md" />A fallback rule
-                    has no host specified. This rule only applies when an
-                    inbound request has a hostname that does not match with any
-                    of your other rules.
-                  </p>
+                  <TextTip color="blue">
+                    A fallback rule has no host specified. This rule only
+                    applies when an inbound request has a hostname that does not
+                    match with any of your other rules.
+                  </TextTip>
                 )}
 
                 <div className="row">
@@ -403,12 +401,11 @@ export function IngressForm({
                 </div>
 
                 {!host.Paths.length && (
-                  <p className="small text-muted vertical-center mt-4 gap-1">
-                    <Icon icon={Info} mode="primary" size="md" />
+                  <TextTip className="mt-2" color="blue">
                     You may save the ingress without a path and it will then be
                     an <b>ingress default</b> that a user may select via the
                     hostname dropdown in Create/Edit application.
-                  </p>
+                  </TextTip>
                 )}
 
                 {host.Paths.map((path, pathIndex) => (