[desk-tool] Styling GetStarted (#304)

sanity-io · Nov 2, 2017 · 589ec9f · 589ec9f
1 parent f86bc96
commit 589ec9f
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 37 deletions.
diff --git a/packages/@sanity/base/src/styles/body.css b/packages/@sanity/base/src/styles/body.css
@@ -11,6 +11,10 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+:global(a) {
+  color: var(--link-color);
+}
+
 :global(::selection) {
   background: var(--text-selection-color);
 }
diff --git a/packages/@sanity/desk-tool/src/GetStarted.js b/packages/@sanity/desk-tool/src/GetStarted.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './styles/GetStarted.css'
+
+const GetStarted = () => {
+  return (
+    <div className={styles.content}>
+      <h1>Get started</h1>
+      <p className={styles.lead}>
+        Your schema needs a <code>type</code> or two for us to have anything to show here.
+      </p>
+
+      <p>
+        Read our guide on how to get started with &nbsp;
+        <a href="https://www.sanity.io/docs/content-studio/the-schema" target="_blank" rel="noopener noreferrer">
+          creating schemas
+        </a>.
+      </p>
+    </div>
+  )
+}
+
+export default GetStarted
diff --git a/packages/@sanity/desk-tool/src/SchemaPaneResolver.js b/packages/@sanity/desk-tool/src/SchemaPaneResolver.js
@@ -8,7 +8,7 @@ import styles from './styles/SchemaPaneResolver.css'
 import TypePane from './pane/TypePane'
 import DocumentsPane from './pane/DocumentsPane'
 import EditorWrapper from './pane/EditorWrapper'
-import GetStartedPane from './pane/GetStartedPane'
+import GetStarted from './GetStarted'
 import SplitController from 'part:@sanity/components/panes/split-controller'
 import SplitPaneWrapper from 'part:@sanity/components/panes/split-pane-wrapper'
 import Snackbar from 'part:@sanity/components/snackbar/default'
@@ -62,6 +62,10 @@ export default class SchemaPaneResolver extends React.Component {
     const {selectedType, selectedDocumentId, action} = router.state
     const schemaType = schema.get(router.state.selectedType)
 
+    if (TYPE_ITEMS.length === 0) {
+      return <GetStarted />
+    }
+
     return (
       <div className={styles.container}>
         <SplitController
@@ -74,17 +78,15 @@ export default class SchemaPaneResolver extends React.Component {
             paneId="typePane"
             isCollapsed={!!collapsedPanes.find(pane => pane === 'typePane')}
           >
-            {TYPE_ITEMS.length === 0 ? <GetStartedPane title="Get started" /> : (
-              <TypePane
-                isCollapsed={!!collapsedPanes.find(pane => pane === 'typePane')}
-                title="Content"
-                paneId="typePane"
-                items={TYPE_ITEMS}
-                router={router}
-                onExpand={this.handleShouldExpand}
-                onCollapse={this.handleShouldCollapse}
-              />
-            )}
+            <TypePane
+              isCollapsed={!!collapsedPanes.find(pane => pane === 'typePane')}
+              title="Content"
+              paneId="typePane"
+              items={TYPE_ITEMS}
+              router={router}
+              onExpand={this.handleShouldExpand}
+              onCollapse={this.handleShouldCollapse}
+            />
           </SplitPaneWrapper>
           {
             schemaType && selectedType && (

diff --git a/packages/@sanity/desk-tool/src/pane/GetStartedPane.js b/packages/@sanity/desk-tool/src/pane/GetStartedPane.js
diff --git a/packages/@sanity/desk-tool/src/pane/styles/GettingStartedPane.css b/packages/@sanity/desk-tool/src/pane/styles/GettingStartedPane.css
diff --git a/packages/@sanity/desk-tool/src/styles/GetStarted.css b/packages/@sanity/desk-tool/src/styles/GetStarted.css
@@ -0,0 +1,7 @@
+.content {
+  padding: 2em;
+}
+
+.lead {
+  composes: lead from 'part:@sanity/base/theme/typography/text-blocks-style';
+}