Adjust styling for data viewer (#5188)

rchiodo · web-flow · commit 796d943318b1 · 2019-04-10T12:56:05.000-07:00
diff --git a/news/2 Fixes/5058.md b/news/2 Fixes/5058.md
@@ -0,0 +1 @@
+Adjust styling for data viewer.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/datascience-ui/data-explorer/mainPanel.css b/src/datascience-ui/data-explorer/mainPanel.css
@@ -42,6 +42,16 @@ body {
 .main-panel .react-grid-Toolbar {
     background-color: var(--vscode-editor-background);
     border: none;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.main-panel .react-grid-Toolbar .tools {
+    float: left;
+    margin-top: 0;
+    position: relative;
+    padding: 0;
+    margin-top: -6px;
 }
 
 .main-panel .react-grid-Toolbar .btn {
@@ -59,7 +69,7 @@ body {
 .main-panel .react-grid-Grid {
     background-color: var(--vscode-editor-background);
     color: var(--vscode-editor-foreground);
-    border-color: var(--vscode-badge-background);
+    border-color: var(--vscode-editor-inactiveSelectionBackground);
 }
 
 .main-panel .react-grid-Canvas {
@@ -68,21 +78,22 @@ body {
 }
 
 .main-panel .react-grid-Header {
-    background-color: var(--vscode-notifications-background);
+    background-color: var(--vscode-debugToolBar-background);
 }
 
 .main-panel .react-grid-HeaderCell {
-    background-color: var(--vscode-notifications-background);
+    background-color: var(--vscode-debugToolBar-background);
     color: var(--vscode-editor-foreground);
-    border-right-color: var(--vscode-badge-background);
-    border-bottom-color: var(--vscode-badge-background);
+    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
+    border-bottom-color: var(--vscode-editor-inactiveSelectionBackground);
+    text-align: center;
 }
 
 .main-panel .react-grid-Cell {
     background-color: var(--vscode-editor-background);
     color: var(--vscode-editor-foreground);
-    border-right-color: var(--vscode-badge-background);
-    border-bottom-color: var(--vscode-badge-background);
+    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
+    border-bottom-color: var(--vscode-editor-inactiveSelectionBackground);
 }
 
 .main-panel .react-grid-Cell:hover {
