port changes from EE (#9003)

app/react/components/Tip/TextTip/TextTip.tsx

@@ -26,11 +26,16 @@ export function TextTip({
     <div
       className={clsx(
         className,
-        'small items-center gap-1',
+        'small gap-1 align-top text-xs',
         inline ? 'inline-flex' : 'flex'
       )}
     >
-      <Icon icon={icon} mode={getMode(color)} className="!mt-[2px]" />
+      <Icon
+        icon={icon}
+        mode={getMode(color)}
+        size="sm"
+        className="!mt-0.5 flex-none"
+      />
 
       <span className={childrenWrapperClassName}>{children}</span>
     </div>

app/react/components/form-components/FormError.tsx

@@ -10,11 +10,19 @@ interface Props {
 
 export function FormError({ children, className }: PropsWithChildren<Props>) {
   return (
-    <p
-      className={clsx(`text-muted small vertical-center help-block`, className)}
+    <div
+      className={clsx(
+        `text-muted help-block !inline-flex gap-1 !align-top text-xs`,
+        className
+      )}
     >
-      <Icon icon={AlertTriangle} className="icon-warning shrink-0" />
-      <span className="text-warning">{children}</span>
-    </p>
+      <Icon
+        icon={AlertTriangle}
+        mode="warning"
+        size="sm"
+        className="flex-none"
+      />
+      <div className="text-warning">{children}</div>
+    </div>
   );
 }

app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx

@@ -11,6 +11,7 @@ import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { Button } from '@@/buttons';
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { Annotations } from './Annotations';
 import { Rule, ServicePorts } from './types';
@@ -370,9 +371,8 @@ export function IngressForm({
                       </div>
                     </div>
 
-                    <p className="vertical-center text-muted small col-sm-12 whitespace-nowrap !p-0">
-                      <Icon icon={Info} mode="primary" size="md" />
-                      <span>
+                    <div className="col-sm-12 p-0">
+                      <TextTip color="blue">
                         Add a secret via{' '}
                         <Link
                           to="kubernetes.configurations"
@@ -385,8 +385,8 @@ export function IngressForm({
                         {', '}
                         then select &apos;Reload TLS secrets&apos; above to
                         populate the dropdown with your changes.
-                      </span>
-                    </p>
+                      </TextTip>
+                    </div>
                   </div>
                 )}
                 {host.NoHost && (