Transformations: debug mode tweaks (#23802)

public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx

@@ -22,7 +22,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
       {debugMode && (
         <div className={styles.debugWrapper}>
           <div className={styles.debug}>
-            <div className={styles.debugTitle}>Input</div>
+            <div className={styles.debugTitle}>Transformation input data</div>
             <div className={styles.debugJson}>
               <JSONFormatter json={input} />
             </div>
@@ -31,7 +31,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
             <Icon name="arrow-right" />
           </div>
           <div className={styles.debug}>
-            <div className={styles.debugTitle}>Output</div>
+            <div className={styles.debugTitle}>Transformation output data</div>
             <div className={styles.debugJson}>
               <JSONFormatter json={output} />
             </div>
@@ -42,7 +42,10 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme) => {
+  const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
+
+  return {
     title: css`
       display: flex;
       padding: 4px 8px 4px 8px;
@@ -78,37 +81,41 @@ const getStyles = (theme: GrafanaTheme) => ({
     `,
     debugSeparator: css`
       width: 48px;
-    height: 300px;
+      min-height: 300px;
       display: flex;
       align-items: center;
+      align-self: stretch;
       justify-content: center;
       margin: 0 ${theme.spacing.xs};
+      color: ${theme.colors.textBlue};
     `,
     debugTitle: css`
-    padding: ${theme.spacing.xxs};
-    text-align: center;
+      padding: ${theme.spacing.sm} ${theme.spacing.xxs};
       font-family: ${theme.typography.fontFamily.monospace};
       font-size: ${theme.typography.size.sm};
-    color: ${theme.palette.blue80};
-    border-bottom: 1px dashed ${theme.palette.gray15};
+      color: ${theme.colors.text};
+      border-bottom: 1px solid ${debugBorder};
       flex-grow: 0;
       flex-shrink: 1;
     `,
 
     debug: css`
-    margin-top: ${theme.spacing.md};
+      margin-top: ${theme.spacing.sm};
       padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
-    border: 1px dashed ${theme.palette.gray15};
-    background: ${theme.palette.gray05};
+      border: 1px solid ${debugBorder};
+      background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
       border-radius: ${theme.border.radius.sm};
       width: 100%;
-    height: 300px;
+      min-height: 300px;
       display: flex;
       flex-direction: column;
+      align-self: stretch;
     `,
     debugJson: css`
       flex-grow: 1;
       height: 100%;
       overflow: hidden;
+      padding: ${theme.spacing.xs};
     `,
-});
+  };
+};