[desk-tool] Update ChangesPanel's close button

sanity-io · Oct 6, 2020 · 92a9cea · 92a9cea
1 parent 094f0c9
commit 92a9cea
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css
@@ -24,7 +24,7 @@
 }
 
 .closeButtonContainer {
-  padding: 4px;
+  padding: 0.5em;
 }
 
 .versionSelectContainer {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable max-depth */
 import React, {useCallback} from 'react'
 import {ObjectDiff, ObjectSchemaType, DocumentChangeContext, ChangeList} from '@sanity/field/diff'
+import CloseIcon from 'part:@sanity/base/close-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import {useDocumentHistory} from '../documentHistory'
 
@@ -37,9 +38,14 @@ export function ChangesPanel({
         <div className={styles.mainNav}>
           <h2 className={styles.title}>Changes</h2>
           <div className={styles.closeButtonContainer}>
-            <button onClick={closeHistory} type="button">
-              Close
-            </button>
+            <Button
+              icon={CloseIcon}
+              kind="simple"
+              onClick={closeHistory}
+              padding="small"
+              title="Hide changes panel"
+              type="button"
+            />
           </div>
         </div>
         <div>