feat(Menu): add override

packages/hindawi-theme/src/elements/Icon.js

+import { css } from 'styled-components'
+import { darken } from '@pubsweet/ui-toolkit'
+
+export default css`
+  & svg {
+    &:hover {
+      stroke: ${props => darken(props.color, 0.1)};
+    }
+    &:active {
+      stroke: ${props => darken(props.color, 0.2)};
+    }
+  }
+`

packages/hindawi-theme/src/elements/Menu.js

+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export default {
+  Value: css`
+    border: none;
+
+    &:hover {
+      color: ${th('colorSecondary')};
+    }
+  `,
+  Placeholder: css`
+    color: ${th('colorText')};
+  `,
+  Opener: css`
+    border-color: ${props =>
+      props.open ? th('menu.hoverColor') : th('colorBorder')};
+    &:hover {
+      border-color: ${th('menu.hoverColor')};
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  `,
+
+  OptionsContainer: css`
+    margin-top: calc(${th('gridUnit')} / 2);
+  `,
+  Options: css`
+    background: ${th('colorBackground')};
+    box-shadow: ${th('menu.openerShadow')};
+  `,
+  Option: css`
+    border: none;
+    color: ${th('colorText')};
+    font-family: ${th('fontHeading')};
+    font-size: ${th('fontSizeBase')};
+    line-height: ${th('lineHeightBase')};
+
+    &:hover {
+      background-color: ${th('menu.optionBackground')};
+    }
+  `,
+}

packages/hindawi-theme/src/elements/index.js

+import Icon from './Icon'
+import Menu from './Menu'
 import Button from './Button'
 import TextField from './TextField'
 import ValidatedTextField from './ValidatedTextField'
 
-export { Button, TextField, ValidatedTextField }
+export { Icon, Menu, Button, TextField, ValidatedTextField }

packages/hindawi-theme/src/index.js

@@ -2,7 +2,7 @@
 import { injectGlobal } from 'styled-components'
 
 import './fonts/index.css'
-import { Button, TextField, ValidatedTextField } from './elements'
+import { Icon, Menu, Button, TextField, ValidatedTextField } from './elements'
 
 injectGlobal`
   body {
@@ -29,11 +29,6 @@ const hindawiTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#FC6A4B',
 
-  // custom hindawi theme variables
-  accentApple: '#63A945',
-  accentBlossom: '#DBAFC1',
-
-  // colors
   button: {
     borderActive: 'rgba(0,0,0,0.34)',
     borderDefault: 'rgba(0,0,0,0.14)',
@@ -63,6 +58,12 @@ const hindawiTheme = {
     activeBorder: '#003049',
   },
 
+  menu: {
+    hoverColor: '#003049',
+    openerShadow: '0 2px 6px -1px rgba(125, 125, 125, 0.5)',
+    optionBackground: 'rgba(0, 126, 146, 0.1)',
+  },
+
   /* Text variables */
   // fonts
   fontInterface: "'Myriad Pro Bold'",
@@ -110,6 +111,8 @@ const hindawiTheme = {
 
   cssOverrides: {
     ui: {
+      Icon,
+      Menu,
       Button,
       TextField,
       ValidatedTextField,