port changes from EE (#9003)

app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html

@@ -11,9 +11,11 @@
     <div class="actionBar">
       <form class="form-horizontal" name="addUserHelmRepoForm">
         <div class="form-group">
-          <span class="col-sm-12 text-muted small">
+          <span class="col-sm-12 text-muted small inline-flex gap-1 !align-top">
-            <pr-icon icon="'info'" mode="'primary'"></pr-icon>
+            <div class="icon icon-sm">
-            Add a Helm repository. All Helm charts in the repository will be added to the list.
+              <pr-icon icon="'info'" mode="'primary'"></pr-icon>
+            </div>
+            <div> Add a Helm repository. All Helm charts in the repository will be added to the list. </div>
           </span>
         </div>
 

app/kubernetes/views/configure/configure.html

@@ -27,13 +27,13 @@
             <div class="form-group">
               <div class="col-sm-12 text-muted small">
                 <p> Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider. </p>
-                <p class="vertical-center mt-1">
+                <div class="!inline-flex gap-1 !align-top">
-                  <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
+                  <div class="icon icon-sm"><pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon></div>
-                  Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
+                  <div>Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.</div>
-                </p>
+                </div>
               </div>
 
-              <div class="col-sm-12">
+              <div class="col-sm-12 mt-4">
                 <label class="control-label col-sm-5 col-lg-4 px-0 text-left"> Allow users to use external load balancer </label>
                 <label class="switch col-sm-8 mb-0">
                   <input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><span class="slider round" data-cy="kubeSetup-loadBalancerToggle"></span>
@@ -185,14 +185,16 @@
                   By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
                   deployment failures if there is insufficient resource to service demand.
                 </p>
-                <p class="vertical-center mt-1">
+                <div class="mt-1 inline-flex gap-1 !align-top">
-                  <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
+                  <div class="icon icon-sm"><pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon></div>
-                  By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
+                  <div
-                  minus any system resource reservation.
+                    >By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
-                </p>
+                    minus any system resource reservation.</div
+                  >
+                </div>
               </div>
 
-              <div class="col-sm-12">
+              <div class="col-sm-12 mt-2">
                 <por-switch-field
                   data-cy="'kubeSetup-resourceOverCommitToggle'"
                   label="'Allow resource over-commit'"
@@ -209,11 +211,14 @@
             <div class="form-group">
               <div class="col-sm-12 text-muted small">
                 <p> Enabling this feature will allow users to use specific features like autoscaling and to see container and node resource usage. </p>
-                <p class="vertical-center mt-1">
+                <div class="mt-1 !inline-flex gap-1 !align-top">
-                  <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
+                  <div class="icon icon-small"><pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon></div>
-                  Ensure that <a href="https://kubernetes.io/docs/tasks/debug-application-cluster/resource-metrics-pipeline/#metrics-server" target="_blank">metrics server</a> or
+                  <div
-                  <a href="https://github.com/kubernetes-sigs/prometheus-adapter" target="_blank">prometheus</a> is running inside your cluster.
+                    >Ensure that
-                </p>
+                    <a href="https://kubernetes.io/docs/tasks/debug-application-cluster/resource-metrics-pipeline/#metrics-server" target="_blank">metrics server</a> or
+                    <a href="https://github.com/kubernetes-sigs/prometheus-adapter" target="_blank">prometheus</a> is running inside your cluster.</div
+                  >
+                </div>
               </div>
             </div>
             <div class="form-group">

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
+    <div
-      className={clsx(`text-muted small vertical-center help-block`, className)}
+      className={clsx(
+        `text-muted help-block !inline-flex gap-1 !align-top text-xs`,
+        className
+      )}
     >
-      <Icon icon={AlertTriangle} className="icon-warning shrink-0" />
+      <Icon
-      <span className="text-warning">{children}</span>
+        icon={AlertTriangle}
-    </p>
+        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">
+                    <div className="col-sm-12 p-0">
-                      <Icon icon={Info} mode="primary" size="md" />
+                      <TextTip color="blue">
-                      <span>
                         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>
+                      </TextTip>
-                    </p>
+                    </div>
                   </div>
                 )}
                 {host.NoHost && (