diff --git a/packages/component-modal/src/components/Modal.js b/packages/component-modal/src/components/Modal.js
index 4015782fef9d60d7ecde1e2d19efeb83628036d5..b16774202a19629f580e8fe050200b9c1fa2ba8c 100644
--- a/packages/component-modal/src/components/Modal.js
+++ b/packages/component-modal/src/components/Modal.js
@@ -40,5 +40,5 @@ const ModalRoot = styled.div`
justify-content: center;
background-color: ${({ overlayColor }) =>
overlayColor || 'rgba(0, 0, 0, 0.8)'};
- /* z-index: ${({ theme }) => theme.modalIndex}; */
+ z-index: ${({ theme }) => theme.modalIndex};
`
diff --git a/packages/components-faraday/src/components/Dashboard/AssignHEModal.js b/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
index 86e6d1438c6334a18508077cd7bbcf56b1ff03f9..9293764c8970b6377f3fbcd8d4ec23f89417261a 100644
--- a/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
+++ b/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
@@ -1,10 +1,10 @@
/* eslint react/prefer-stateless-function: 0 */
import React from 'react'
-import { th } from '@pubsweet/ui'
+import { th, Icon } from '@pubsweet/ui'
import { compose } from 'recompose'
import { connect } from 'react-redux'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
import { handlingEditors, assignHandlingEditor } from '../../redux/editors'
@@ -33,16 +33,20 @@ class AssignHEModal extends React.Component {
render() {
const { searchInput } = this.state
- const { editors } = this.props
+ const { editors, hideModal, theme } = this.props
const filteredEditors = this.filterEditors(editors)
return (
<RootModal>
- <button onClick={this.props.hideModal}>CLOSE</button>
+ <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
+ <Icon color={theme.colorPrimary}>x</Icon>
+ </CloseIcon>
<ModalTitle>Assign Handling Editor</ModalTitle>
<ModalHeader>
<span>HANDLING EDITORS</span>
<SearchInput
+ data-test="he-search"
onChange={this.changeInput}
+ placeholder="Search by name or email"
type="text"
value={searchInput}
/>
@@ -58,7 +62,10 @@ class AssignHEModal extends React.Component {
<span>{`${firstName} ${lastName}`}</span>
<span>{email}</span>
</EditorDetails>
- <AssignButton onClick={this.assignEditor(email)}>
+ <AssignButton
+ data-test={`assign-${email}`}
+ onClick={this.assignEditor(email)}
+ >
ASSIGN
</AssignButton>
</SuggestedEditor>
@@ -77,9 +84,17 @@ export default compose(
}),
{ assignHandlingEditor },
),
+ withTheme,
)(AssignHEModal)
// #region styled-components
+const CloseIcon = styled.div`
+ cursor: pointer;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+`
+
const EditorDetails = styled.div`
display: flex;
flex-direction: column;
@@ -100,13 +115,16 @@ const SuggestedEditor = styled.div`
const AssignButton = styled.button`
align-items: center;
- color: ${th('colorTextReverse')};
background-color: ${th('colorPrimary')};
+ cursor: pointer;
+ color: ${th('colorTextReverse')};
display: flex;
justify-content: center;
+ font-size: ${th('fontSizeBaseSmall')};
+ font-family: ${th('fontReading')};
height: ${th('gridUnit')};
- width: calc(${th('gridUnit')} * 4);
opacity: 0;
+ width: calc(${th('gridUnit')} * 4);
${SuggestedEditor}:hover & {
opacity: 1;
@@ -121,6 +139,7 @@ const RootModal = styled.div`
justify-content: flex-start;
height: calc(${th('gridUnit')} * 18);
padding: calc(${th('subGridUnit')} * 8) calc(${th('subGridUnit')} * 6);
+ position: relative;
width: calc(${th('gridUnit')} * 24);
`
@@ -139,6 +158,7 @@ const ModalHeader = styled.div`
& span {
color: ${th('colorPrimary')};
font-size: ${th('fontSizeBase')};
+ font-family: ${th('fontReading')};
margin-bottom: ${th('subGridUnit')};
}
`
@@ -147,6 +167,11 @@ const SearchInput = styled.input`
border: 4px solid gray;
height: calc(${th('subGridUnit')} * 5);
padding: ${th('subGridUnit')};
+
+ &:focus,
+ &:active {
+ outline: none;
+ }
`
const ScrollContainer = styled.div`
diff --git a/yarn.lock b/yarn.lock
index 5f06aabe0960b5f12163e9e80553996086a8d8cf..e2cb01c74b00d0286b23cce3cfa39d7dc976c1a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -678,27 +678,6 @@ axobject-query@^0.1.0:
dependencies:
ast-types-flow "0.0.7"
-babel-cli@^6.26.0:
- version "6.26.0"
- resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
- dependencies:
- babel-core "^6.26.0"
- babel-polyfill "^6.26.0"
- babel-register "^6.26.0"
- babel-runtime "^6.26.0"
- commander "^2.11.0"
- convert-source-map "^1.5.0"
- fs-readdir-recursive "^1.0.0"
- glob "^7.1.2"
- lodash "^4.17.4"
- output-file-sync "^1.1.2"
- path-is-absolute "^1.0.1"
- slash "^1.0.0"
- source-map "^0.5.6"
- v8flags "^2.1.1"
- optionalDependencies:
- chokidar "^1.6.1"
-
babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1237,14 +1216,6 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"
-babel-polyfill@^6.26.0:
- version "6.26.0"
- resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
- dependencies:
- babel-runtime "^6.26.0"
- core-js "^2.5.0"
- regenerator-runtime "^0.10.5"
-
babel-preset-env@^1.6.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
@@ -1855,7 +1826,7 @@ cheerio@^1.0.0-rc.2:
lodash "^4.15.0"
parse5 "^3.0.1"
-chokidar@^1.0.1, chokidar@^1.6.1, chokidar@^1.7.0:
+chokidar@^1.0.1, chokidar@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
dependencies:
@@ -3854,10 +3825,6 @@ fs-extra@^4.0.1, fs-extra@^4.0.2:
jsonfile "^4.0.0"
universalify "^0.1.0"
-fs-readdir-recursive@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
-
fs-write-stream-atomic@^1.0.8:
version "1.0.10"
resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -4098,7 +4065,7 @@ got@^6.7.1:
unzip-response "^2.0.1"
url-parse-lax "^1.0.0"
-graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
+graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -6533,14 +6500,6 @@ osenv@^0.1.4:
os-homedir "^1.0.0"
os-tmpdir "^1.0.0"
-output-file-sync@^1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
- dependencies:
- graceful-fs "^4.1.4"
- mkdirp "^0.5.1"
- object-assign "^4.1.0"
-
p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -6860,19 +6819,6 @@ pn@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
-portal-modal@^1.0.3:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/portal-modal/-/portal-modal-1.0.3.tgz#1fa92680c2699a8adf2e3c6f1cf21a14b41e3a08"
- dependencies:
- babel-cli "^6.26.0"
- babel-core "^6.26.0"
- babel-preset-es2015 "^6.24.1"
- babel-preset-react "^6.24.1"
- babel-preset-stage-2 "^6.24.1"
- react "^16.2.0"
- react-dom "^16.2.0"
- react-redux "^5.0.6"
-
postcss-calc@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -8009,10 +7955,6 @@ regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
-regenerator-runtime@^0.10.5:
- version "0.10.5"
- resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
-
regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
@@ -9473,10 +9415,6 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
-user-home@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
-
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -9540,12 +9478,6 @@ uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
-v8flags@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
- dependencies:
- user-home "^1.1.1"
-
validate-npm-package-license@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"