From 6d879a0227d48bfde8155dab41c49250900e67d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 13 Feb 2020 09:01:03 +0100
Subject: [PATCH] NewPanelEdit: Design tweaks (#22156)

* NewPanelEdit: minor design tweak

* Updated
---
 .../dashboard/components/PanelEditor/OptionsGroup.tsx    | 2 +-
 .../dashboard/components/PanelEditor/PanelEditor.tsx     | 9 ++++-----
 .../dashboard/components/PanelEditor/PanelEditorTabs.tsx | 5 ++---
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
index 1dbe9836484..7d98cf692db 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const OptionsGroup: FC<Props> = ({ title, children }) => {
-  const [isExpanded, toggleExpand] = useState(false);
+  const [isExpanded, toggleExpand] = useState(true);
   const theme = useTheme();
   const styles = getStyles(theme);
 
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 78416a56016..8503b03711c 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -340,9 +340,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       right: 0;
       bottom: 0;
       background: ${background};
+      padding: ${theme.spacing.sm};
     `,
     panelWrapper: css`
-      padding: 0 2px 2px ${theme.spacing.sm};
       width: 100%;
       height: 100%;
     `,
@@ -373,13 +373,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       height: 100%;
       width: 100%;
       background: ${theme.colors.pageBg};
-      border-top: 1px solid ${theme.colors.pageHeaderBorder};
-      border-left: 1px solid ${theme.colors.pageHeaderBorder};
+      border: 1px solid ${theme.colors.pageHeaderBorder};
+      border-bottom: none;
     `,
     toolbar: css`
-      padding: ${theme.spacing.sm};
-      height: 55px;
       display: flex;
+      padding-bottom: ${theme.spacing.sm};
       justify-content: space-between;
     `,
     editorBody: css`
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index 886aaeb79da..583f83ece8b 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -62,9 +62,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       flex-direction: column;
       height: 100%;
     `,
-    tabBar: css`
-      padding: 0 ${theme.spacing.sm};
-    `,
+    tabBar: css``,
     tabContent: css`
       padding: 0;
       display: flex;
@@ -73,6 +71,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       min-height: 0;
       background: ${theme.colors.pageBg};
       border-right: 1px solid ${theme.colors.pageHeaderBorder};
+      border-left: 1px solid ${theme.colors.pageHeaderBorder};
 
       .toolbar {
         background: transparent;