updated styles

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -76,16 +76,16 @@ export class DashboardPanel extends PureComponent<Props, State> {
       // unmount angular panel
       this.cleanUpAngularPanel();
 
+      if (panel.type !== pluginId) {
+        this.props.panel.changeType(pluginId, fromAngularPanel);
+      }
+
       if (plugin.exports) {
         this.setState({ plugin: plugin });
       } else {
         plugin.exports = await importPluginModule(plugin.module);
         this.setState({ plugin: plugin });
       }
-
-      if (panel.type !== pluginId) {
-        this.props.panel.changeType(pluginId, fromAngularPanel);
-      }
     }
   }
 

public/app/features/dashboard/dashgrid/EditorTabBody.tsx

@@ -10,7 +10,8 @@ interface Props {
 }
 
 export interface EditorToolBarView {
-  title: string;
+  title?: string;
+  heading?: string;
   imgSrc?: string;
   icon?: string;
   disabled?: boolean;
@@ -90,7 +91,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return (
       <div className="panel-option-section">
         <div className="panel-option-section__header">
-          {view.title}
+          {view.title || view.heading}
           <button className="btn btn-link" onClick={this.onCloseOpenView}>
             <i className="fa fa-remove" />
           </button>

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -246,7 +246,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     };
 
     const dsHelp = {
-      title: '',
+      heading: 'Help',
       icon: 'fa fa-question',
       disabled: !hasQueryHelp,
       onClick: this.loadHelp,
@@ -254,11 +254,11 @@ export class QueriesTab extends PureComponent<Props, State> {
     };
 
     return (
-      <EditorTabBody heading="Data" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
+      <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
           <div className="panel-option-section">
-            <div className="panel-option-section__header">Queries</div>
-            <div className="panel-option-section__body panel-option-section__body--queries">
+          {/*<div className="panel-option-section__header">Queries</div>*/}
+            <div className="panel-option-section__body">
               <div className="query-editor-rows gf-form-group">
                 <div ref={element => (this.element = element)} />
 
@@ -282,7 +282,7 @@ export class QueriesTab extends PureComponent<Props, State> {
             </div>
           </div>
           <div className="panel-option-section">
-            <div className="panel-option-section__header">Options</div>
+          {/*<div className="panel-option-section__header">Options</div>*/}
             <div className="panel-option-section__body">
               <QueryOptions panel={panel} datasource={currentDS} />
             </div>

public/app/features/dashboard/dashgrid/QueryInspector.tsx

-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
@@ -187,16 +187,10 @@ export class QueryInspector extends PureComponent<Props, State> {
 
     return (
       <>
-        <div>
-          {/*
-          <button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleMocking}>
-            Mock response
-          </button>
-          */}
+        <div className="pull-right">
           <button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}>
             {this.renderExpandCollapse()}
           </button>
-
           <CopyToClipboard
             className="btn btn-transparent btn-p-x-0"
             text={this.getTextForClipboard}

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -106,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       template +=
         `
       <div class="panel-option-section" ng-cloak>` +
-        (i > -1 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
         `<div class="panel-option-section__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>

public/app/features/datasources/settings/DataSourceSettings.tsx

@@ -177,6 +177,9 @@ export class DataSourceSettings extends PureComponent<Props, State> {
           <div className="page-container page-body">
             <div>
               <form onSubmit={this.onSubmit}>
+                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
+
                 <BasicSettings
                   dataSourceName={dataSource.name}
                   isDefault={dataSource.isDefault}
@@ -184,9 +187,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                   onNameChange={name => setDataSourceName(name)}
                 />
 
-                {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
-
-                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
                 {dataSourceMeta.module && (
                   <PluginSettings
                     dataSource={dataSource}

public/app/features/panel/partials/general_tab.html

 <div class="panel-option-section">
-  <div class="panel-option-section__header">Information</div>
+  <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
   <div class="panel-option-section__body">
     <div class="section">
       <div class="gf-form">

public/app/plugins/panel/graph/tab_display.html

@@ -22,10 +22,10 @@
 			</div>
 			<gf-form-switch ng-disabled="!ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
 			</gf-form-switch>
-			<div class="gf-form">
+			<div class="gf-form" ng-if="ctrl.panel.points">
 				<label class="gf-form-label width-8">Point Radius</label>
 				<div class="gf-form-select-wrapper max-width-5">
-					<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.points"></select>
+					<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
 				</div>
 			</div>
 		</div>
@@ -66,7 +66,7 @@
 		</div>
 	</div>
 
-		<div class="gf-form-group">
+		<div>
 			<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
 				<div class="gf-form">
 					<label class="gf-form-label">alias or regex</label>
@@ -85,16 +85,16 @@
 						</span>
 					</label>
 				</div>
-	
+
 				<div class="gf-form">
 					<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
 					</span>
 				</div>
-	
+
 				<div class="gf-form gf-form--grow">
 					<div class="gf-form-label gf-form-label--grow"></div>
 				</div>
-	
+
 				<div class="gf-form">
 					<label class="gf-form-label">
 						<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>

public/sass/components/_panel_editor.scss

@@ -127,7 +127,7 @@
 }
 
 .viz-picker {
-  padding: 20px;
+  padding: 0px 20px;
   position: relative;
 }
 
@@ -141,7 +141,7 @@
   border: $panel-editor-viz-item-border;
   border-radius: 3px;
   height: 100px;
-  width: 150px;
+  width: 145px;
   flex-shrink: 0;
   flex-direction: column;
   text-align: center;
@@ -266,6 +266,6 @@
   background: $page-bg;
 
   &--queries {
-    min-height: 300px;
+    min-height: 200px;
   }
 }