overmind/packages/node_modules/overmind-devtools/src/index.tsx at 31be0c2f3df13cbbe87bdd5ffd31e962f694c2f2 · hipertracker/overmind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { injectGlobal } from 'emotion'
import { h, render } from 'overmind-components'
import * as iconFont from './icomoon.woff2'
import Devtools from './components/Devtools'
import app from './app'

injectGlobal`
  @font-face {
    font-family: 'icomoon';
    src: url('${iconFont}') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  :root {
    --color-primary: rgb(121, 182, 242);
    --color-red: #C7402D;

    --color-dark-1: hsl(206, 57%, 17%);
    --color-dark-2: hsl(206, 57%, 14%);
    --color-white-1: hsl(0, 0%, 98%);
    --color-white-2: hsl(0, 0%, 95%);
    --color-black-1: hsl(0, 0%, 20%);
    --color-black-2: hsl(0, 0%, 25%);
    --color-gray-1: hsl(0, 0%, 90%);
    --color-gray-2: hsl(0, 0%, 95%);

    --padding-1: 0.1rem;
    --padding-2: 0.25rem;
    --padding-3: 0.5rem;
    --padding-4: 1rem;
    --padding-5: 2rem;
    --padding-6: 3rem;

    --font-size-1: 10px;
    --font-size-2: 14px;
    --font-size-3: 16px;
    --font-size-4: 20px;
    --font-size-5: 22px;
    --font-size-6: 34px;

    --border-radius-1: 3px;
    --border-radius-2: 6px;
  }

  html, body {
    margin: 0;
    height: 100%;
  }
  body {
    overflow: hidden;
    font-family: Helvetica Neue;
    line-height: 24px;
  }
  #app {
    height: 100%;
  }
`

window.onerror = (_, _2, _3, _4, error) => {
  app.actions.setError(error.message)
}

const container = document.createElement('div')
container.id = 'app'
document.body.appendChild(container)
render(app, <Devtools />, container)