From 0cf5ae500183139827d5e958f8a535163c22fa76 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 2 Apr 2020 16:53:24 +0200
Subject: [PATCH] DashboardSave: fix light theme JSON preview (#23279)

---
 .../forms/SaveProvisionedDashboardForm.tsx    | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 67bca91f0b8..09d4e51561b 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -1,11 +1,21 @@
 import React, { useCallback, useMemo } from 'react';
 import { css } from 'emotion';
 import { saveAs } from 'file-saver';
-import { CustomScrollbar, Button, HorizontalGroup, JSONFormatter, VerticalGroup } from '@grafana/ui';
+import {
+  CustomScrollbar,
+  Button,
+  HorizontalGroup,
+  JSONFormatter,
+  VerticalGroup,
+  useTheme,
+  stylesFactory,
+} from '@grafana/ui';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
 import { SaveDashboardFormProps } from '../types';
+import { GrafanaTheme } from '@grafana/data';
 
 export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
+  const theme = useTheme();
   const dashboardJSON = useMemo(() => {
     const clone = dashboard.getSaveModelClone();
     delete clone.id;
@@ -22,7 +32,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
     });
     saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json');
   }, [dashboardJSON]);
-
+  const styles = getStyles(theme);
   return (
     <>
       <VerticalGroup spacing="lg">
@@ -45,13 +55,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
         <div>
           <strong>File path: </strong> {dashboard.meta.provisionedExternalId}
         </div>
-        <div
-          className={css`
-            padding: 8px 16px;
-            background: black;
-            height: 400px;
-          `}
-        >
+        <div className={styles.json}>
           <CustomScrollbar>
             <JSONFormatter json={dashboardJSON} open={1} />
           </CustomScrollbar>
@@ -69,3 +73,13 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
     </>
   );
 };
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    json: css`
+      background: ${theme.isLight ? theme.colors.gray7 : theme.colors.black};
+      padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.md};
+      height: 400px;
+    `,
+  };
+});