add bg

Author: SaraVieira

packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/elements.ts

@@ -15,10 +15,10 @@ export const Block = styled.div<{ last: boolean }>`
     content: '';
     position: absolute;
     margin: auto;
-    top: 12px;
+    top: 13px;
     right: -10px;
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
     transform: rotate(45deg);
     border-right: 1px solid ${props =>
     props.theme.light ? `rgba(0, 0, 0, ${(props.last ? 0.3 : 0.4)})` : `rgba(255, 255, 255, ${(props.last ? 0.3 : 0.4)})`};
@@ -32,7 +32,6 @@ export const Block = styled.div<{ last: boolean }>`
 export const TestName = styled.div`
   padding: 0.4rem;
   padding-left: 20px;
-  background-color: ${props => props.theme['sideBar.background']};
   color: ${props =>
     props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
   flex: auto;

packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/elements.ts

@@ -1,17 +1,22 @@
 import styled from 'styled-components';
+import Color from 'color'
 
 export const BlockHeader = styled.div`
   display: flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
-  padding: 0 0.5rem;
-  padding-right: 2px;
+  padding: 0rem 1rem;
+
   overflow: hidden;
+    background-color: ${props => Color(props.theme['sideBar.background'])
+    .darken(props.theme.light ? 0.1 : 0.3)
+    .rgbString()};
 `;
 
+
 export const Container = styled.div`
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
   overflow: hidden;
 
   border-radius: 2px;
@@ -21,7 +26,7 @@ export const Actions = styled.div`
   display: flex;
   align-items: center;
   padding: 7px;
-  background-color: ${props => props.theme['sideBar.background']};
+  padding-right: 0;
 
   font-size: 0.875rem;
   color: ${props =>