NewPanelEdit: Design tweaks (#22156)

* NewPanelEdit: minor design tweak

* Updated

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);
 

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`

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;