style(overmind-devtools-client): fixed coloring on code example

Author: christianalfoni

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

@@ -2,6 +2,7 @@ import { createElement, FunctionComponent, Fragment } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import * as text from '../../styles/text'
+import { colors } from '../../theme'
 import Input from '../common/Input'
 import Button from '../common/Button'
 import Workspace from '../Workspace'
@@ -62,13 +63,29 @@ const Devtools: FunctionComponent = () => {
     )
   }
 
-  let code = `const overmind = createOvermind(config, {
-    devtools: "localhost:${state.port}",
-  })`
   return state.isConnecting ? (
     <div className={styles.wrapper}>
       <h1>Waiting for an app to connect to {state.port}...</h1>
-      <pre className={styles.code}>{code}</pre>
+      <pre className={styles.code}>
+        <span style={{ color: colors.purple }}>const</span> overmind ={' '}
+        {state.port === 3031 ? (
+          <Fragment>
+            <span style={{ color: colors.green }}>createOvermind</span>(config)
+          </Fragment>
+        ) : (
+          <Fragment>
+            <span style={{ color: colors.green }}>createOvermind</span>(config,{' '}
+            {'{'}
+            {`\n`}
+            {'  '}devtools:{' '}
+            <span style={{ color: colors.yellow }}>
+              "localhost:{state.port}"
+            </span>
+            {`\n`}
+            {'}'})
+          </Fragment>
+        )}
+      </pre>
     </div>
   ) : (
     <Workspace />

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

@@ -27,7 +27,7 @@ export const input = css({
 })
 
 export const code = css({
-  border: '2px dashed var(--colors-white4)',
+  borderRadius: 3,
   padding: '10px',
-  background: 'var(--colors-black2)'
+  background: colors.dark,
 })

packages/node_modules/overmind-devtools-client/src/overmind/state.ts

@@ -22,7 +22,7 @@ import {
 type State = {
   isConnecting: boolean
   error: string
-  port: string
+  port: number
   apps: Apps
   currentAppName: string
   newPortValue: string
@@ -48,7 +48,7 @@ const state: State = {
   error: null,
   showApps: false,
   currentAppName: null,
-  port: '3031',
+  port: 3031,
   apps: {},
   newPortValue: '',
   currentTab: Tab.State,