From 7accdf704ca3ce007ce2a3177108645a0ab2972c Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Thu, 15 Sep 2022 11:09:19 +1200
Subject: [PATCH] fix(kube): change warning text colour to match figma styling
 [EE-3045] (#7582)

* update warning text colour, icon and alignment to match figma
---
 app/assets/css/app.css                        |   2 +-
 app/assets/css/bootstrap-override.css         |   2 +-
 app/assets/css/icon.css                       |   4 +-
 .../imageRegistry/por-image-registry.html     |   2 +-
 .../components/edge-job-form/edgeJobForm.html |  47 ++++----
 app/edge/components/group-form/groupForm.html |  16 +--
 .../create-edge-stack-view.html               |   7 ++
 .../helm-add-repository.html                  |   4 +-
 .../helm/helm-templates/helm-templates.html   |   6 +-
 .../kube-services-item.html                   |  20 ++--
 .../kube-services/kube-services.html          |   4 +-
 .../kubernetesConfigurationData.html          |   4 +-
 .../create/createApplication.html             |  59 +++++-----
 .../views/applications/stats/stats.html       |   4 +-
 app/kubernetes/views/cluster/node/node.html   |   8 +-
 .../create/createConfiguration.html           |   6 +-
 app/kubernetes/views/configure/configure.html |  10 +-
 app/kubernetes/views/deploy/deploy.html       |   2 +-
 .../access/resourcePoolAccess.html            |   2 +-
 .../create/createResourcePool.html            |   8 +-
 .../resource-pools/edit/resourcePool.html     |   6 +-
 .../customTemplateCommonFields.html           |   4 +-
 .../git-form-additional-file-item.html        |   2 +-
 .../git-form-auto-update-fieldset.html        |   4 +-
 .../forms/group-form/groupForm.html           |  18 +--
 .../registry-form-ecr.html                    | 106 +++++++++---------
 .../registry-form-azure.html                  |  80 ++++++-------
 .../registry-form-custom.html                 |  80 ++++++-------
 .../registry-form-dockerhub.html              |  62 +++++-----
 .../registry-form-gitlab.html                 |  72 ++++++------
 .../registry-form-proget.html                 |  98 ++++++++--------
 .../registry-form-quay.html                   |  80 ++++++-------
 app/portainer/views/account/account.html      |   7 +-
 app/portainer/views/init/admin/initAdmin.html |   2 +-
 .../views/stacks/create/createstack.html      |  18 +--
 app/portainer/views/tags/tags.html            |  26 ++---
 app/react/components/PasswordCheckHint.tsx    |   2 +-
 .../FormControl/FormControl.tsx               |  37 +++---
 38 files changed, 467 insertions(+), 454 deletions(-)

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 7a21ad595..96006395d 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -169,7 +169,7 @@ input[type='checkbox'] {
 }
 
 .text-warning {
-  color: #f0ad4e;
+  @apply text-warning-9 th-dark:text-warning-7 th-highcontrast:text-warning-1;
 }
 
 .widget .widget-body table tbody .image-tag {
diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index d81de6a5c..9633f60cb 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -352,7 +352,7 @@ input:checked + .slider:before {
 }
 
 .table .label .label-warn {
-  background-color: var(--ui-warning-8);
+  background-color: var(--ui-warning-9);
 }
 
 .table .label .label-success {
diff --git a/app/assets/css/icon.css b/app/assets/css/icon.css
index 1f0b1d201..c2da0ea15 100644
--- a/app/assets/css/icon.css
+++ b/app/assets/css/icon.css
@@ -67,11 +67,11 @@ pr-icon {
 
 .icon-warning,
 .icon-orange {
-  color: var(--ui-warning-8);
+  @apply text-warning-9 th-dark:text-warning-7 th-highcontrast:text-warning-1;
 }
 
 .icon.icon-warning-alt {
-  fill: var(--ui-warning-8);
+  fill: var(--ui-warning-9);
   stroke: var(--white-color);
 }
 
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index a44b84a0d..0ac636b54 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -61,7 +61,7 @@
     <div class="small">
       <div class="col-sm-3 col-lg-2"></div>
       <div class="col-sm-8" ng-messages="$ctrl.form.image_name.$error">
-        <p class="text-muted vertical-center" ng-message="required">
+        <p class="text-warning vertical-center" ng-message="required">
           <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true" class="vertical-center"></pr-icon> Image name is required.
           <span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span>
         </p>
diff --git a/app/edge/components/edge-job-form/edgeJobForm.html b/app/edge/components/edge-job-form/edgeJobForm.html
index 2cd229adc..86e5a3e60 100644
--- a/app/edge/components/edge-job-form/edgeJobForm.html
+++ b/app/edge/components/edge-job-form/edgeJobForm.html
@@ -15,20 +15,21 @@
         required
         auto-focus
       />
-    </div>
-  </div>
-  <div class="form-group" ng-show="edgeJobForm.edgejob_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="edgeJobForm.edgejob_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
-        </p>
-        <p ng-message="pattern" class="vertical-center">
-          <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
-        </p>
+      <div class="help-block" ng-show="edgeJobForm.edgejob_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="edgeJobForm.edgejob_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+            </p>
+            <p ng-message="pattern" class="vertical-center">
+              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+
   <!-- !name-input -->
   <!-- cron-input -->
   <!-- edge-job-method-select -->
@@ -132,20 +133,20 @@
           required
           ng-pattern="$ctrl.cronRegex"
         />
-      </div>
-      <div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
-    </div>
-    <div class="form-group" ng-show="edgeJobForm.edgejob_cron.$invalid && edgeJobForm.edgejob_cron.$dirty">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="edgeJobForm.edgejob_cron.$error">
-          <p ng-message="required" class="vertical-center">
-            <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
-          </p>
-          <p ng-message="pattern" class="vertical-center">
-            <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field format is invalid.
-          </p>
+        <div class="help-block" ng-show="edgeJobForm.edgejob_cron.$invalid && edgeJobForm.edgejob_cron.$dirty">
+          <div class="small text-warning">
+            <div ng-messages="edgeJobForm.edgejob_cron.$error">
+              <p ng-message="required" class="vertical-center">
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+              </p>
+              <p ng-message="pattern" class="vertical-center">
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field format is invalid.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
+      <div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
     </div>
   </div>
   <!-- !advanced-schedule -->
diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html
index 335f17c1a..145b4ce44 100644
--- a/app/edge/components/group-form/groupForm.html
+++ b/app/edge/components/group-form/groupForm.html
@@ -13,14 +13,14 @@
         data-cy="edgeGroupCreate-groupNameInput"
         placeholder="e.g. mygroup"
       />
-    </div>
-  </div>
-  <div class="form-group" ng-show="EdgeGroupForm.group_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="EdgeGroupForm.group_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon> This field is required.
-        </p>
+      <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="EdgeGroupForm.group_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon> This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
index a8f919cf5..a8618348e 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
@@ -20,6 +20,13 @@
                 required
                 data-cy="edgeStackCreate-nameInput"
               />
+              <div class="help-block" ng-show="$ctrl.form.$invalid">
+                <div class="small text-warning">
+                  <div ng-messages="$ctrl.form.$error">
+                    <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Name is required. </p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <!-- !name-input -->
diff --git a/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html b/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html
index 407c021d9..a12b46fe8 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html
@@ -31,7 +31,7 @@
         <div class="form-group nomargin" ng-show="addUserHelmRepoForm.repo.$invalid">
           <div class="small">
             <div ng-messages="addUserHelmRepoForm.repo.$error">
-              <p class="vertical-center text-muted" ng-message="pattern"
+              <p class="vertical-center text-warning" ng-message="pattern"
                 ><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> A valid URL beginning with http(s) is required.</p
               >
             </div>
@@ -41,7 +41,7 @@
         <div class="form-group nomargin" ng-show="$ctrl.doesRepoExist()">
           <div class="small">
             <div ng-messages="addUserHelmRepoForm.repo.$error">
-              <p class="vertical-center text-muted"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Helm repository already exists.</p>
+              <p class="vertical-center text-warning"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Helm repository already exists.</p>
             </div>
           </div>
         </div>
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.html b/app/kubernetes/components/helm/helm-templates/helm-templates.html
index 6f3b19bf1..aa46a63bf 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates.html
@@ -61,7 +61,7 @@
             </div>
           </div>
           <div class="form-group" ng-if="!$ctrl.state.resourcePool">
-            <div class="col-sm-12 small text-muted vertical-center">
+            <div class="col-sm-12 small text-warning vertical-center">
               <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
               You do not have access to any namespace. Contact your administrator to get access to a namespace.
             </div>
@@ -86,11 +86,11 @@
             <div class="small">
               <div ng-messages="$ctrl.helmTemplateCreationForm.release_name.$error">
                 <div class="col-sm-2"></div>
-                <p class="vertical-center col-sm-10 text-muted" ng-message="required">
+                <p class="vertical-center col-sm-10 text-warning" ng-message="required">
                   <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>
                   This field is required.
                 </p>
-                <p class="vertical-center col-sm-10 text-muted" ng-message="pattern">
+                <p class="vertical-center col-sm-10 text-warning" ng-message="pattern">
                   <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>
                   This field must consist of lower case alphanumeric characters or '-', start with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name',
                   or 'abc-123').
diff --git a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
index 963dfc77a..3b3e4b1fa 100644
--- a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
+++ b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
@@ -1,12 +1,12 @@
 <ng-form name="serviceForm">
   <div ng-if="$ctrl.isAdmin()" class="small" ng-show="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
-    <p class="text-muted pt-2 vertical-center">
+    <p class="text-warning pt-2 vertical-center">
       <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> No Load balancer is available in this cluster, click
       <a class="hyperlink" ui-sref="kubernetes.cluster.setup">here</a> to configure load balancer.
     </p>
   </div>
   <div ng-if="!$ctrl.isAdmin()" class="small" ng-show="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
-    <p class="text-muted pt-2 vertical-center">
+    <p class="text-warning pt-2 vertical-center">
       <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> No Load balancer is available in this cluster, contact your administrator.
     </p>
   </div>
@@ -44,10 +44,10 @@
           />
         </div>
         <span>
-          <div class="small mt-1" ng-if="$ctrl.state.duplicates.targetPort.refs[$index] !== undefined">
+          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.targetPort.refs[$index] !== undefined">
             <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This container port is already used.
           </div>
-          <div class="small mt-1 text-muted" ng-messages="serviceForm['container_port_'+$index].$error">
+          <div class="small mt-1 text-warning" ng-messages="serviceForm['container_port_'+$index].$error">
             <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Container port number is required.</p>
             <p class="vertical-center" ng-message="min"
               ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Container port number must be inside the range 1-65535.</p
@@ -77,10 +77,10 @@
           />
         </div>
         <span>
-          <div class="small mt-1" ng-if="$ctrl.state.duplicates.servicePort.refs[$index] !== undefined">
+          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.servicePort.refs[$index] !== undefined">
             <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This service port is already used.
           </div>
-          <div class="small mt-1 text-muted">
+          <div class="small mt-1 text-warning">
             <div ng-messages="serviceForm['service_port_'+$index].$error">
               <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Service port number is required.</p>
               <p class="vertical-center" ng-message="min"
@@ -112,7 +112,7 @@
         </div>
         <div class="w-full">
           <span>
-            <div class="small mt-1 text-muted">
+            <div class="small mt-1 text-warning">
               <div ng-messages="serviceForm['node_port_'+$index].$error">
                 <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Nodeport is required.</p>
                 <p class="vertical-center" ng-message="min"
@@ -162,7 +162,7 @@
           </select>
         </div>
         <span>
-          <div class="small mt-5 text-muted">
+          <div class="small mt-5 text-warning">
             <div ng-messages="serviceForm['ingress_port_'+$index].$error">
               <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress selection is required.</p>
             </div>
@@ -186,7 +186,7 @@
           </select>
         </div>
         <span>
-          <div class="small mt-1 text-muted">
+          <div class="small mt-1 text-warning">
             <div ng-messages="serviceForm['hostname_port_'+$index].$error">
               <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Hostname is required.</p>
             </div>
@@ -209,7 +209,7 @@
           />
         </div>
         <span>
-          <div class="small mt-1 text-muted">
+          <div class="small mt-1 text-warning">
             <div ng-messages="serviceForm['ingress_route_'+$index].$error">
               <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Route is required.</p>
               <p class="vertical-center" ng-message="pattern"
diff --git a/app/kubernetes/components/kube-services/kube-services.html b/app/kubernetes/components/kube-services/kube-services.html
index dae22072e..f21b21b1e 100644
--- a/app/kubernetes/components/kube-services/kube-services.html
+++ b/app/kubernetes/components/kube-services/kube-services.html
@@ -50,13 +50,13 @@
         Ingress
       </div>
       <div ng-if="$ctrl.isAdmin()" class="small">
-        <p class="text-muted pt-2 vertical-center">
+        <p class="text-warning pt-2 vertical-center">
           <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress is not configured in this namespace, select another namespace or click
           <a ui-sref="kubernetes.cluster.setup">here</a> to configure ingress.
         </p>
       </div>
       <div ng-if="!$ctrl.isAdmin()" class="small">
-        <p class="text-muted pt-2 vertical-center">
+        <p class="text-warning pt-2 vertical-center">
           <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress is not configured in this namespace, select another namespace or contact your
           administrator.
         </p>
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 2641df977..223135a7c 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -46,7 +46,7 @@
           ng-change="$ctrl.onChangeKey(entry)"
         />
         <div
-          class="small text-muted"
+          class="small text-warning"
           style="margin-top: 5px"
           ng-show="
             kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
@@ -85,7 +85,7 @@
           ng-trim="false"
           required
         ></textarea>
-        <div class="small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
+        <div class="small text-warning" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
           <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
             <p ng-message="required" class="vertical-center"
               ><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index ec6719723..9a42dabfa 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -71,7 +71,7 @@
                 </div>
               </div>
               <div class="form-group" ng-if="!ctrl.formValues.ResourcePool">
-                <div class="col-sm-12 small text-muted">
+                <div class="col-sm-12 small text-warning">
                   <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
                   You do not have access to any namespace. Contact your administrator to get access to a namespace.
                 </div>
@@ -147,17 +147,17 @@
                   <div class="small">
                     <div class="col-sm-3 col-lg-2">&nbsp;</div>
                     <div class="col-sm-8" ng-messages="kubernetesApplicationCreationForm.application_name.$error">
-                      <p class="text-muted vertical-center" ng-message="required"
+                      <p class="text-warning vertical-center" ng-message="required"
                         ><pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p
                       >
-                      <p class="text-muted vertical-center" ng-message="pattern">
+                      <p class="text-warning vertical-center" ng-message="pattern">
                         <pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
                         This field must consist of lower case alphanumeric characters or '-', contain at most 63 characters, start with an alphabetic character, and end with an
                         alphanumeric character (e.g. 'my-name', or 'abc-123').
                       </p>
                     </div>
                     <div class="col-sm-8" ng-if="ctrl.state.alreadyExists">
-                      <p class="text-muted vertical-center">
+                      <p class="text-warning vertical-center">
                         <pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
                         An application with the same name already exists inside the selected namespace.
                       </p>
@@ -299,15 +299,15 @@
                               "
                             >
                               <ng-messages for="kubernetesApplicationCreationForm['environment_variable_name_' + $index].$error">
-                                <p ng-message="required" class="text-muted vertical-center"
+                                <p ng-message="required" class="text-warning vertical-center"
                                   ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true" class-="vertical-center"></pr-icon> Environment variable name is required.</p
                                 >
-                                <p ng-message="pattern" class="text-muted vertical-center"
+                                <p ng-message="pattern" class="text-warning vertical-center"
                                   ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field must consist of alphabetic characters, digits, '_', '-',
                                   or '.', and must not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.</p
                                 >
                               </ng-messages>
-                              <p class="text-muted vertical-center" ng-if="ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined"
+                              <p class="text-warning vertical-center" ng-if="ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined"
                                 ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This environment variable is already defined.</p
                               >
                             </div>
@@ -430,7 +430,7 @@
                                 ctrl.state.duplicates.configurationPaths.refs[index + '_' + keyIndex] !== undefined
                               "
                             >
-                              <div class="input-group input-group-sm text-muted" ng-if="overridenKey.Type === ctrl.ApplicationConfigurationFormValueOverridenKeyTypes.FILESYSTEM">
+                              <div class="input-group input-group-sm text-warning" ng-if="overridenKey.Type === ctrl.ApplicationConfigurationFormValueOverridenKeyTypes.FILESYSTEM">
                                 <div
                                   class="small"
                                   style="margin-top: 5px"
@@ -643,7 +643,7 @@
                       >
                         <div class="input-group col-sm-3 input-group-sm">
                           <div
-                            class="small text-muted"
+                            class="small text-warning"
                             style="margin-top: 5px"
                             ng-show="
                               kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid || ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined
@@ -660,7 +660,7 @@
 
                         <div class="input-group col-sm-offset-2 col-sm-3 input-group-sm">
                           <div
-                            class="small text-muted"
+                            class="small text-warning"
                             style="margin-top: 5px"
                             ng-show="
                               kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid || ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined
@@ -855,7 +855,7 @@
                   </div>
                   <div class="form-group" ng-show="kubernetesApplicationCreationForm.memory_limit.$invalid">
                     <div class="col-sm-3 col-lg-2"></div>
-                    <div class="col-sm-8 small text-muted">
+                    <div class="col-sm-8 small text-warning">
                       <div ng-messages="kubernetesApplicationCreationForm.memory_limit.$error">
                         <p class="vertical-center"
                           ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Value must be between {{ ctrl.state.sliders.memory.min }} and
@@ -959,9 +959,9 @@
                   <!-- !deployment options -->
 
                   <!-- replica count -->
-                  <div class="form-group form-inline" ng-if="ctrl.formValues.DeploymentType === ctrl.ApplicationDeploymentTypes.REPLICATED">
-                    <div class="col-sm-12 vertical-center">
-                      <label class="control-label text-left !pt-0"> Instance count </label>
+                  <div class="form-group" ng-if="ctrl.formValues.DeploymentType === ctrl.ApplicationDeploymentTypes.REPLICATED">
+                    <label for="replica_count" class="col-sm-1 control-label text-left">Instance count</label>
+                    <div class="col-sm-2">
                       <input
                         type="number"
                         name="replica_count"
@@ -969,23 +969,24 @@
                         min="1"
                         max="9999"
                         placeholder="1"
-                        style="margin-left: 20px"
                         ng-model="ctrl.formValues.ReplicaCount"
                         ng-disabled="!ctrl.supportScalableReplicaDeployment()"
                         ng-change="ctrl.enforceReplicaCountMinimum()"
                         required
                         data-cy="k8sAppCreate-replicaCountInput"
                       />
-                    </div>
-                  </div>
-                  <div class="form-group" ng-if="kubernetesApplicationCreationForm['replica_count'].$invalid">
-                    <div class="col-sm-12 small text-muted">
-                      <ng-messages for="kubernetesApplicationCreationForm['replica_count'].$error">
-                        <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Instance count is required.</p>
-                        <p class="vertical-center" ng-message="min"
-                          ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Instance count must be greater than 0.</p
-                        >
-                      </ng-messages>
+                      <div class="help-block" ng-if="kubernetesApplicationCreationForm['replica_count'].$invalid">
+                        <div class="small text-warning whitespace-nowrap">
+                          <ng-messages for="kubernetesApplicationCreationForm['replica_count'].$error">
+                            <p class="vertical-center" ng-message="required"
+                              ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Instance count is required.</p
+                            >
+                            <p class="vertical-center" ng-message="min"
+                              ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Instance count must be greater than 0.</p
+                            >
+                          </ng-messages>
+                        </div>
+                      </div>
                     </div>
                   </div>
                   <!-- !replica count -->
@@ -1077,7 +1078,7 @@
                           />
                         </div>
                         <span ng-show="kubernetesApplicationCreationForm['auto_scaler_min'].$invalid">
-                          <div class="small text-muted" style="margin-top: 5px">
+                          <div class="small text-warning" style="margin-top: 5px">
                             <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_min'].$error">
                               <p ng-message="required" class="vertical-center">
                                 <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances is required.
@@ -1104,7 +1105,7 @@
                           />
                         </div>
                         <span ng-show="kubernetesApplicationCreationForm['auto_scaler_max'].$invalid || ctrl.autoScalerOverflow()">
-                          <div class="small text-muted" style="margin-top: 5px">
+                          <div class="small text-warning" style="margin-top: 5px">
                             <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_max'].$error">
                               <p ng-message="required" class="vertical-center">
                                 <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Maximum instances is required.
@@ -1135,7 +1136,7 @@
                           />
                         </div>
                         <span ng-show="kubernetesApplicationCreationForm['auto_scaler_cpu'].$invalid">
-                          <div class="small text-muted" style="margin-top: 5px">
+                          <div class="small text-warning" style="margin-top: 5px">
                             <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_cpu'].$error">
                               <p ng-message="required" class="vertical-center">
                                 <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage is required.
@@ -1225,7 +1226,7 @@
                         </div>
                         <div ng-repeat-end ng-show="ctrl.state.duplicates.placements.refs[$index] !== undefined">
                           <div class="col-sm-5 input-group">
-                            <div class="small text-muted" style="margin-top: 5px" ng-if="ctrl.state.duplicates.placements.refs[$index] !== undefined">
+                            <div class="small text-warning" style="margin-top: 5px" ng-if="ctrl.state.duplicates.placements.refs[$index] !== undefined">
                               <p class="vertical-center" ng-if="ctrl.state.duplicates.placements.refs[$index] !== undefined">
                                 <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This label is already defined.
                               </p>
diff --git a/app/kubernetes/views/applications/stats/stats.html b/app/kubernetes/views/applications/stats/stats.html
index 9541b9c0d..b0b849d4c 100644
--- a/app/kubernetes/views/applications/stats/stats.html
+++ b/app/kubernetes/views/applications/stats/stats.html
@@ -28,7 +28,7 @@
 
 <div ng-if="ctrl.state.viewReady">
   <information-panel ng-if="!ctrl.state.getMetrics" title-text="Unable to retrieve container metrics">
-    <span class="small text-muted vertical-center">
+    <span class="small text-warning vertical-center">
       <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
       Portainer was unable to retrieve any metrics associated to that container. Please contact your administrator to ensure that the Kubernetes metrics feature is properly
       configured.
@@ -47,7 +47,7 @@
           <form class="form-horizontal">
             <div class="form-group">
               <div class="col-sm-12">
-                <span class="small text-muted">
+                <span class="small text-warning">
                   This view displays real-time statistics about the container <b>{{ ctrl.state.transition.containerName | trimcontainername }}</b
                   >.
                 </span>
diff --git a/app/kubernetes/views/cluster/node/node.html b/app/kubernetes/views/cluster/node/node.html
index 21578ff46..c64e7dfb2 100644
--- a/app/kubernetes/views/cluster/node/node.html
+++ b/app/kubernetes/views/cluster/node/node.html
@@ -57,11 +57,11 @@
                             <option>{{ ctrl.availabilities.PAUSE }}</option>
                             <option>{{ ctrl.availabilities.DRAIN }}</option>
                           </select>
-                          <div class="small text-muted vertical-center" ng-if="ctrl.state.isDrainOperation && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
+                          <div class="small text-warning vertical-center" ng-if="ctrl.state.isDrainOperation && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
                             <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                             Cannot use this action while another node is currently being drained.
                           </div>
-                          <div class="small text-muted vertical-center" ng-if="ctrl.state.isContainPortainer && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
+                          <div class="small text-warning vertical-center" ng-if="ctrl.state.isContainPortainer && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
                             <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                             Cannot drain a node where this Portainer instance is running.
                           </div>
@@ -135,7 +135,7 @@
                         <span class="label label-info image-tag" ng-if="ctrl.isSystemLabel($index)" style="margin-left: 5px">system</span>
                       </div>
                     </div>
-                    <div class="small mt-2 text-muted" ng-show="kubernetesNodeUpdateForm['label_key_' + $index].$invalid || ctrl.state.duplicateLabelKeys[$index] !== undefined">
+                    <div class="small mt-2 text-warning" ng-show="kubernetesNodeUpdateForm['label_key_' + $index].$invalid || ctrl.state.duplicateLabelKeys[$index] !== undefined">
                       <ng-messages for="kubernetesNodeUpdateForm['label_key_' + $index].$error">
                         <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Label key is required. </p>
                       </ng-messages>
@@ -185,7 +185,7 @@
                       </div>
                     </div>
                     <div
-                      class="small text-muted"
+                      class="small text-warning"
                       style="margin-top: 5px"
                       ng-show="kubernetesNodeUpdateForm['taint_key_' + $index].$invalid || ctrl.state.duplicateTaintKeys[$index] !== undefined"
                     >
diff --git a/app/kubernetes/views/configurations/create/createConfiguration.html b/app/kubernetes/views/configurations/create/createConfiguration.html
index 3c22b350f..0e2244613 100644
--- a/app/kubernetes/views/configurations/create/createConfiguration.html
+++ b/app/kubernetes/views/configurations/create/createConfiguration.html
@@ -33,7 +33,7 @@
             </div>
             <div class="form-group" ng-show="kubernetesConfigurationCreationForm.configuration_name.$invalid || ctrl.state.alreadyExist">
               <div class="col-sm-3 col-lg-2"></div>
-              <div class="col-sm-8 col-lg-9 small text-muted">
+              <div class="col-sm-8 col-lg-9 small text-warning">
                 <div ng-messages="kubernetesConfigurationCreationForm.configuration_name.$error">
                   <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
                   <p ng-message="pattern" class="vertical-center"
@@ -65,14 +65,14 @@
               </div>
             </div>
             <div class="form-group" ng-if="ctrl.state.resourcePoolHasQuota && ctrl.resourceQuotaCapacityExceeded()">
-              <div class="col-sm-12 small text-muted vertical-center">
+              <div class="col-sm-12 small text-warning vertical-center">
                 <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                 This namespace has exhausted its resource capacity and you will not be able to deploy the configuration. Contact your administrator to expand the capacity of the
                 namespace.
               </div>
             </div>
             <div class="form-group" ng-if="!ctrl.formValues.ResourcePool">
-              <div class="col-sm-12 small text-muted vertical-center">
+              <div class="col-sm-12 small text-warning vertical-center">
                 <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                 You do not have access to any namespace. Contact your administrator to get access to a namespace.
               </div>
diff --git a/app/kubernetes/views/configure/configure.html b/app/kubernetes/views/configure/configure.html
index f74350fc0..b45c1ab46 100644
--- a/app/kubernetes/views/configure/configure.html
+++ b/app/kubernetes/views/configure/configure.html
@@ -118,15 +118,15 @@
                       ng-if="kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid || ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined"
                     >
                       <div ng-messages="kubernetesClusterSetupForm['ingress_class_name_'+$index].$error">
-                        <p ng-message="required" class="vertical-center text-muted"
+                        <p ng-message="required" class="vertical-center text-warning"
                           ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress class name is required.</p
                         >
-                        <p ng-message="pattern" class="vertical-center text-muted"
+                        <p ng-message="pattern" class="vertical-center text-warning"
                           ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field must consist of lower case alphanumeric characters or '-', start
                           with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').</p
                         >
                       </div>
-                      <p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" class="vertical-center text-muted">
+                      <p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" class="vertical-center text-warning">
                         <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This ingress class is already defined.
                       </p>
                     </div>
@@ -134,7 +134,7 @@
                   <div class="col-sm-3 input-group">
                     <div class="small" style="margin-top: 5px" ng-if="kubernetesClusterSetupForm['ingress_class_type_' + $index].$invalid">
                       <div ng-messages="kubernetesClusterSetupForm['ingress_class_type_'+$index].$error">
-                        <p ng-message="required" class="vertical-center text-muted"
+                        <p ng-message="required" class="vertical-center text-warning"
                           ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress class type is required.</p
                         >
                       </div>
@@ -166,7 +166,7 @@
                   tooltip="'Specify a timeframe during which automatic updates can occur in this environment.'"
                   on-change="(ctrl.onToggleAutoUpdate)"
                   label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
-                  switch-class="'col-sm-8'"
+                  switch-class="'col-sm-8 text-muted'"
                 >
                 </por-switch-field>
               </div>
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index bd3d1025c..e195f2d47 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -41,7 +41,7 @@
                   </div>
                 </div>
                 <div class="form-group" ng-if="!ctrl.formValues.Namespace">
-                  <div class="col-sm-12 small text-muted">
+                  <div class="col-sm-12 small text-warning">
                     <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                     You do not have access to any namespace. Contact your administrator to get access to a namespace.
                   </div>
diff --git a/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html b/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
index beffcb04e..e0e008e54 100644
--- a/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
+++ b/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
@@ -44,7 +44,7 @@
         <rd-widget-body>
           <form class="form-horizontal">
             <div class="form-group">
-              <span class="col-sm-12 small text-muted">
+              <span class="col-sm-12 small text-warning">
                 <p class="vertical-center">
                   <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                   Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index 2d6e886a6..699cdbba5 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -31,7 +31,7 @@
                 />
                 <span class="help-block">
                   <div class="form-group" ng-show="resourcePoolCreationForm.pool_name.$invalid || $ctrl.state.isAlreadyExist || $ctrl.state.hasPrefixKube">
-                    <div class="col-sm-12 small text-muted">
+                    <div class="col-sm-12 small text-warning">
                       <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                         <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>This field is required.</p>
                         <p class="vertical-center" ng-message="pattern"
@@ -80,7 +80,7 @@
               <div class="col-sm-12 form-section-title"> Resource limits </div>
               <div>
                 <div class="form-group">
-                  <span class="col-sm-12 small text-muted" ng-switch on="$ctrl.formValues.HasQuota && !$ctrl.isQuotaValid()">
+                  <span class="col-sm-12 small text-warning" ng-switch on="$ctrl.formValues.HasQuota && !$ctrl.isQuotaValid()">
                     <p class="vertical-center mb-0" ng-switch-when="true"
                       ><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> At least a single limit must be set for the quota to be
                       valid.
@@ -121,7 +121,7 @@
                   <span class="col-sm-3 col-lg-2"></span>
                   <span class="help-block col-sm-9 col-lg-10">
                     <div ng-show="resourcePoolCreationForm.memory_limit.$invalid">
-                      <div class="small text-muted">
+                      <div class="small text-warning">
                         <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                           <p class="vertical-center"
                             ><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between
@@ -276,7 +276,7 @@
                         </div>
                       </div>
                       <div
-                        class="small text-muted pt-1"
+                        class="small text-warning pt-1"
                         ng-show="
                           resourcePoolCreationForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid ||
                           $ctrl.state.duplicates.ingressHosts.refs[ic.IngressClass.Name][$index] !== undefined
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index cef585b75..cd612187c 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -51,7 +51,7 @@
                   </div>
                 </div>
                 <div class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()">
-                  <div class="col-sm-12 small text-muted">
+                  <div class="col-sm-12 small text-warning">
                     <p class="vertical-center">
                       <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                       Not enough resources available in the cluster to apply a resource reservation.
@@ -103,7 +103,7 @@
                     </div>
                     <div class="form-group" ng-show="resourcePoolEditForm.memory_limit.$invalid">
                       <div class="col-sm-3 col-lg-2"></div>
-                      <div class="col-sm-8 small text-muted">
+                      <div class="col-sm-8 small text-warning">
                         <div ng-messages="resourcePoolEditForm.pool_name.$error">
                           <p class="vertical-center">
                             <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
@@ -237,7 +237,7 @@
                             </div>
                           </div>
                           <div
-                            class="small text-muted"
+                            class="small text-warning"
                             style="margin-top: 5px"
                             ng-show="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid || item.Duplicate"
                           >
diff --git a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
index 8c10a56c9..7fdcf4003 100644
--- a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
+++ b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
@@ -16,7 +16,7 @@
       />
       <span class="help-block">
         <div ng-show="commonCustomTemplateForm.template_title.$invalid">
-          <div class="mt-2 small text-muted">
+          <div class="mt-2 small text-warning">
             <div ng-messages="commonCustomTemplateForm.template_title.$error">
               <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Title is required. </p>
               <p class="vertical-center" ng-message="pattern">
@@ -37,7 +37,7 @@
     <div class="col-sm-8">
       <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
       <span class="help-block">
-        <div class="mt-2 small text-muted">
+        <div class="mt-2 small text-warning">
           <div ng-show="commonCustomTemplateForm.description.$invalid">
             <div ng-messages="commonCustomTemplateForm.description.$error">
               <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Description is required.</p>
diff --git a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
index c175cccc5..a984380c8 100644
--- a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
+++ b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
@@ -10,7 +10,7 @@
       </button>
     </div>
     <div ng-show="$ctrl[$ctrl.formName].name.$invalid">
-      <div class="small text-muted">
+      <div class="small text-warning">
         <div ng-messages="$ctrl[$ctrl.formName].name.$error" class="mt-1">
           <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Path is required. </p>
         </div>
diff --git a/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html b/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
index 76658a60f..2dc328e14 100644
--- a/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
+++ b/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
@@ -13,7 +13,7 @@
   </div>
   <div class="small vertical-center" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
     <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-    <span class="text-muted"
+    <span class="text-warning"
       >Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption. Do you wish to continue?</span
     >
   </div>
@@ -60,7 +60,7 @@
       />
       <div class="help-group">
         <div class="form-group col-md-12 pt-1" ng-show="autoUpdateForm.repository_fetch_interval.$touched && autoUpdateForm.repository_fetch_interval.$invalid">
-          <div class="small text-muted">
+          <div class="small text-warning">
             <div ng-messages="autoUpdateForm.repository_fetch_interval.$error">
               <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
               <p ng-message="invalidIntervalFormat"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Please enter a valid time interval.</p>
diff --git a/app/portainer/components/forms/group-form/groupForm.html b/app/portainer/components/forms/group-form/groupForm.html
index b23083792..e3b71c942 100644
--- a/app/portainer/components/forms/group-form/groupForm.html
+++ b/app/portainer/components/forms/group-form/groupForm.html
@@ -4,15 +4,15 @@
     <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="endpointGroupForm.group_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="endpointGroupForm.group_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="endpointGroupForm.group_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="endpointGroupForm.group_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
index d471c6d2e..cf0fe009c 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
@@ -14,19 +14,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormEcr.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormEcr.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -48,15 +48,15 @@
         placeholder="aws-account-id.dkr.ecr.us-east-1.amazonaws.com/"
         required
       />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormEcr.registry_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormEcr.registry_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -84,15 +84,15 @@
       <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormEcr.registry_access_key.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormEcr.registry_access_key.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -103,15 +103,15 @@
       <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Secret Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_secret_access_key" name="registry_secret_access_key" ng-model="$ctrl.model.Password" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_secret_access_key.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormEcr.registry_secret_access_key.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_secret_access_key.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormEcr.registry_secret_access_key.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -122,19 +122,19 @@
       <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left required">Region</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormEcr.registry_region.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
-          <p ng-message="used" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            A registry with the same name already exists.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormEcr.registry_region.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+              <p ng-message="used" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                A registry with the same name already exists.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
index 811bb2a86..32fe9ed6a 100644
--- a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
+++ b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
@@ -5,19 +5,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormAzure.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormAzure.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -30,15 +30,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="myproject.azurecr.io" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormAzure.registry_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormAzure.registry_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -48,15 +48,15 @@
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormAzure.registry_username.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormAzure.registry_username.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -66,15 +66,15 @@
     <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_password.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormAzure.registry_password.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_password.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormAzure.registry_password.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
index 9a9ece6b1..2630b3536 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
@@ -12,19 +12,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-custom-registry" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormCustom.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormCustom.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -37,15 +37,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="10.0.0.10:5000 or myregistry.domain.tld" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormCustom.registry_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormCustom.registry_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -71,15 +71,15 @@
       <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormCustom.registry_username.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormCustom.registry_username.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -89,15 +89,15 @@
       <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_password.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormCustom.registry_password.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_password.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormCustom.registry_password.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
index c5f7e2c37..24e5a1b30 100644
--- a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
+++ b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
@@ -14,19 +14,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormDockerhub.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormDockerhub.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -36,15 +36,15 @@
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormDockerhub.registry_username.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormDockerhub.registry_username.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -54,15 +54,15 @@
     <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub access token</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_password.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormDockerhub.registry_password.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_password.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormDockerhub.registry_password.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
index 5c289533d..f290d8f4f 100644
--- a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
+++ b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
@@ -14,15 +14,15 @@
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="registryFormGitlab.registry_username.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="registryFormGitlab.registry_username.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="registryFormGitlab.registry_username.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="registryFormGitlab.registry_username.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -32,15 +32,15 @@
     <label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left required">Personal Access Token </label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_perso_acc_token" name="registry_perso_acc_token" ng-model="$ctrl.model.Token" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="registryFormGitlab.registry_perso_acc_token.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="registryFormGitlab.registry_perso_acc_token.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="registryFormGitlab.registry_perso_acc_token.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="registryFormGitlab.registry_perso_acc_token.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,15 +77,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="instance_url" name="instance_url" ng-model="$ctrl.model.Gitlab.InstanceURL" placeholder="https://gitlab.com" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="registryFormGitlab.instance_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="registryFormGitlab.instance_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="registryFormGitlab.instance_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="registryFormGitlab.instance_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -98,15 +98,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="https://registry.gitlab.com" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="registryFormGitlab.registry_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="registryFormGitlab.registry_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="registryFormGitlab.registry_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="registryFormGitlab.registry_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
index d126e35d4..e5e4aed62 100644
--- a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
+++ b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
@@ -12,19 +12,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="proget-registry" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormProGet.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormProGet.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -37,15 +37,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="proget.example.com/example-registry" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormProGet.registry_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormProGet.registry_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -58,15 +58,15 @@
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_base_url" name="registry_base_url" ng-model="$ctrl.model.BaseURL" placeholder="proget.example.com" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_base_url.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormProGet.registry_base_url.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_base_url.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormProGet.registry_base_url.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,15 +77,15 @@
       <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormProGet.registry_username.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormProGet.registry_username.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -95,15 +95,15 @@
       <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_password.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormProGet.registry_password.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_password.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormProGet.registry_password.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
index 54eb91460..103f3014e 100644
--- a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
+++ b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
@@ -5,19 +5,19 @@
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormQuay.registry_name.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
-        <p ng-message="used" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          A registry with the same name already exists.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormQuay.registry_name.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+            <p ng-message="used" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              A registry with the same name already exists.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -27,15 +27,15 @@
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormQuay.registry_username.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormQuay.registry_username.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -45,15 +45,15 @@
     <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_password.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="$ctrl.registryFormQuay.registry_password.$error">
-        <p ng-message="required" class="vertical-center">
-          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-          This field is required.
-        </p>
+      <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_password.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="$ctrl.registryFormQuay.registry_password.$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+              This field is required.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,15 +77,15 @@
       <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left required">Organisation name</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
-      </div>
-    </div>
-    <div class="form-group" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
-      <div class="col-sm-12 small text-warning">
-        <div ng-messages="$ctrl.registryFormQuay.organisation_name.$error">
-          <p ng-message="required" class="vertical-center">
-            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
-            This field is required.
-          </p>
+        <div class="help-block" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
+          <div class="small text-warning">
+            <div ng-messages="$ctrl.registryFormQuay.organisation_name.$error">
+              <p ng-message="required" class="vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+                This field is required.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html
index 00faa05d6..9a7ad3662 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -38,7 +38,12 @@
               </div>
             </div>
           </div>
-          <password-check-hint password-valid="form.new_password.$valid && formValues.newPassword" force-change-password="forceChangePassword"></password-check-hint>
+          <div class="form-group">
+            <div class="col-sm-3 col-lg-2"></div>
+            <div class="col-sm-8">
+              <password-check-hint password-valid="form.new_password.$valid && formValues.newPassword" force-change-password="forceChangePassword"></password-check-hint>
+            </div>
+          </div>
           <!-- !confirm-password-input -->
           <div class="form-group">
             <div class="col-sm-12">
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index 88f46d8bd..eb66d535c 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -70,7 +70,7 @@
             <!-- !confirm-password-input -->
             <!-- note -->
             <div class="form-group">
-              <div class="col-sm-12 text-muted">
+              <div class="col-sm-12 text-warning">
                 <p class="vertical-center">
                   <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                   <span>The password must be at least {{ requiredPasswordLength }} characters long.</span>
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index 8537da978..012b80b3c 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -19,15 +19,15 @@
                 auto-focus
                 ng-pattern="STACK_NAME_VALIDATION_REGEX"
               />
-            </div>
-          </div>
-          <div class="form-group" ng-show="createStackForm.stack_name.$invalid">
-            <div class="col-sm-12 small text-warning">
-              <div ng-messages="createStackForm.stack_name.$error">
-                <p ng-message="pattern">
-                  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-                  <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
-                </p>
+              <div class="help-block" ng-show="createStackForm.stack_name.$invalid">
+                <div class="small text-warning">
+                  <div ng-messages="createStackForm.stack_name.$error">
+                    <p ng-message="pattern">
+                      <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span>
+                      This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/app/portainer/views/tags/tags.html b/app/portainer/views/tags/tags.html
index 37e17a598..ab09efaec 100644
--- a/app/portainer/views/tags/tags.html
+++ b/app/portainer/views/tags/tags.html
@@ -20,19 +20,19 @@
                 required
                 auto-focus
               />
-            </div>
-          </div>
-          <div class="form-group" ng-show="tagCreationForm.name.$invalid">
-            <div class="col-sm-12 small text-warning">
-              <div ng-messages="tagCreationForm.name.$error">
-                <p ng-message="required" class="vertical-center">
-                  <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-                  This field is required.
-                </p>
-                <p ng-message="validName" class="vertical-center">
-                  <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-                  This tag already exists.
-                </p>
+              <div class="help-block" ng-show="tagCreationForm.name.$invalid">
+                <div class="small text-warning">
+                  <div ng-messages="tagCreationForm.name.$error">
+                    <p ng-message="required" class="vertical-center">
+                      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                      This field is required.
+                    </p>
+                    <p ng-message="validName" class="vertical-center">
+                      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                      This tag already exists.
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/app/react/components/PasswordCheckHint.tsx b/app/react/components/PasswordCheckHint.tsx
index 069fe6d2d..d75da6a7d 100644
--- a/app/react/components/PasswordCheckHint.tsx
+++ b/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, '}
diff --git a/app/react/components/form-components/FormControl/FormControl.tsx b/app/react/components/form-components/FormControl/FormControl.tsx
index 1717621b9..81b7d3847 100644
--- a/app/react/components/form-components/FormControl/FormControl.tsx
+++ b/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>
   );
 }