fix(kube): change warning text colour to match figma styling [EE-3045] (#7582)

* update warning text colour, icon and alignment to match figma

app/react/components/PasswordCheckHint.tsx

@@ -16,7 +16,7 @@ export function PasswordCheckHint({
 
   return (
     <div>
-      <p className="text-muted vertical-center">
+      <p className="text-warning vertical-center">
         <Icon icon="alert-triangle" className="icon-warning" feather />
         {forceChangePassword &&
           'An administrator has changed your password requirements, '}

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

@@ -29,29 +29,28 @@ export function FormControl({
   required,
 }: PropsWithChildren<Props>) {
   return (
-    <>
-      <div className={clsx('form-group', styles.container)}>
-        <label
-          htmlFor={inputId}
-          className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
-        >
-          {label}
+    <div className={clsx('form-group', styles.container)}>
+      <label
+        htmlFor={inputId}
+        className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
+      >
+        {label}
 
-          {required && <span className="text-danger">*</span>}
+        {required && <span className="text-danger">*</span>}
 
-          {tooltip && <Tooltip message={tooltip} />}
-        </label>
+        {tooltip && <Tooltip message={tooltip} />}
+      </label>
 
-        <div className={sizeClassChildren(size)}>{children}</div>
-      </div>
-      {errors && (
-        <div className="form-group">
-          <div className="col-md-12">
+      <div className={sizeClassChildren(size)}>
+        {children}
+
+        {errors && (
+          <span className="help-block">
             <FormError>{errors}</FormError>
-          </div>
-        </div>
-      )}
-    </>
+          </span>
+        )}
+      </div>
+    </div>
   );
 }