#497, edit close buttons globally

app/components/ResolveDuplicates.jsx

@@ -4,7 +4,7 @@ import { Mutation } from 'react-apollo'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H3, H4, Button, Icon, Link } from '@pubsweet/ui'
-import { B, Buttons, Close, CloseButton, Portal, Notification } from './ui'
+import { B, Buttons, CloseModal, Portal, Notification } from './ui'
 import { States, timeSince } from './dashboard'
 import Citation from './submission-wizard/Citation'
 import { REPLACE_MANUSCRIPT, CHECK_DUPES } from './operations'
@@ -145,9 +145,7 @@ class ResolveDuplicates extends React.Component {
           }
           return (
             <Portal ref={this.setRef} transparent>
-              <Close>
-                <CloseButton onClick={close} />
-              </Close>
+              <CloseModal onClick={close} />
               <Columns>
                 <H3>This manuscript</H3>
                 <H3>Duplicate(s)</H3>

app/components/activity/ActivityDetails.jsx

@@ -4,15 +4,7 @@ import { H2, Button, Action, Link } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
 import moment from 'moment'
-import {
-  Buttons,
-  Close,
-  CloseButton,
-  Table,
-  Portal,
-  TextArea,
-  Toggle,
-} from '../ui'
+import { Buttons, CloseModal, Table, Portal, TextArea, Toggle } from '../ui'
 import Mailer from '../mailer'
 import { CREATE_NOTE } from '../operations'
 import EventDescription from './EventDescription'
@@ -99,9 +91,7 @@ const NewNote = ({ close, manuscriptId, message, onChange }) => (
       }
       return (
         <Portal transparent>
-          <Close style={{ margin: 0 }}>
-            <CloseButton onClick={() => close()} />
-          </Close>
+          <CloseModal onClick={() => close()} />
           <H2>Add a note</H2>
           <TextArea
             label="Note (visible only to administrators)"

app/components/activity/MetaEdit.jsx

@@ -4,7 +4,7 @@ import styled, { withTheme } from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H2, Button, Icon, TextField } from '@pubsweet/ui'
 import { states } from 'config'
-import { Portal, Buttons, Close, CloseButton, Notification } from '../ui'
+import { Portal, Buttons, CloseModal, Notification } from '../ui'
 import { ManuscriptMutations, NoteMutations } from '../SubmissionMutations'
 import ResolveDuplicates from '../ResolveDuplicates'
 import GrantSearch from '../GrantSearch'
@@ -94,9 +94,7 @@ const MetaEdit = withTheme(
     }
     return (
       <Portal style={{ backgroundColor: theme.colorBackground }} transparent>
-        <Close>
-          <CloseButton onClick={close} />
-        </Close>
+        <CloseModal onClick={close} />
         <React.Fragment>
           {(() => {
             switch (toEdit) {

app/components/citation-search/PubMedSearch.jsx

@@ -8,8 +8,7 @@ import {
   A,
   B,
   Buttons,
-  Close,
-  CloseButton,
+  CloseModal,
   HTMLString,
   Loading,
   LoadingIcon,
@@ -253,11 +252,7 @@ class PubMedSearch extends React.Component {
       <SearchArea>
         {this.state.unmatched && (
           <Portal transparent>
-            <Close>
-              <CloseButton
-                onClick={() => this.setState({ unmatched: false })}
-              />
-            </Close>
+            <CloseModal onClick={() => this.setState({ unmatched: false })} />
             <UnmatchedCitation
               citation={this.handleUnmatched}
               close={() => this.setState({ unmatched: false })}

app/components/mailer/MailerForm.jsx

@@ -4,7 +4,7 @@ import { capitalize } from 'lodash'
 import styled from 'styled-components'
 import { th, override } from '@pubsweet/ui-toolkit'
 import { Button, H2, TextField, CheckboxGroup } from '@pubsweet/ui'
-import { Buttons, TextArea, Portal, Close, CloseButton } from '../ui'
+import { Buttons, TextArea, Portal, CloseModal } from '../ui'
 
 const Recipient = styled.fieldset`
   border: 0;
@@ -48,9 +48,7 @@ const MailerForm = props => {
   })
   return (
     <Portal transparent>
-      <Close style={{ margin: 0 }}>
-        <CloseButton onClick={() => props.close()} />
-      </Close>
+      <CloseModal onClick={() => props.close()} />
       <H2>Send an email</H2>
       <form onSubmit={props.handleSubmit}>
         <Recipient>

app/components/preview-files/FileLightbox.jsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Action } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import PDFViewer from '../../component-pdf-viewer'
-import { A, Page, Center, Cover, Close, CloseButton } from '../ui'
+import { A, Page, Center, Cover, CloseModal } from '../ui'
 import { ImageTypes } from './'
 
 const Image = styled.img`
@@ -55,11 +55,7 @@ class FilePreview extends React.Component {
           ReactDOM.createPortal(
             <Cover>
               <Page>
-                <Close>
-                  <CloseButton
-                    onClick={() => this.setState({ preview: null })}
-                  />
-                </Close>
+                <CloseModal onClick={() => this.setState({ preview: null })} />
                 {preview.mimeType === 'application/pdf' ? (
                   <PDF>
                     <PDFViewer url={preview.url} />

app/components/review-wizard/ReviewFooter.jsx

 import React from 'react'
 import { withRouter } from 'react-router'
 import { Mutation } from 'react-apollo'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { Action, Button, H2, Icon } from '@pubsweet/ui'
-import {
-  PreviewFooter,
-  Notification,
-  Buttons,
-  Portal,
-  Close,
-  CloseButton,
-} from '../ui'
+import { Action, Button, H2, Icon, RadioGroup } from '@pubsweet/ui'
+import { PreviewFooter, Notification, Buttons, Portal, CloseModal } from '../ui'
 import SubmissionCancel from '../SubmissionCancel'
 import { REVIEW_MANUSCRIPT, GET_REVIEWS, CURRENT_REVIEW } from './operations'
 import ReviewInstructions from './ReviewInstructions'
 import ListErrors from './ListErrors'
 import SubmissionError from './SubmissionError'
 
-const SmallAction = styled(Action)`
-  font-size: ${th('fontSizeBaseSmall')};
-  font-weight: 600;
-`
-const showPopup = button => {
-  button.parentNode.nextElementSibling.classList.remove('hidden')
-}
-
 class ReviewFooter extends React.Component {
   state = {
     report: false,
     approve: false,
     cancel: false,
+    radio: '',
   }
   render() {
     const { currentUser, manuscript, previews, review, history } = this.props
-    const { report, approve, cancel } = this.state
+    const { report, approve, cancel, radio } = this.state
     const { annotations } = review || []
     const { status, teams } = manuscript
     const submitter = teams.find(t => t.role === 'submitter').teamMembers[0]
@@ -71,67 +55,59 @@ class ReviewFooter extends React.Component {
                   </Button>
                 )
               } else if (manuscript.status === 'xml-triage') {
+                const options = [
+                  {
+                    value: 'xml-qa',
+                    label: 'XML QA',
+                  },
+                  {
+                    value: 'xml-review',
+                    label: 'Author review',
+                  },
+                  {
+                    value: 'xml-complete',
+                    label: 'PMC (skip review)',
+                  },
+                ]
                 return (
                   <div>
                     <Button
                       onClick={() => this.setState({ approve: true })}
                       primary
                     >
-                      Approve and route
+                      Approve &amp; route
                     </Button>
                     <Button onClick={() => this.setState({ report: true })}>
                       Ask for correction
                     </Button>
                     {approve && (
                       <Portal transparent>
-                        <Close>
-                          <CloseButton
-                            onClick={() => this.setState({ approve: false })}
-                          />
-                        </Close>
+                        <CloseModal
+                          onClick={() => this.setState({ approve: false })}
+                        />
                         <H2>Errors fixed? Send for:</H2>
-                        <Buttons>
-                          <Button
-                            onClick={async () => {
-                              await setStatus('xml-qa')
-                              this.setState({ approve: false })
-                            }}
-                            primary
-                          >
-                            XML QA
-                          </Button>
+                        <RadioGroup
+                          name="setstatus"
+                          onChange={radio => this.setState({ radio })}
+                          options={options}
+                        />
+                        <Buttons right>
                           <Button
+                            disabled={!radio}
                             onClick={async () => {
-                              await setStatus('xml-review')
-                              history.push(
-                                `/submission/${manuscript.id}/activity`,
-                              )
+                              await setStatus(radio)
+                              if (radio === 'xml-qa') {
+                                this.setState({ approve: false })
+                              } else {
+                                history.push(
+                                  `/submission/${manuscript.id}/activity`,
+                                )
+                              }
                             }}
                             primary
                           >
-                            Author review
+                            Confirm &amp; send
                           </Button>
-                          <Button
-                            onClick={e => showPopup(e.currentTarget)}
-                            primary
-                          >
-                            PMC (skip review)
-                          </Button>
-                        </Buttons>
-                        <Notification className="hidden" type="warning">
-                          Are you sure you want to skip author review?{' '}
-                          <SmallAction
-                            onClick={async () => {
-                              await setStatus('xml-complete')
-                              history.push(
-                                `/submission/${manuscript.id}/activity`,
-                              )
-                            }}
-                          >
-                            I&apos;m sure!
-                          </SmallAction>
-                        </Notification>
-                        <Buttons right>
                           <Button
                             onClick={() => this.setState({ approve: false })}
                           >
@@ -212,11 +188,9 @@ class ReviewFooter extends React.Component {
                       <React.Fragment>
                         {annotations && annotations.length > 0 ? (
                           <Portal transparent>
-                            <Close>
-                              <CloseButton
-                                onClick={() => this.setState({ report: false })}
-                              />
-                            </Close>
+                            <CloseModal
+                              onClick={() => this.setState({ report: false })}
+                            />
                             <H2>Send the following errors?</H2>
                             <ListErrors annotations={annotations} />
                             <Buttons right>

app/components/review-wizard/ReviewPage.jsx

@@ -31,6 +31,7 @@ const ReviewPage = ({ match, ...props }) => (
           }
           return (
             <ReviewWithHeader
+              key={`${manuscript.id}${manuscript.status}`}
               manuscript={manuscript}
               match={match}
               reload={() => refetch()}

app/components/review-wizard/SubmissionError.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H2, CheckboxGroup } from '@pubsweet/ui'
-import { Portal, Close, CloseButton, Loading, LoadingIcon, Toggle } from '../ui'
+import { Portal, CloseModal, Loading, LoadingIcon, Toggle } from '../ui'
 import SubmissionErrorReport, {
   adminOptions,
   Fieldset,
@@ -91,9 +91,7 @@ class SubmissionError extends React.Component {
     const html = manuscript.files.find(file => file.type === 'tempHTML')
     return (
       <Portal transparent>
-        <Close style={{ margin: 0 }}>
-          <CloseButton onClick={close} />
-        </Close>
+        <CloseModal onClick={close} />
         <H2>Report Errors</H2>
         <Toggle>
           <Action

app/components/submission-wizard/Submit.jsx

@@ -5,8 +5,7 @@ import { Button, Action, CheckboxGroup, H1, H2, H3, Icon } from '@pubsweet/ui'
 import {
   Page,
   Buttons,
-  Close,
-  CloseButton,
+  CloseModal,
   PreviewPage,
   PreviewFooter,
   PreviewPanel,
@@ -35,10 +34,9 @@ const Alert = withTheme(({ children, theme }) => (
   </Icon>
 ))
 
-const CloseEdit = styled(Close)`
+const CloseEdit = styled(CloseModal)`
   margin: calc(${th('gridUnit')} * 6) auto calc(${th('gridUnit')} * 2);
 `
-
 const ErrorReport = styled.p`
   white-space: pre-wrap;
   font-style: italic;
@@ -164,11 +162,7 @@ class Submit extends React.Component {
             } else if (editing) {
               return (
                 <Page>
-                  <CloseEdit>
-                    <CloseButton
-                      onClick={() => this.setState({ editing: null })}
-                    />
-                  </CloseEdit>
+                  <CloseEdit onClick={() => this.setState({ editing: null })} />
                   {editing.props['data-upload'] ? (
                     <div>
                       <H2>Files</H2>
@@ -367,9 +361,7 @@ class Submit extends React.Component {
           )}
           {reject && (
             <Portal transparent>
-              <Close style={{ margin: 0 }}>
-                <CloseButton onClick={() => this.setState({ reject: false })} />
-              </Close>
+              <CloseModal onClick={() => this.setState({ reject: false })} />
               {currentUser.admin && status === 'submitted' ? (
                 <SubmissionErrorReport
                   checkedBoxes={checkedBoxes}

app/components/ui/atoms/CloseButton.jsx

@@ -6,8 +6,11 @@ const Close = styled.p`
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  margin: 0;
+  & + h2 {
+    margin-top: 0;
+  }
 `
-
 const CloseButton = ({ size = 4, ...props }) => (
   <Action {...props}>
     <Icon color="currentColor" size={size}>
@@ -16,4 +19,10 @@ const CloseButton = ({ size = 4, ...props }) => (
   </Action>
 )
 
-export { Close, CloseButton }
+const CloseModal = ({ className, ...props }) => (
+  <Close className={className}>
+    <CloseButton {...props} />
+  </Close>
+)
+
+export { CloseModal, CloseButton }

app/components/ui/atoms/Modal.jsx

@@ -14,11 +14,6 @@ export const Modal = styled.div`
   max-width: 90%;
   box-sizing: border-box;
   margin: calc(${th('gridUnit')} * 4) auto;
-  & > p:first-child {
-    & + h2 {
-      margin-top: 0;
-    }
-  }
   h2:first-child {
     margin-top: 0;
   }

app/components/ui/atoms/index.js

 export { LoadingIcon, Loading } from './LoadingIcon'
-export { Close, CloseButton } from './CloseButton'
+export { CloseModal, CloseButton } from './CloseButton'
 export { default as HTMLString } from './HTMLString'
 export { default as Select } from './Select'
 export { default as TextArea } from './TextArea'