[desk-tool] Style the "No changes" state

sanity-io · Oct 6, 2020 · 2b89e72 · 2b89e72
1 parent af78995
commit 2b89e72
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/content/empty.css b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/content/empty.css
@@ -1,5 +1,18 @@
 @import 'part:@sanity/base/theme/variables-style';
 
+.root {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.box {
+  max-width: 300px;
+  padding-bottom: var(--extra-large-padding);
+}
+
 .heading {
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/content/empty.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/content/empty.tsx
@@ -4,15 +4,17 @@ import styles from './empty.css'
 
 export function EmptyContent() {
   return (
-    <>
-      <h3 className={styles.heading}>There are no changes to this document</h3>
+    <div className={styles.root}>
+      <div className={styles.box}>
+        <h3 className={styles.heading}>There are no changes to this document</h3>
 
-      <div className={styles.content}>
-        <p>
-          Either edit the document or change the selection in the timeline menu to see the changes
-          appear in this panel.
-        </p>
+        <div className={styles.content}>
+          <p>
+            Either edit the document or change the selection in the timeline menu to see the changes
+            appear in this panel.
+          </p>
+        </div>
       </div>
-    </>
+    </div>
   )
 }