From c8db6f237f8d97382b8965a02a0168cbc5e3eba3 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Thu, 18 Apr 2024 13:34:25 +0100
Subject: [PATCH] Refactor GanttChartRow component to improve readability and
 add padding to child rows

---
 .../src/Components/GanttChart/Row/Row.tsx     | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/CommonUI/src/Components/GanttChart/Row/Row.tsx b/CommonUI/src/Components/GanttChart/Row/Row.tsx
index cd1654241ee..619f3081ba8 100644
--- a/CommonUI/src/Components/GanttChart/Row/Row.tsx
+++ b/CommonUI/src/Components/GanttChart/Row/Row.tsx
@@ -35,37 +35,42 @@ const Row: FunctionComponent<ComponentProps> = (
         level = 0;
     }
 
-    const hasChildRows = row.childRows.length > 0;
+    const hasChildRows: boolean = row.childRows.length > 0;
 
-    const shouldShowChildRows = level < 2;  
+    const shouldShowChildRows: boolean = level < 2;
 
     const [showChildRows, setShowChildRows] = useState(shouldShowChildRows);
 
+    const paddingCount: number = level * 4;
+
     return (
         // rectangle div with curved corners and text inside in tailwindcss
         <div>
             <div
                 className={`flex w-full border-b-2 border-gray-200  border-l-2 border-l-gray-400 border-r-2 border-r-gray-400`}
             >
-                <div className={`p-2 flex w-1/4 border-r-2 border-gray-300`}>
-                    <div className="w-5 h-5">
-                        {hasChildRows && (
-                            <Icon
-                                icon={
-                                    showChildRows
-                                        ? IconProp.ChevronDown
-                                        : IconProp.ChevronRight
-                                }
-                                onClick={() => {
-                                    return setShowChildRows(!showChildRows);
-                                }}
-                            />
-                        )}
+                <div className="flex w-1/4 border-r-2 border-gray-300">
+                    <div className={`pl-${paddingCount} pt-2 pb-2 pr-2 flex`}>
+                        <div className="w-5 h-5 ml-3 mt-1">
+                            {hasChildRows && (
+                                <Icon
+                                    icon={
+                                        showChildRows
+                                            ? IconProp.ChevronDown
+                                            : IconProp.ChevronRight
+                                    }
+                                    className="cursor-pointer h-4 w-4 text-gray-500 hover:text-gray-800 font-semibold"
+                                    onClick={() => {
+                                        return setShowChildRows(!showChildRows);
+                                    }}
+                                />
+                            )}
+                        </div>
+                        <RowLabel
+                            title={row.rowInfo.title}
+                            description={row.rowInfo.description}
+                        />
                     </div>
-                    <RowLabel
-                        title={row.rowInfo.title}
-                        description={row.rowInfo.description}
-                    />
                 </div>
                 <div className="flex w-3/4">
                     {row.bars.map((bar: GanttChartBar, i: number) => {
@@ -110,7 +115,7 @@ const Row: FunctionComponent<ComponentProps> = (
                 </div>
             </div>
             {showChildRows && (
-                <div className={`ml-4`}>
+                <div>
                     {row.childRows.map((childRow: GanttChartRow, i: number) => {
                         return (
                             <div key={i}>