Fixes for UI issues (#11130)

rchiodo · rchiodo · commit 438aa3d52c9b · 2020-04-13T12:12:09.000-07:00
diff --git a/news/2 Fixes/10464.md b/news/2 Fixes/10464.md
@@ -0,0 +1 @@
+Make spacing of icons on notebook toolbars match spacing on other VS code toolbars.
diff --git a/news/2 Fixes/10465.md b/news/2 Fixes/10465.md
@@ -0,0 +1 @@
+Make jupyter server status centered in the UI and use the same font as the rest of VS code.
diff --git a/src/datascience-ui/interactive-common/common.css b/src/datascience-ui/interactive-common/common.css
@@ -470,15 +470,15 @@ body, html {
 }
 
 .kernel-status {
-    margin-top: 2px;
-    flex: 1;
     display: flex;
     margin-left: auto;
 }
 
 .kernel-status-section {
-    padding: 2px 5px 2px 5px;
-    flex: 1;
+    padding: 0px 5px;
+    align-self: center;
+    margin-top: 1px;
+    margin-bottom: 2px;
 }
 
 .kernel-status-section-hoverable:hover {
@@ -514,6 +514,8 @@ body, html {
 .kernel-status-icon {
     width: 16px;
     height: 0px;
+    padding: 1px;
+    margin-top: 2px;
 }
 
 .image-button-image {
@@ -529,7 +531,10 @@ body, html {
 }
 
 .toolbar-menu-bar .image-button {
-    margin-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 9px;
+    margin-left: 7px;
+    margin-right: 7px;
 }
 
 .image-button:focus {
diff --git a/src/datascience-ui/interactive-common/kernelSelection.tsx b/src/datascience-ui/interactive-common/kernelSelection.tsx
@@ -34,8 +34,8 @@ export class KernelSelection extends React.Component<IKernelSelectionProps> {
             4; // plus 4 for the icon
         const displayNameTextSize = this.props.kernel.displayName.length + this.props.kernel.jupyterServerStatus.length;
         const dynamicFont: React.CSSProperties = {
-            fontSize: this.props.font.size > 2 ? this.props.font.size - 2 : this.props.font.size,
-            fontFamily: this.props.font.family,
+            fontSize: 'var(--vscode-font-size)', // Use the same font and size as the menu
+            fontFamily: 'var(--vscode-font-family)',
             maxWidth: this.getMaxWidth(serverTextSize + displayNameTextSize + 5) // plus 5 for the line and margins
         };
         const serverTextWidth: React.CSSProperties = {
diff --git a/src/datascience-ui/native-editor/nativeEditor.less b/src/datascience-ui/native-editor/nativeEditor.less
@@ -284,7 +284,6 @@
 }
 
 .native-button {
-    margin-top: 3px;
     background: transparent;
     z-index: 10;
 }
@@ -488,5 +487,8 @@ collapse-bar        controls-div        [cell-input, cell-output, markdown-cell-
 }
 
 .native-editor-celltoolbar-middle .image-button {
-    margin-right: 8px;
+    margin-right: 3px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    margin-left: 3px;
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Make spacing of icons on notebook toolbars match spacing on other VS code toolbars.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Make jupyter server status centered in the UI and use the same font as the rest of VS code.`
Original file line number	Diff line number	Diff line change
`@@ -470,15 +470,15 @@ body, html {`
`470`	`470`	`}`
`471`	`471`
`472`	`472`	`.kernel-status {`
`473`		`- margin-top: 2px;`
`474`		`- flex: 1;`
`475`	`473`	`display: flex;`
`476`	`474`	`margin-left: auto;`
`477`	`475`	`}`
`478`	`476`
`479`	`477`	`.kernel-status-section {`
`480`		`- padding: 2px 5px 2px 5px;`
`481`		`- flex: 1;`
	`478`	`+ padding: 0px 5px;`
	`479`	`+ align-self: center;`
	`480`	`+ margin-top: 1px;`
	`481`	`+ margin-bottom: 2px;`
`482`	`482`	`}`
`483`	`483`
`484`	`484`	`.kernel-status-section-hoverable:hover {`
`@@ -514,6 +514,8 @@ body, html {`
`514`	`514`	`.kernel-status-icon {`
`515`	`515`	`width: 16px;`
`516`	`516`	`height: 0px;`
	`517`	`+ padding: 1px;`
	`518`	`+ margin-top: 2px;`
`517`	`519`	`}`
`518`	`520`
`519`	`521`	`.image-button-image {`
`@@ -529,7 +531,10 @@ body, html {`
`529`	`531`	`}`
`530`	`532`
`531`	`533`	`.toolbar-menu-bar .image-button {`
`532`		`- margin-right: 12px;`
	`534`	`+ margin-top: 8px;`
	`535`	`+ margin-bottom: 9px;`
	`536`	`+ margin-left: 7px;`
	`537`	`+ margin-right: 7px;`
`533`	`538`	`}`
`534`	`539`
`535`	`540`	`.image-button:focus {`
Original file line number	Diff line number	Diff line change
`@@ -284,7 +284,6 @@`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`.native-button {`
`287`		`- margin-top: 3px;`
`288`	`287`	`background: transparent;`
`289`	`288`	`z-index: 10;`
`290`	`289`	`}`
`@@ -488,5 +487,8 @@ collapse-bar controls-div [cell-input, cell-output, markdown-cell-`
`488`	`487`	`}`
`489`	`488`
`490`	`489`	`.native-editor-celltoolbar-middle .image-button {`
`491`		`- margin-right: 8px;`
	`490`	`+ margin-right: 3px;`
	`491`	`+ margin-top: 4px;`
	`492`	`+ margin-bottom: 4px;`
	`493`	`+ margin-left: 3px;`
`492`	`494`	`}`