fix(styles): improve styling of form-section-title [EE-5366] (#10250)

app/assets/css/app.css

@@ -84,16 +84,20 @@ body,
 
 .form-section-title {
   @apply text-gray-9;
-  @apply th-dark:text-gray-5;
+  @apply th-dark:text-white;
   @apply th-highcontrast:text-white;
 
-  margin-top: 5px;
+  margin-top: 20px;
   margin-bottom: 10px;
   padding-left: 0;
   font-weight: 500;
   font-size: 16px;
 }
 
+.form-section-title:first-child {
+  margin-top: 5px;
+}
+
 .form-horizontal .control-label.text-left,
 .form-row .control-label.text-left {
   text-align: left;

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -5,7 +5,7 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.form">
-          <div class="col-sm-12 form-section-title"> Host and Filesystem </div>
+          <div class="col-sm-12 form-section-title"> Host and filesystem </div>
           <div ng-if="!$ctrl.isAgent" class="form-group">
             <span class="col-sm-12 text-muted small vertical-center">
               <pr-icon icon="'info'" mode="'primary'" class-name="'space-right'"></pr-icon>
@@ -39,7 +39,7 @@
             </div>
           </div>
           <!-- auto update window -->
-          <div class="col-sm-12 form-section-title"> Change Window Setting </div>
+          <div class="col-sm-12 form-section-title"> Change window setting </div>
 
           <div class="form-group">
             <div class="col-sm-12">
@@ -57,7 +57,7 @@
           </div>
 
           <!-- security -->
-          <div class="col-sm-12 form-section-title"> Docker Security Settings </div>
+          <div class="col-sm-12 form-section-title"> Docker security settings </div>
           <div class="form-group">
             <div class="col-sm-12">
               <por-switch-field
@@ -150,7 +150,7 @@
           <!-- other -->
           <div class="col-sm-12 form-section-title"> Other </div>
           <div class="form-group">
-            <div class="col-sm-12 pb-3">
+            <div class="col-sm-12">
               <gpus-insights></gpus-insights>
             </div>
             <div class="col-sm-12">

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

@@ -33,7 +33,7 @@ export function FormSectionTitle({
   return (
     <div
       className={clsx(
-        'col-sm-12 mb-2 mt-1 pl-0 font-medium',
+        'col-sm-12 mb-2 mt-4 pl-0 font-medium',
         tailwindTitleSize[titleSize]
       )}
     >