feat(overmind): show hint about port and how to connect

Author: eirikhm

packages/node_modules/overmind-devtools-client/src/components/Devtools/index.tsx

@@ -62,9 +62,15 @@ const Devtools: FunctionComponent = () => {
     )
   }
 
+  let text =`const overmind = createOvermind(config, {
+    devtools: "localhost:${state.port}",
+  })`
   return state.isConnecting ? (
     <div className={styles.wrapper}>
-      <h1>Waiting for an app to connect...</h1>
+      <h1>Waiting for an app to connect to {state.port}...</h1>
+      <pre className={styles.code}>
+        {text}
+      </pre>
     </div>
   ) : (
     <Workspace />

packages/node_modules/overmind-devtools-client/src/components/Devtools/styles.ts

@@ -25,3 +25,9 @@ export const input = css({
   outline: 'none',
   borderRadius: 3,
 })
+
+export const code = css({
+  border: '2px dashed var(--colors-white4)',
+  padding: '10px',
+  background: 'var(--colors-black2)'
+})