fix: Expand Contract button and Removing line (#653)

* Expand Contract button and Removing line

* fix: Expand Contract button and Removing line

* fix: removing colorChange variable

* fix: Lintering code

* fix: removing variable

* fix: removing spaces

* fix: updating padding

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

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;
+}

projects/components/src/expander/expander-toggle.component.ts

@@ -7,7 +7,7 @@ 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.expanded }">
       <ht-icon
         [icon]="this.getIconType()"
         size="${IconSize.Small}"

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;
   }
 }

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-right: 16px;
   }
 
   .summary-value {