From b40b305e634730eaecaddcf2be208d10c54d9569 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Fri, 8 Sep 2023 13:40:09 +1200
Subject: [PATCH] fix(styles): improve styling of form-section-title [EE-5366]
 (#10250)

---
 app/assets/css/app.css                                    | 8 ++++++--
 .../docker-features-configuration.html                    | 8 ++++----
 .../form-components/FormSectionTitle/FormSectionTitle.tsx | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index b8bd2abb4..8f7944d92 100644
--- a/app/assets/css/app.css
+++ b/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;
diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index ba24df82e..afc973cc2 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/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">
diff --git a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx b/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
index 2d7bfaf14..65c29f08c 100644
--- a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/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]
       )}
     >