fix: select appearance

Author: foxhound87

src/components/Dock.jsx

@@ -4,16 +4,17 @@ import { merge } from 'glamor';
 import Dock from 'react-dock';
 import ReactTooltip from 'react-tooltip';
 
+import Header from './Header';
 import Draggable from './Draggable';
 import SelectInitialForm from './SelectInitialForm';
 import RenderFormData from './RenderFormData';
 
-import Icons from '../icons';
 import $U from '../styles/_.utils';
 import style from '../styles/Dock';
 
 export default observer(({ store, handlers }) => (
   <div className={style.dock}>
+    <ReactTooltip />
     <Dock
       defaultSize={store.tools.open ? store.dock.size : 0}
       size={store.tools.open ? store.dock.size : 0}
@@ -24,36 +25,11 @@ export default observer(({ store, handlers }) => (
       dimMode={store.dock.mode}
       dockStyle={store.dock.style}
     >
-      <ReactTooltip />
-
       <div className={merge(style.draggable, store.tools.open && $U.hidden)}>
         <Draggable handlers={handlers} />
       </div>
 
-      <div className={merge(style.heading, !store.tools.open && $U.hidden)}>
-        <div className={$U.left}>
-          <b className={merge(style.hli, !store.tools.heading.name && $U.hidden)}>
-            MOBX-REACT-FORM
-          </b>
-          <b className={merge(style.hlb, !store.tools.heading.sub && $U.hidden)}>
-            DEVTOOLS
-          </b>
-        </div>
-        <button
-          className={merge($U.button, style.btn)}
-          onClick={handlers.handleOnCloseTools}
-          data-tip="CLOSE"
-        >
-          <Icons.FaChevronCircleRight className={style.icon} />
-        </button>
-        <button
-          className={merge($U.button, style.btn)}
-          onClick={handlers.handleOnOpenDoc}
-          data-tip="DOCS"
-        >
-          <Icons.FaBook className={style.icon} />
-        </button>
-      </div>
+      <Header store={store} handlers={handlers} />
 
       {(store.selected.form && store.selected.key)
         ? <RenderFormData store={store} handlers={handlers} />

src/components/Header.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { merge } from 'glamor';
+
+import Icons from '../icons';
+import $U from '../styles/_.utils';
+import style from '../styles/Header';
+
+export default observer(({ store, handlers }) => (
+  <div className={merge(style.heading, !store.tools.open && $U.hidden)}>
+    <div className={$U.left}>
+      <b className={merge(style.hli, !store.tools.heading.name && $U.hidden)}>
+        MOBX-REACT-FORM
+      </b>
+      <b className={merge(style.hlb, !store.tools.heading.sub && $U.hidden)}>
+        DEVTOOLS
+      </b>
+    </div>
+    <button
+      className={merge($U.button, style.btn)}
+      onClick={handlers.handleOnCloseTools}
+      data-tip="CLOSE"
+    >
+      <Icons.FaChevronCircleRight className={style.icon} />
+    </button>
+    <button
+      className={merge($U.button, style.btn)}
+      onClick={handlers.handleOnOpenDoc}
+      data-tip="DOCS"
+    >
+      <Icons.FaBook className={style.icon} />
+    </button>
+  </div>
+));

src/styles/Dock.js

@@ -1,5 +1,4 @@
 import { style } from 'glamor';
-import theme from './_.theme';
 
 export default {
   dock: style({
@@ -8,38 +7,6 @@ export default {
       display: 'none',
     },
   }),
-  btn: style({
-    float: 'right',
-    margin: '-3px',
-  }),
-  icon: style({
-    'fontSize': '22px',
-    'color': theme.base0B,
-    'paddingRight': '10px',
-    ':hover': {
-      color: theme.base0A,
-    },
-  }),
-  hli: style({
-    color: theme.base0D,
-    paddingLeft: '25px',
-  }),
-  hlb: style({
-    color: theme.base09,
-    paddingLeft: '10px',
-  }),
-  heading: style({
-    fontSize: '14px',
-    background: theme.base00,
-    color: theme.base00,
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
-    padding: '14px 0 13px 0',
-    margin: 0,
-    position: 'absolute',
-    width: '100%',
-    zIndex: 99,
-  }),
   draggable: style({
     position: 'fixed',
     right: '0px',

src/styles/Header.js

@@ -0,0 +1,37 @@
+import { style } from 'glamor';
+import theme from './_.theme';
+
+export default {
+  btn: style({
+    float: 'right',
+    margin: '-3px',
+  }),
+  icon: style({
+    'fontSize': '22px',
+    'color': theme.base0B,
+    'paddingRight': '10px',
+    ':hover': {
+      color: theme.base0A,
+    },
+  }),
+  hli: style({
+    color: theme.base0D,
+    paddingLeft: '25px',
+  }),
+  hlb: style({
+    color: theme.base09,
+    paddingLeft: '10px',
+  }),
+  heading: style({
+    fontSize: '14px',
+    background: theme.base00,
+    color: theme.base00,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    padding: '14px 0 13px 0',
+    margin: 0,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 99,
+  }),
+};

src/styles/SelectMenu.js

@@ -10,8 +10,6 @@ export default {
     height: '28px',
     padding: '5px 35px 5px 10px',
     fontSize: '14px',
-    webkitAppearance: 'none',
-    mozAppearance: 'none',
     appearance: 'none',
     backgroundColor: theme.base00,
     backgroundPosition: 'right 50%',