From cd7392e618cfc8a0685c5fa94b05133339a0d864 Mon Sep 17 00:00:00 2001
From: Lily Kuang <lily@preset.io>
Date: Tue, 13 Oct 2020 20:50:02 -0700
Subject: [PATCH] update dashboard edit modal (#11258)

---
 .../src/dashboard/components/PropertiesModal.jsx  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/PropertiesModal.jsx b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
index 2637f519e2..04c34f7264 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
@@ -23,7 +23,7 @@ import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
 import { AsyncSelect } from 'src/components/Select';
 import rison from 'rison';
-import { t, SupersetClient } from '@superset-ui/core';
+import { styled, t, SupersetClient } from '@superset-ui/core';
 
 import FormLabel from 'src/components/FormLabel';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
@@ -33,6 +33,11 @@ import getClientErrorObject from '../../utils/getClientErrorObject';
 import withToasts from '../../messageToasts/enhancers/withToasts';
 import '../stylesheets/buttons.less';
 
+const StyledJsonEditor = styled(JsonEditor)`
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+  border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
+`;
+
 const propTypes = {
   dashboardId: PropTypes.number.isRequired,
   show: PropTypes.bool,
@@ -306,7 +311,7 @@ class PropertiesModal extends React.PureComponent {
                     <FormLabel htmlFor="json_metadata">
                       {t('JSON Metadata')}
                     </FormLabel>
-                    <JsonEditor
+                    <StyledJsonEditor
                       showLoadingForImport
                       name="json_metadata"
                       defaultValue={this.defaultMetadataValue}
@@ -328,6 +333,9 @@ class PropertiesModal extends React.PureComponent {
           </Modal.Body>
           <Modal.Footer>
             <span className="float-right">
+              <Button type="button" buttonSize="sm" onClick={onHide} cta>
+                {t('Cancel')}
+              </Button>
               <Button
                 type="submit"
                 buttonSize="sm"
@@ -338,9 +346,6 @@ class PropertiesModal extends React.PureComponent {
               >
                 {saveLabel}
               </Button>
-              <Button type="button" buttonSize="sm" onClick={onHide} cta>
-                {t('Cancel')}
-              </Button>
               <Dialog
                 ref={ref => {
                   this.dialog = ref;