copy: removes tooltips, fixes typos for developers

components/core/ApplicationControlMenu.js

@@ -58,22 +58,16 @@ export default class ApplicationControlMenu extends React.Component {
         captureScroll={true}
         enabled={this.state.visible}
         onOutsideRectEvent={this._handleHide}
-        style={this.props.style}
-      >
-        <Tooltip animation="fade" animateFill={false} title={title}>
-          <span
-            onClick={this._handleClick}
-            css={STYLES_BUTTON}
-            style={{
-              backgroundColor: this.state.visible
-                ? Constants.system.brand
-                : null,
-              color: this.state.visible ? Constants.system.white : null,
-            }}
-          >
-            <OldSVG.ChevronDown height="20px" />
-          </span>
-        </Tooltip>
+        style={this.props.style}>
+        <span
+          onClick={this._handleClick}
+          css={STYLES_BUTTON}
+          style={{
+            backgroundColor: this.state.visible ? Constants.system.brand : null,
+            color: this.state.visible ? Constants.system.white : null,
+          }}>
+          <OldSVG.ChevronDown height="20px" />
+        </span>
 
         {this.state.visible ? this.props.popover : null}
       </Dismissible>

components/core/ApplicationNavigation.js

@@ -154,19 +154,7 @@ const STYLES_ICON_ELEMENT = css`
   }
 `;
 
-const Item = ({
-  data,
-  id,
-  activeId,
-  activeIds,
-  level,
-  children,
-  showActive,
-  treeChildren,
-  decorator,
-  onToggleShow,
-  onNavigateTo,
-}) => {
+const Item = ({ data, id, activeIds, level, children, showActive, decorator, onToggleShow, onNavigateTo }) => {
   return (
     <span css={STYLES_NAVIGATION_ITEM} style={{ padding: `0 0 0 ${level * 16}px` }}>
       <span css={STYLES_EXPANDER} onClick={onToggleShow ? onToggleShow : null}>
@@ -222,18 +210,7 @@ class NodeReference extends React.Component {
   };
 
   render() {
-    const {
-      id,
-      activeId,
-      activeIds,
-      level,
-      children,
-      treeChildren,
-      activePage,
-      decorator,
-      onNavigateTo,
-      data,
-    } = this.props;
+    const { id, activeId, activeIds, level, children, treeChildren, decorator, onNavigateTo, data } = this.props;
     const { showTreeChildren } = this.state;
 
     let showActive = showTreeChildren || activeIds[id];
@@ -311,17 +288,15 @@ export default class ApplicationNavigation extends React.Component {
             }
           />
 
-          <Tooltip animation="fade" animateFill={false} title="View your profile">
-            <a css={STYLES_PROFILE} style={{ marginLeft: 16 }} href={`/${this.props.viewer.username}`} target="_blank">
-              <span
-                css={STYLES_PROFILE_IMAGE}
-                style={{
-                  backgroundImage: `url('${this.props.viewer.data.photo}')`,
-                }}
-              />
-              {this.props.viewer.username}
-            </a>
-          </Tooltip>
+          <a css={STYLES_PROFILE} style={{ marginLeft: 16 }} href={`/${this.props.viewer.username}`} target="_blank">
+            <span
+              css={STYLES_PROFILE_IMAGE}
+              style={{
+                backgroundImage: `url('${this.props.viewer.data.photo}')`,
+              }}
+            />
+            {this.props.viewer.username}
+          </a>
         </div>
         {this.props.navigation.map((each) => {
           if (!each) {

scenes/SceneSettingsDeveloper.js

@@ -54,9 +54,7 @@ class Key extends React.Component {
         {this.state.visible ? (
           <div css={STYLES_KEY_LEFT}>{this.props.data.key}</div>
         ) : (
-          <div css={STYLES_KEY_LEFT}>
-            XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXX
-          </div>
+          <div css={STYLES_KEY_LEFT}>XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXX</div>
         )}
         <div css={STYLES_KEY_RIGHT}>
           <span
@@ -64,17 +62,11 @@ class Key extends React.Component {
             onClick={this._handleToggleVisible}
             style={{
               marginRight: 16,
-              backgroundColor: this.state.visible
-                ? null
-                : Constants.system.brand,
-            }}
-          >
+              backgroundColor: this.state.visible ? null : Constants.system.brand,
+            }}>
             <SVG.Privacy height="16px" />
           </span>
-          <span
-            css={STYLES_CIRCLE_BUTTON}
-            onClick={() => this.props.onDelete(this.props.data.id)}
-          >
+          <span css={STYLES_CIRCLE_BUTTON} onClick={() => this.props.onDelete(this.props.data.id)}>
             <SVG.Dismiss height="16px" />
           </span>
         </div>
@@ -83,12 +75,7 @@ class Key extends React.Component {
   }
 }
 
-const EXAMPLE_GET_SLATE = (
-  key,
-  slateId
-) => `// NOTE: set a slate by ID in an async/await function
-
-const response = await fetch('https://slate.host/api/v1/get-slate', {
+const EXAMPLE_GET_SLATE = (key, slateId) => `const response = await fetch('https://slate.host/api/v1/get-slate', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
@@ -104,11 +91,7 @@ const response = await fetch('https://slate.host/api/v1/get-slate', {
 const json = await response.json();
 console.log(json);`;
 
-const EXAMPLE_GET = (
-  key
-) => `// NOTE: set a slate by ID in an async/await function
-
-const response = await fetch('https://slate.host/api/v1/get', {
+const EXAMPLE_GET = (key) => `const response = await fetch('https://slate.host/api/v1/get', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
@@ -124,12 +107,7 @@ const response = await fetch('https://slate.host/api/v1/get', {
 const json = await response.json();
 console.log(json);`;
 
-const EXAMPLE_GET_SLATE_RESPONSE = (
-  key,
-  slateId
-) => `// NOTE: get a slate by ID JSON response
-
-{
+const EXAMPLE_GET_SLATE_RESPONSE = (key, slateId) => `{
   data: {
     id: '${slateId}',
     updated_at: '2020-07-27T09:04:53.007Z',
@@ -152,12 +130,7 @@ const EXAMPLE_GET_SLATE_RESPONSE = (
   }
 }`;
 
-const EXAMPLE_UPLOAD_TO_SLATE = (key, slateId) => `// NOTE
-// Upload data to a Slate by ID in an async/await function. 
-// Uses event data from a type="file" input.
-
-// NOTE: your slate ID
-const url = 'https://slate.host/api/v1/upload-data/${slateId}';
+const EXAMPLE_UPLOAD_TO_SLATE = (key, slateId) => `const url = 'https://slate.host/api/v1/upload-data/${slateId}';
 
 let file = e.target.files[0];
 let data = new FormData();
@@ -174,7 +147,7 @@ const response = await fetch(url, {
 
 const json = await response.json();
 
-// NOTE: you will receive a URL you can use right away.
+// NOTE: the URL to your asset will be available in the JSON response.
 console.log(json);`;
 
 export default class SceneSettingsDeveloper extends React.Component {
@@ -200,11 +173,7 @@ export default class SceneSettingsDeveloper extends React.Component {
   _handleDelete = async (id) => {
     this.setState({ loading: true });
 
-    if (
-      !window.confirm(
-        "Are you sure you want to delete this key? This action is irreversible"
-      )
-    ) {
+    if (!window.confirm("Are you sure you want to delete this key? This action is irreversible")) {
       this.setState({ loading: false });
       return;
     }
@@ -270,10 +239,7 @@ export default class SceneSettingsDeveloper extends React.Component {
         })}
 
         <div style={{ marginTop: 24 }}>
-          <System.ButtonPrimary
-            onClick={this._handleSave}
-            loading={this.state.loading}
-          >
+          <System.ButtonPrimary onClick={this._handleSave} loading={this.state.loading}>
             Generate
           </System.ButtonPrimary>
         </div>
@@ -286,10 +252,7 @@ export default class SceneSettingsDeveloper extends React.Component {
               label="Get all slates"
               description="This API request will return all of your public slates."
             />
-            <CodeBlock
-              children={EXAMPLE_GET(key)}
-              style={{ maxWidth: "768px" }}
-            />
+            <CodeBlock children={EXAMPLE_GET(key)} style={{ maxWidth: "768px" }} />
             <br />
             <br />
             <System.DescriptionGroup
@@ -297,25 +260,16 @@ export default class SceneSettingsDeveloper extends React.Component {
               label="Get slate by ID"
               description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate."
             />
-            <CodeBlock
-              children={EXAMPLE_GET_SLATE(key, slateId)}
-              style={{ maxWidth: "768px" }}
-            />
+            <CodeBlock children={EXAMPLE_GET_SLATE(key, slateId)} style={{ maxWidth: "768px" }} />
             <br />
             <br />
-            <CodeBlock
-              children={EXAMPLE_GET_SLATE_RESPONSE(key)}
-              style={{ maxWidth: "768px" }}
-            />
+            <CodeBlock children={EXAMPLE_GET_SLATE_RESPONSE(key)} style={{ maxWidth: "768px" }} />
             <System.DescriptionGroup
               style={{ marginTop: 48 }}
               label="Upload data to slate by ID"
               description="This API request will add a JavaScript file object to your slate."
             />
-            <CodeBlock
-              children={EXAMPLE_UPLOAD_TO_SLATE(key, slateId)}
-              style={{ maxWidth: "768px" }}
-            />
+            <CodeBlock children={EXAMPLE_UPLOAD_TO_SLATE(key, slateId)} style={{ maxWidth: "768px" }} />
           </React.Fragment>
         ) : null}
       </ScenePage>