From 7b5308e34012f8b2649c65c884e37556796b750f Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 17:29:36 -0300
Subject: [PATCH 1/7] Expand Contract button and Removing line

---
 .../components/src/expander/expander-toggle.component.scss | 6 +++++-
 .../components/src/expander/expander-toggle.component.ts   | 7 ++++++-
 .../src/panel/header/title/panel-title.component.ts        | 2 +-
 .../table-expanded-detail-row-cell-renderer.component.scss | 6 ------
 .../expander/table-expander-cell-renderer.component.ts     | 1 +
 .../trace-detail-widget-renderer.component.scss            | 2 +-
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/projects/components/src/expander/expander-toggle.component.scss b/projects/components/src/expander/expander-toggle.component.scss
index 18c2c95f6..7e5f5e4af 100644
--- a/projects/components/src/expander/expander-toggle.component.scss
+++ b/projects/components/src/expander/expander-toggle.component.scss
@@ -6,10 +6,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: $gray-4;
+  color: $gray-3;
   border-radius: 2px;
 }
 
 .expander-toggle:hover {
   color: $gray-5;
 }
+
+.expanded-toggle {
+  color: $gray-7;
+}
diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 9187d8864..31d981e8a 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -7,7 +7,9 @@ import { IconSize } from '../icon/icon-size';
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./expander-toggle.component.scss'],
   template: `
-    <div class="expander-toggle">
+    <div 
+      class="expander-toggle" 
+      [ngClass]="{ 'expanded-toggle' : this.colorChange && this.expanded }">
       <ht-icon
         [icon]="this.getIconType()"
         size="${IconSize.Small}"
@@ -27,6 +29,9 @@ export class ExpanderToggleComponent {
   @Input()
   public showTooltip: boolean = true;
 
+  @Input()
+  public colorChange: boolean = false;
+
   public getTooltipText(): string {
     return this.expanded ? ExpanderToggleComponent.COLLAPSE : ExpanderToggleComponent.EXPAND;
   }
diff --git a/projects/components/src/panel/header/title/panel-title.component.ts b/projects/components/src/panel/header/title/panel-title.component.ts
index 3b4f9f47c..8c92dd496 100644
--- a/projects/components/src/panel/header/title/panel-title.component.ts
+++ b/projects/components/src/panel/header/title/panel-title.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="ht-panel-title">
-      <ht-expander-toggle [expanded]="this.expanded" class="expander"></ht-expander-toggle>
+      <ht-expander-toggle [expanded]="this.expanded" [colorChange]="true" class="expander"></ht-expander-toggle>
       <div class="label"><ng-content></ng-content></div>
     </div>
   `
diff --git a/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss b/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
index 099bfce83..c2f2843f6 100644
--- a/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
+++ b/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
@@ -10,11 +10,5 @@
 
   .expandable-column-row {
     overflow: hidden;
-
-    // Left dashed border 4px dash, 4px space
-    background-image: linear-gradient($gray-4 50%, rgba(255, 255, 255, 0) 0%);
-    background-position: left;
-    background-size: 1px 8px;
-    background-repeat: repeat-y;
   }
 }
diff --git a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
index f47e12c5c..add57805e 100644
--- a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
@@ -16,6 +16,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
         *ngIf="!this.value.leaf"
         [expanded]="this.value.expanded"
         [showTooltip]="false"
+        [colorChange]="true"
       ></ht-expander-toggle>
     </div>
   `
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
index 3a323ba5b..1f56f2d97 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
@@ -3,7 +3,7 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
-    padding: 0 16px;
+    padding: 0 16px 0 0;
   }
 
   .summary-value {

From b0d8f8f74bfa94b8ea8bf84c731d892a0f638289 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 17:29:36 -0300
Subject: [PATCH 2/7] fix: Expand Contract button and Removing line

---
 .../components/src/expander/expander-toggle.component.scss | 6 +++++-
 .../components/src/expander/expander-toggle.component.ts   | 7 ++++++-
 .../src/panel/header/title/panel-title.component.ts        | 2 +-
 .../table-expanded-detail-row-cell-renderer.component.scss | 6 ------
 .../expander/table-expander-cell-renderer.component.ts     | 1 +
 .../trace-detail-widget-renderer.component.scss            | 2 +-
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/projects/components/src/expander/expander-toggle.component.scss b/projects/components/src/expander/expander-toggle.component.scss
index 18c2c95f6..7e5f5e4af 100644
--- a/projects/components/src/expander/expander-toggle.component.scss
+++ b/projects/components/src/expander/expander-toggle.component.scss
@@ -6,10 +6,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: $gray-4;
+  color: $gray-3;
   border-radius: 2px;
 }
 
 .expander-toggle:hover {
   color: $gray-5;
 }
+
+.expanded-toggle {
+  color: $gray-7;
+}
diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 9187d8864..31d981e8a 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -7,7 +7,9 @@ import { IconSize } from '../icon/icon-size';
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./expander-toggle.component.scss'],
   template: `
-    <div class="expander-toggle">
+    <div 
+      class="expander-toggle" 
+      [ngClass]="{ 'expanded-toggle' : this.colorChange && this.expanded }">
       <ht-icon
         [icon]="this.getIconType()"
         size="${IconSize.Small}"
@@ -27,6 +29,9 @@ export class ExpanderToggleComponent {
   @Input()
   public showTooltip: boolean = true;
 
+  @Input()
+  public colorChange: boolean = false;
+
   public getTooltipText(): string {
     return this.expanded ? ExpanderToggleComponent.COLLAPSE : ExpanderToggleComponent.EXPAND;
   }
diff --git a/projects/components/src/panel/header/title/panel-title.component.ts b/projects/components/src/panel/header/title/panel-title.component.ts
index 3b4f9f47c..8c92dd496 100644
--- a/projects/components/src/panel/header/title/panel-title.component.ts
+++ b/projects/components/src/panel/header/title/panel-title.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="ht-panel-title">
-      <ht-expander-toggle [expanded]="this.expanded" class="expander"></ht-expander-toggle>
+      <ht-expander-toggle [expanded]="this.expanded" [colorChange]="true" class="expander"></ht-expander-toggle>
       <div class="label"><ng-content></ng-content></div>
     </div>
   `
diff --git a/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss b/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
index 099bfce83..c2f2843f6 100644
--- a/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
+++ b/projects/components/src/table/cells/expanded-detail/table-expanded-detail-row-cell-renderer.component.scss
@@ -10,11 +10,5 @@
 
   .expandable-column-row {
     overflow: hidden;
-
-    // Left dashed border 4px dash, 4px space
-    background-image: linear-gradient($gray-4 50%, rgba(255, 255, 255, 0) 0%);
-    background-position: left;
-    background-size: 1px 8px;
-    background-repeat: repeat-y;
   }
 }
diff --git a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
index f47e12c5c..add57805e 100644
--- a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
@@ -16,6 +16,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
         *ngIf="!this.value.leaf"
         [expanded]="this.value.expanded"
         [showTooltip]="false"
+        [colorChange]="true"
       ></ht-expander-toggle>
     </div>
   `
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
index 3a323ba5b..1f56f2d97 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
@@ -3,7 +3,7 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
-    padding: 0 16px;
+    padding: 0 16px 0 0;
   }
 
   .summary-value {

From 518110da57020b68274b297018d7753192844108 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 18:47:01 -0300
Subject: [PATCH 3/7] fix: removing colorChange variable

---
 .../components/src/expander/expander-toggle.component.ts     | 5 +----
 .../src/panel/header/title/panel-title.component.ts          | 2 +-
 .../expander/table-expander-cell-renderer.component.ts       | 1 -
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 31d981e8a..8aee06708 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -9,7 +9,7 @@ import { IconSize } from '../icon/icon-size';
   template: `
     <div 
       class="expander-toggle" 
-      [ngClass]="{ 'expanded-toggle' : this.colorChange && this.expanded }">
+      [ngClass]="{ 'expanded-toggle' : this.expanded }">
       <ht-icon
         [icon]="this.getIconType()"
         size="${IconSize.Small}"
@@ -29,9 +29,6 @@ export class ExpanderToggleComponent {
   @Input()
   public showTooltip: boolean = true;
 
-  @Input()
-  public colorChange: boolean = false;
-
   public getTooltipText(): string {
     return this.expanded ? ExpanderToggleComponent.COLLAPSE : ExpanderToggleComponent.EXPAND;
   }
diff --git a/projects/components/src/panel/header/title/panel-title.component.ts b/projects/components/src/panel/header/title/panel-title.component.ts
index 8c92dd496..3b4f9f47c 100644
--- a/projects/components/src/panel/header/title/panel-title.component.ts
+++ b/projects/components/src/panel/header/title/panel-title.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="ht-panel-title">
-      <ht-expander-toggle [expanded]="this.expanded" [colorChange]="true" class="expander"></ht-expander-toggle>
+      <ht-expander-toggle [expanded]="this.expanded" class="expander"></ht-expander-toggle>
       <div class="label"><ng-content></ng-content></div>
     </div>
   `
diff --git a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
index add57805e..f47e12c5c 100644
--- a/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/state-renderers/expander/table-expander-cell-renderer.component.ts
@@ -16,7 +16,6 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
         *ngIf="!this.value.leaf"
         [expanded]="this.value.expanded"
         [showTooltip]="false"
-        [colorChange]="true"
       ></ht-expander-toggle>
     </div>
   `

From 9023c62690e2113d9da48df76cf3abf6af7bb9ad Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 19:22:56 -0300
Subject: [PATCH 4/7] fix: Lintering code

---
 projects/components/src/expander/expander-toggle.component.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 1b1513be9..03ba53b79 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -7,9 +7,7 @@ import { IconSize } from '../icon/icon-size';
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./expander-toggle.component.scss'],
   template: `
-    <div 
-      class="expander-toggle" 
-      [ngClass]="{ 'expanded-toggle' : this.expanded }">
+    <div class="expander-toggle" [ngClass]="{ 'expanded-toggle': this.expanded }">
       <ht-icon
         [icon]="this.getIconType()"
         size="${IconSize.Small}"

From d6266e659877d57550491066bf146cd09dac77a5 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 19:31:11 -0300
Subject: [PATCH 5/7] fix: removing variable

---
 .../components/src/expander/expander-toggle.component.ts     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 03ba53b79..688a12291 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -26,10 +26,7 @@ export class ExpanderToggleComponent {
 
   @Input()
   public showTooltip: boolean = true;
-
-  @Input()
-  public colorChange: boolean = false;
-
+  
   public getTooltipText(): string {
     return this.expanded ? ExpanderToggleComponent.COLLAPSE : ExpanderToggleComponent.EXPAND;
   }

From eb93aeb90fc7cd1c39a280f5d890d40511a97847 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 19:33:00 -0300
Subject: [PATCH 6/7] fix: removing spaces

---
 projects/components/src/expander/expander-toggle.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/expander/expander-toggle.component.ts b/projects/components/src/expander/expander-toggle.component.ts
index 688a12291..79b9ce8f6 100644
--- a/projects/components/src/expander/expander-toggle.component.ts
+++ b/projects/components/src/expander/expander-toggle.component.ts
@@ -26,7 +26,7 @@ export class ExpanderToggleComponent {
 
   @Input()
   public showTooltip: boolean = true;
-  
+
   public getTooltipText(): string {
     return this.expanded ? ExpanderToggleComponent.COLLAPSE : ExpanderToggleComponent.EXPAND;
   }

From da68c2e0b87f5b7168f43a70e20789cc8416ec53 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <albizupatricio@github.com>
Date: Tue, 2 Mar 2021 19:40:10 -0300
Subject: [PATCH 7/7] fix: updating padding

---
 .../trace-detail/trace-detail-widget-renderer.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
index 1f56f2d97..ffe492384 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/trace-detail/trace-detail-widget-renderer.component.scss
@@ -3,7 +3,7 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
-    padding: 0 16px 0 0;
+    padding-right: 16px;
   }
 
   .summary-value {