misc: Update nested groups design

packages/reporter/src/commands/command.tsx

@@ -124,7 +124,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>
-    {model.hasChildren && (
+    {model.hasChildren && !model.group && (
       <div className='command-expander-column' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
@@ -432,7 +432,10 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
 
     for (let i = 1; i < groupLevel; i++) {
-      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' />)
+      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+        e.stopPropagation()
+        model.toggleOpen()
+      }} />)
     }
   }
 
@@ -520,14 +523,26 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
-            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId })}
+            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
             <div
-              className='command-wrapper-text'
+              className={cs('command-wrapper-text', {
+                'command-wrapper-text-group': model.hasChildren && groupId,
+                'command-wrapper-text-group-parent': model.hasChildren && !groupId,
+              })}
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
               {groupPlaceholder}
+
+              {model.hasChildren && groupId && (
+                <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
+                  e.stopPropagation()
+                  model.toggleOpen()
+                }}>
+                  <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
+                </div>
+              )}
               <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
               <CommandControls model={model} commandName={commandName} events={events} />
             </div>

packages/reporter/src/commands/commands.scss

@@ -1,9 +1,12 @@
 @mixin nested-command-dashes($color) {
   border-left: 1px dotted $color;
   border-image-slice: 0 0 0 1;
-  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 4px);
+  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 2px);
 }
 
+/** Group indentation width for chevron and vertical lines */
+$group-indent-width: 18px;
+
 .reporter {
   // rendered within ../hooks/hooks.tsx
   .commands-container {
@@ -50,17 +53,6 @@
     }
   }
 
-  // Child Styles
-  .command-type-child {
-    .command-method {
-      &:before {
-        float: left;
-        content: "-";
-        margin-right: 2px;
-      }
-    }
-  }
-
   .command-wrapper {
     border-left: 2px solid $reporter-section-background;
     background-color: $reporter-section-background;
@@ -121,19 +113,39 @@
   // when no children, add padding to act as the .command-expander-column's width
   // to prevent adding another element to the page
   .command-number-column + span.command-pin-target {
-    margin-left: 25px;
+    margin-left: 14px;
   }
 
   .command-pin-target.command-group {
-    @include nested-command-dashes($gray-600);
-    padding-left: 12px;
+    @include nested-command-dashes($gray-700);
     min-height: 28px;
 
     .command-group-block {
-      @include nested-command-dashes($gray-600);
-      width: 12px;
+      @include nested-command-dashes($gray-700);
+      width: $group-indent-width;
+      min-width: $group-indent-width;
       min-height: 28px;
-      min-width: 12px;
+    }
+  }
+
+  .command-group-no-children {
+    padding-left: 15px; 
+  }
+
+  .command-wrapper-text-group {
+    padding-left: 15px;
+    width: 100%;
+
+  }
+
+  .command-wrapper-text-group-parent {
+    padding-left: 5px;
+  }
+
+  .nested-group-expander {   
+    .command-expander {
+      position: relative;
+      margin-left: -16px !important; // Adjust this value to center the caret on the border
     }
   }
 
@@ -454,7 +466,7 @@
     font-size: 12px;
     line-height: 1;
     margin-top: -1px;
-    margin-left: 10px;
+    margin-left: 12px;
     outline: none;
     text-align: right;
     width: 15px;
@@ -465,20 +477,14 @@
     }
   }
 
-  .command-expander-column {
+  %command-expander-base {
     flex-shrink: 0;
-    padding-left: 10px;
-    padding-right: 5px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    width: 25px;
     display: flex;
 
     .command-expander {
       color: $gray-500;
       transform: rotate(-90deg);
       transition: transform 150ms ease-out;
-      margin-top: 5px;
 
       path {
         stroke: $gray-700;
@@ -490,6 +496,30 @@
     }
   }
 
+  .command-expander-column {
+    @extend %command-expander-base;
+    padding: 4px 5px 4px 11px;
+    width: 25px;
+
+    .command-expander {
+      margin-top: 5px;
+    }
+  }
+
+  .command-expander-column-group {
+    @extend %command-expander-base;
+    padding: 0;
+    width: $group-indent-width;
+    min-width: $group-indent-width;
+    max-width: $group-indent-width;
+    align-items: center;
+    justify-content: center;
+
+    .command-expander {
+      margin: 0;
+    }
+  }
+
   .command-is-pinned {
     background: $indigo-1000;
     border-left: 2px solid $pinned;

packages/reporter/src/errors/errors.scss

@@ -1,4 +1,5 @@
 $code-border-radius: 4px;
+$group-indent-width: 18px;
 
 .reporter {
   .error {
@@ -54,19 +55,19 @@ $code-border-radius: 4px;
   .recovered-test-err {
     .runnable-err-header,
     .runnable-err-body {
-      padding-left: 49px;
+      padding-left: 38px;
       display: flex;
 
       .err-group-block {
         border-left: 1px dotted $err-header-text;
         border-image-slice: 0 0 0 1;
-        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 4px);
-        width: 12px;
-        min-width: 12px;
+        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 2px);
+        width: $group-indent-width;
+        min-width: $group-indent-width;
 
         &:first-of-type {
-          width: 13px;
-          min-width: 13px;
+          width: 16px;
+          min-width: 16px;
         }
     } 
   }