NewPanelEdit: Minor style tweaks & fix to transparent panels (#23353)

* NewPanelEdit: Minor style tweaks

* Fixed ts issue

* Tweaked breakpoint

public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx

@@ -172,7 +172,7 @@ export const TabsBarContent: React.FC<{
 
   return (
     <>
-      {width < 377 ? (
+      {width < 352 ? (
         <div className="flex-grow-1">
           <Select
             options={tabSelections}

public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx

@@ -7,6 +7,7 @@ import { StoreState } from 'app/types';
 import { PanelModel } from '../../state/PanelModel';
 import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
 import { VizTypePicker } from '../../panel_editor/VizTypePicker';
+import { Field } from '@grafana/ui/src/components/Forms/Field';
 
 interface OwnProps {
   panel: PanelModel;
@@ -45,14 +46,16 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
   return (
     <div className={styles.wrapper}>
       <div className={styles.search}>
-        <Input
-          value={searchQuery}
-          onChange={e => setSearchQuery(e.currentTarget.value)}
-          prefix={<Icon name="filter" className={styles.icon} />}
-          suffix={suffix}
-          placeholder="Filter visualisations"
-          autoFocus
-        />
+        <Field label="Filters">
+          <Input
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.currentTarget.value)}
+            prefix={<Icon name="filter" className={styles.icon} />}
+            suffix={suffix}
+            placeholder="Filter visualisations"
+            autoFocus
+          />
+        </Field>
       </div>
       <div className={styles.visList}>
         <CustomScrollbar>
@@ -78,12 +81,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-direction: column;
       flex-grow: 1;
       max-height: 100%;
+      padding: ${theme.spacing.md};
     `,
     search: css`
-      padding: ${theme.spacing.sm} ${theme.spacing.md};
       flex-grow: 0;
       flex-shrink: 1;
-      margin-bottom: ${theme.spacing.sm};
     `,
     searchClear: css`
       color: ${theme.colors.gray60};
@@ -93,7 +95,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-grow: 1;
       height: 100%;
       overflow: hidden;
-      padding-left: ${theme.spacing.md};
     `,
   };
 });

public/app/features/dashboard/panel_editor/VizTypePicker.tsx

@@ -68,7 +68,8 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     wrapper: css`
-      padding-right: ${theme.spacing.md};
+      // this needed here to make the box shadow not be clicked by the parent scroll container
+      padding-top: ${theme.spacing.md};
     `,
     grid: css`
       max-width: 100%;

public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { GrafanaTheme, PanelPluginMeta } from '@grafana/data';
 import { stylesFactory, useTheme } from '@grafana/ui';
 import { css, cx } from 'emotion';
-import tinycolor from 'tinycolor2';
 
 interface Props {
   isCurrent: boolean;
@@ -29,10 +28,11 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray3 : theme.colors.dark10}`;
+  const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray85 : theme.colors.gray25}`;
+
   return {
     item: css`
-      background: ${theme.isLight ? theme.colors.white : theme.colors.gray05};
+      background: ${theme.isLight ? theme.colors.gray98 : theme.colors.gray15};
       border: ${itemBorder};
       border-radius: 3px;
       height: 100px;
@@ -44,27 +44,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       cursor: pointer;
       display: flex;
       margin-right: 10px;
-      margin-bottom: 10px;
       align-items: center;
       justify-content: center;
       padding-bottom: 6px;
-      transition: transform 1 ease;
+
       &:hover {
         box-shadow: 0 0 4px ${theme.colors.blueLight};
-        background: ${theme.isLight
-          ? tinycolor(theme.colors.blueBase)
-              .lighten(45)
-              .toHexString()
-          : tinycolor(theme.colors.blueBase)
-              .darken(46)
-              .toHexString()};
         border: 1px solid ${theme.colors.blueLight};
       }
     `,
     current: css`
       box-shadow: 0 0 6px ${theme.colors.orange} !important;
       border: 1px solid ${theme.colors.orange} !important;
-      background: ${theme.isLight ? theme.colors.white : theme.colors.gray05};
     `,
     disabled: css`
       opacity: 0.2;

public/app/plugins/panel/stat/StatPanel.tsx

@@ -95,6 +95,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         width={width}
         height={height}
         source={data}
+        itemSpacing={3}
         renderCounter={renderCounter}
         autoGrid={true}
         orientation={options.orientation}

public/sass/pages/_dashboard.scss

@@ -52,8 +52,8 @@ div.flot-text {
   width: 100%;
 
   &--transparent {
-    background-color: $page-bg;
-    border: none;
+    background-color: transparent;
+    border: 1px solid transparent;
   }
 
   &:hover {