From 5d67bd8c4859fe104c931f177f532933e45d543a Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 23 May 2018 16:35:59 +0300
Subject: [PATCH] chore(components-faraday): improve and remove dead code from
 faraday components

---
 .../components/Reviewers/InviteReviewers.js   | 20 +++--
 .../src/components/Reviewers/ReviewerForm.js  |  2 +-
 .../src/components/Reviewers/ReviewerList.js  | 36 +++++----
 .../Reviewers/ReviewersDetailsList.js         | 64 ++++++++--------
 .../components/Reviewers/ReviewersSelect.js   | 14 ++--
 .../SignUp/ReviewerInviteDecision.js          |  6 +-
 .../components/SignUp/SignUpInvitationPage.js | 10 +--
 .../src/components/SignUp/SignUpStep0.js      |  2 +-
 .../UIComponents/ConfirmationPage.js          | 17 ++---
 .../src/components/UIComponents/Dropdown.js   | 76 -------------------
 .../UIComponents/Dropdown.local.scss          | 57 --------------
 .../src/components/UIComponents/ErrorPage.js  | 14 ++--
 .../src/components/UIComponents/NotFound.js   |  2 +-
 .../src/components/UIComponents/index.js      |  1 -
 14 files changed, 90 insertions(+), 231 deletions(-)
 delete mode 100644 packages/components-faraday/src/components/UIComponents/Dropdown.js
 delete mode 100644 packages/components-faraday/src/components/UIComponents/Dropdown.local.scss

diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index 99835a001..808490268 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -1,22 +1,22 @@
 import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
+import styled, { css } from 'styled-components'
 import { Icon, Button, th, Spinner } from '@pubsweet/ui'
-import styled, { css, withTheme } from 'styled-components'
 import { compose, withHandlers, lifecycle } from 'recompose'
 import {
   ConfirmationModal,
   withModal2,
 } from 'pubsweet-component-modal/src/components'
 
-import { ReviewerBreakdown } from '../Invitations'
 import { ReviewerForm, ReviewersList } from './'
+import { ReviewerBreakdown } from '../Invitations'
 import {
   selectReviewers,
+  clearReviewersError,
   selectFetchingInvite,
   selectReviewersError,
-  selectFetchingReviewers,
   getCollectionReviewers,
-  clearReviewersError,
+  selectFetchingReviewers,
 } from '../../redux/reviewers'
 
 const InviteReviewers = ({ showInviteModal }) => (
@@ -24,7 +24,6 @@ const InviteReviewers = ({ showInviteModal }) => (
 )
 
 const InviteReviewersModal = compose(
-  withTheme,
   connect(
     state => ({
       reviewers: selectReviewers(state),
@@ -51,22 +50,21 @@ const InviteReviewersModal = compose(
   }),
 )(
   ({
-    theme,
     hideModal,
     onConfirm,
     showModal,
-    reviewers = [],
-    invitations = [],
     versionId,
     collectionId,
     getReviewers,
     reviewerError,
     fetchingInvite,
     fetchingReviewers,
+    reviewers = [],
+    invitations = [],
   }) => (
     <Root>
       <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
-        <Icon color={theme.colorPrimary}>x</Icon>
+        <Icon primary>x</Icon>
       </CloseIcon>
 
       <Title>Invite Reviewers</Title>
@@ -192,9 +190,9 @@ const Root = styled.div`
 const AssignButton = styled(Button)`
   ${defaultText};
   align-items: center;
-  color: ${th('colorTextReverse')};
   background-color: ${th('colorPrimary')};
-  height: calc(${th('subGridUnit')}*5);
+  color: ${th('colorTextReverse')};
+  height: calc(${th('subGridUnit')} * 5);
   text-align: center;
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js
index 02ec4448e..465ed9dcb 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js
@@ -64,8 +64,8 @@ export default compose(
     ) => {
       const reviewerData = pick(values, [
         'email',
-        'firstName',
         'lastName',
+        'firstName',
         'affiliation',
       ])
       inviteReviewer(reviewerData, collectionId).then(() => {
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
index 1a0b2964f..b5d73a2ab 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
@@ -2,33 +2,31 @@ import React from 'react'
 import moment from 'moment'
 import { pick } from 'lodash'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { th, Icon } from '@pubsweet/ui'
-import styled, { withTheme } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
 
 import { revokeReviewer, inviteReviewer } from '../../redux/reviewers'
 
-const ResendRevoke = withTheme(
-  ({ theme, showConfirmResend, showConfirmRevoke, status }) => (
-    <ActionButtons>
-      <div onClick={showConfirmResend}>
-        <Icon color={theme.colorPrimary}>refresh-cw</Icon>
+const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => (
+  <ActionButtons>
+    <div onClick={showConfirmResend}>
+      <Icon primary>refresh-cw</Icon>
+    </div>
+    {status === 'pending' && (
+      <div onClick={showConfirmRevoke}>
+        <Icon primary>x-circle</Icon>
       </div>
-      {status === 'pending' && (
-        <div onClick={showConfirmRevoke}>
-          <Icon color={theme.colorPrimary}>x-circle</Icon>
-        </div>
-      )}
-    </ActionButtons>
-  ),
+    )}
+  </ActionButtons>
 )
 
 const ReviewersList = ({
-  renderAcceptedLabel,
   reviewers,
+  renderTimestamp,
   showConfirmResend,
   showConfirmRevoke,
-  renderTimestamp,
+  renderAcceptedLabel,
 }) =>
   reviewers.length > 0 && (
     <Root>
@@ -106,9 +104,9 @@ export default compose(
   withHandlers({
     showConfirmResend: ({
       showModal,
-      goBackToReviewers,
-      inviteReviewer,
       collectionId,
+      inviteReviewer,
+      goBackToReviewers,
     }) => reviewer => () => {
       showModal({
         title: 'Resend reviewer invite',
@@ -125,9 +123,9 @@ export default compose(
     showConfirmRevoke: ({
       showModal,
       hideModal,
-      goBackToReviewers,
-      revokeReviewer,
       collectionId,
+      revokeReviewer,
+      goBackToReviewers,
     }) => invitationId => () => {
       showModal({
         title: 'Unassign Reviewer',
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
index a3df9a1ca..ef4cf0bb0 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
@@ -3,11 +3,11 @@ import moment from 'moment'
 import { pick, get } from 'lodash'
 import { connect } from 'react-redux'
 import { th, Icon } from '@pubsweet/ui'
-import styled, { withTheme } from 'styled-components'
+import styled, { css } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
 import {
-  ConfirmationModal,
   withModal2,
+  ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 
 import {
@@ -18,28 +18,26 @@ import {
   getCollectionReviewers,
 } from '../../redux/reviewers'
 
-const ResendRevoke = withTheme(
-  ({ theme, showConfirmResend, showConfirmRevoke, status }) => (
-    <ActionButtons>
-      <div onClick={showConfirmResend}>
-        <Icon color={theme.colorPrimary}>refresh-cw</Icon>
+const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => (
+  <ActionButtons>
+    <div onClick={showConfirmResend}>
+      <Icon primary>refresh-cw</Icon>
+    </div>
+    {status === 'pending' && (
+      <div onClick={showConfirmRevoke}>
+        <Icon primary>x-circle</Icon>
       </div>
-      {status === 'pending' && (
-        <div onClick={showConfirmRevoke}>
-          <Icon color={theme.colorPrimary}>x-circle</Icon>
-        </div>
-      )}
-    </ActionButtons>
-  ),
+    )}
+  </ActionButtons>
 )
 
 const TR = ({
-  reviewer: r,
-  renderAcceptedLabel,
   index,
+  reviewer: r,
   renderTimestamp,
   showConfirmResend,
   showConfirmRevoke,
+  renderAcceptedLabel,
 }) => {
   const submittedOn = get(r, 'review.submittedOn')
   return (
@@ -71,11 +69,11 @@ const TR = ({
   )
 }
 const ReviewersDetailsList = ({
-  renderAcceptedLabel,
   reviewers,
+  renderTimestamp,
   showConfirmResend,
   showConfirmRevoke,
-  renderTimestamp,
+  renderAcceptedLabel,
 }) =>
   reviewers.length > 0 ? (
     <Root>
@@ -112,8 +110,8 @@ const ReviewersDetailsList = ({
 
 const ModalWrapper = compose(
   connect(state => ({
-    fetchingInvite: selectFetchingInvite(state),
     modalError: selectReviewersError(state),
+    fetchingInvite: selectFetchingInvite(state),
   })),
 )(({ fetchingInvite, ...rest }) => (
   <ConfirmationModal {...rest} isFetching={fetchingInvite} />
@@ -145,10 +143,10 @@ export default compose(
     showConfirmResend: ({
       showModal,
       hideModal,
+      collectionId,
       setModalError,
-      goBackToReviewers,
       inviteReviewer,
-      collectionId,
+      goBackToReviewers,
       getCollectionReviewers,
     }) => reviewer => () => {
       showModal({
@@ -168,10 +166,10 @@ export default compose(
     showConfirmRevoke: ({
       showModal,
       hideModal,
+      collectionId,
       setModalError,
-      goBackToReviewers,
       revokeReviewer,
-      collectionId,
+      goBackToReviewers,
       getCollectionReviewers,
     }) => invitationId => () => {
       showModal({
@@ -189,12 +187,16 @@ export default compose(
 )(ReviewersDetailsList)
 
 // #region styled-components
-const ReviewerEmail = styled.span`
-  font-size: ${th('fontSizeBaseSmall')};
+const defaultText = css`
   color: ${th('colorPrimary')};
+  font-size: ${th('fontSizeBaseSmall')};
   font-family: ${th('fontReading')};
 `
 
+const ReviewerEmail = styled.span`
+  ${defaultText};
+`
+
 const ReviewerName = ReviewerEmail.extend`
   text-decoration: underline;
 `
@@ -231,22 +233,18 @@ const Table = styled.table`
   width: 100%;
 
   & thead tr {
+    ${defaultText};
     border-bottom: ${th('borderDefault')};
-    color: ${th('colorPrimary')};
-    font-family: ${th('fontReading')};
-    font-size: ${th('fontSizeBaseSmall')};
     font-weight: bold;
-    height: 40px;
+    height: calc(${th('subGridUnit')} * 7);
     text-align: left;
     line-height: 1.5;
   }
 `
 const Row = styled.tr`
+  ${defaultText};
   border-bottom: ${th('borderDefault')};
-  color: ${th('colorPrimary')};
-  font-family: ${th('fontReading')};
-  font-size: ${th('fontSizeBaseSmall')};
-  height: 40px;
+  height: calc(${th('subGridUnit')} * 7);
   text-align: left;
   line-height: 1.5;
 
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js b/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js
index d25ffaecd..f30d64c2a 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js
@@ -26,11 +26,11 @@ const renderField = ({ input: { onBlur, ...rest }, meta }) => {
 }
 
 const ReviewersSelect = ({
-  label = 'Email*',
-  values = [],
   onSelect,
-  reviewerEmail,
   formMeta,
+  reviewerEmail,
+  values = [],
+  label = 'Email*',
 }) => {
   const active = !!get(formMeta, 'email.active')
   const filteredValues = values.filter(v => v.email.includes(reviewerEmail))
@@ -82,8 +82,8 @@ const Input = styled.input`
   border-radius: 2px;
   font-family: inherit;
   font-size: inherit;
-  padding: 0 calc(24px / 2);
-  height: calc(24px * 2);
+  padding: 0 calc(${th('gridUnit')} / 2);
+  height: calc(${th('gridUnit')} * 2);
 `
 
 const RenderRoot = styled.div`
@@ -131,7 +131,7 @@ const SuggestionsContainer = styled.div`
 const FormLabel = styled.span`
   ${defaultText};
   font-weight: 300;
-  height: 19px;
+  height: calc(${th('subGridUnit')} * 3);
   text-transform: uppercase;
 `
 
@@ -140,7 +140,7 @@ const Root = styled.div`
   flex: 1;
   flex-direction: column;
   height: 92px;
-  margin-right: 5px;
+  margin-right: ${th('subGridUnit')};
   position: relative;
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
index c47b24cc6..b613bc969 100644
--- a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
+++ b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
@@ -9,8 +9,8 @@ import { loginUser } from 'pubsweet-component-login/actions'
 import { Button, ValidatedField, TextField } from '@pubsweet/ui'
 
 import { redirectToError } from '../utils'
-import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
 import { FormItems } from '../UIComponents'
+import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
 
 const {
   Row,
@@ -32,8 +32,8 @@ const ReviewerInviteDecision = ({
   agree,
   error,
   handleSubmit,
-  reviewerEmail,
   errorMessage,
+  reviewerEmail,
 }) => (
   <RootContainer bordered>
     <Title>Hindawi Invitation</Title>
@@ -74,8 +74,8 @@ export default compose(
     push,
     replace,
     loginUser,
-    setReviewerPassword,
     reviewerDecision,
+    setReviewerPassword,
   }),
   lifecycle({
     componentDidMount() {
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
index 508ecf4d0..0ad1a8f2a 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
@@ -50,19 +50,19 @@ export default compose(
     const params = new URLSearchParams(location.search)
     const email = params.get('email')
     const token = params.get('token')
-    const firstName = params.get('firstName')
+    const title = params.get('title')
     const lastName = params.get('lastName')
+    const firstName = params.get('firstName')
     const affiliation = params.get('affiliation')
-    const title = params.get('title')
 
     return {
       initialValues: {
         email,
-        firstName,
-        lastName,
-        affiliation,
         title,
         token,
+        lastName,
+        firstName,
+        affiliation,
       },
     }
   }),
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 1e7c02b50..fb3e7eb4e 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { reduxForm } from 'redux-form'
 import { isUndefined } from 'lodash'
+import { reduxForm } from 'redux-form'
 import { required } from 'xpub-validators'
 import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui'
 
diff --git a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
index bc6a07e7d..3f974da8f 100644
--- a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
+++ b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
@@ -1,17 +1,17 @@
 import React from 'react'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
-import { Button } from '@pubsweet/ui'
 import { get, isEmpty } from 'lodash'
-import { withJournal } from 'xpub-journal'
 import styled from 'styled-components'
+import { Button, th } from '@pubsweet/ui'
+import { withJournal } from 'xpub-journal'
 import { getFragmentAuthors } from 'pubsweet-components-faraday/src/redux/authors'
 
 const ConfirmationPage = ({
   journal,
+  history,
   authors = [],
   location: { state },
-  history,
 }) => {
   const email = get(authors.find(a => a.isCorresponding), 'email')
   return (
@@ -66,22 +66,21 @@ export default compose(
 )(ConfirmationPage)
 
 // #region styles
-
 const Root = styled.div`
+  color: ${th('colorText')};
   margin: 0 auto;
   text-align: center;
   width: 70vw;
-  color: ${({ theme }) => theme.colorText};
 
   a {
-    color: ${({ theme }) => theme.colorText};
+    color: ${th('colorText')};
   }
 `
 
 const Title = styled.div`
-  font-size: ${({ theme }) => theme.fontSizeHeading5};
-  font-family: ${({ theme }) => theme.fontHeading};
-  color: ${({ theme }) => theme.colorPrimary};
+  color: ${th('colorPrimary')};
+  font-size: ${th('fontSizeHeading5')};
+  font-family: ${th('fontHeading')};
   margin: 10px auto;
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/UIComponents/Dropdown.js b/packages/components-faraday/src/components/UIComponents/Dropdown.js
deleted file mode 100644
index 74aa2b0ae..000000000
--- a/packages/components-faraday/src/components/UIComponents/Dropdown.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react'
-import { compose, withState, withHandlers } from 'recompose'
-import classnames from 'classnames'
-
-import classes from './Dropdown.local.scss'
-
-const DropdownOptions = ({ visible, options, onSelect }) =>
-  visible ? (
-    <div className={classes.options}>
-      {options.map(opt => (
-        <div key={opt.value} onClick={onSelect(opt)}>
-          {opt.label}
-        </div>
-      ))}
-    </div>
-  ) : null
-
-const Dropdown = ({
-  label,
-  showDropdown,
-  inputValue,
-  changeInput,
-  defaultValue = null,
-  options,
-  onChange,
-  setDropdown,
-  selectValue,
-}) => (
-  <div className={classes.container}>
-    <span className={classes.label}>{label}</span>
-    <div className={classes.inputContainer}>
-      <input
-        onChange={changeInput}
-        onFocus={setDropdown(true)}
-        placeholder="Type or select from dropdown"
-        type="text"
-        value={inputValue.label}
-      />
-      <span className={classnames({ [classes.downarrow]: showDropdown })}>
-        &#9658;
-      </span>
-    </div>
-    <DropdownOptions
-      onSelect={selectValue}
-      options={options.filter(opt => opt.label.indexOf(inputValue.label) > -1)}
-      visible={showDropdown}
-    />
-  </div>
-)
-
-export default compose(
-  withState(
-    'inputValue',
-    'setInputValue',
-    ({ defaultValue }) => defaultValue || { label: '' },
-  ),
-  withState('showDropdown', 'setDropdownVisibility', false),
-  withHandlers({
-    changeInput: ({ setInputValue }) => e => {
-      e.persist()
-      setInputValue(prev => ({ ...prev, label: e.target.value }))
-    },
-    setDropdown: ({ setDropdownVisibility }) => visibilty => e => {
-      setDropdownVisibility(visibilty)
-    },
-    selectValue: ({
-      setInputValue,
-      setDropdownVisibility,
-      onSelect,
-    }) => value => e => {
-      setInputValue(value)
-      onSelect && onSelect(value)
-      setDropdownVisibility(false)
-    },
-  }),
-)(Dropdown)
diff --git a/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss b/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss
deleted file mode 100644
index ffe230262..000000000
--- a/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  margin: 5px 0;
-  position: relative;
-}
-
-.label {
-  font-size: 16px;
-  font-weight: 400;
-  margin: 5px 0;
-}
-
-.inputContainer {
-  align-items: center;
-  display: flex;
-  position: relative;
-
-  input {
-    border: 1px solid #888;
-    border-radius: 2px;
-    display: flex;
-    flex: 1;
-    height: 20px;
-    padding: 0 2px;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  span {
-    position: absolute;
-    right: 10px;
-    top: 1px;
-    transform: rotateZ(90deg);
-    transition: transform 0.2s linear;
-  }
-}
-
-.options {
-  background-color: #eee;
-  cursor: pointer;
-  left: 0;
-  position: absolute;
-  top: 50px;
-  width: 100%;
-  z-index: 1000;
-
-  :hover {
-    background-color: #aaa;
-  }
-}
-
-.downarrow {
-  transform: rotateZ(270deg) !important;
-}
diff --git a/packages/components-faraday/src/components/UIComponents/ErrorPage.js b/packages/components-faraday/src/components/UIComponents/ErrorPage.js
index 4022bd8a9..fa7f4df22 100644
--- a/packages/components-faraday/src/components/UIComponents/ErrorPage.js
+++ b/packages/components-faraday/src/components/UIComponents/ErrorPage.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button } from '@pubsweet/ui'
 import styled from 'styled-components'
+import { Button, th } from '@pubsweet/ui'
 
 const ErrorPage = ({ location: { state }, history }) => (
   <Root>
@@ -15,20 +15,20 @@ export default ErrorPage
 
 // #region styles
 const Root = styled.div`
+  color: ${th('colorText')};
   margin: 0 auto;
   text-align: center;
   width: 70vw;
-  color: ${({ theme }) => theme.colorText};
 
   a {
-    color: ${({ theme }) => theme.colorText};
+    color: ${th('colorText')};
   }
 `
 
 const Title = styled.div`
-  font-size: ${({ theme }) => theme.fontSizeHeading5};
-  font-family: ${({ theme }) => theme.fontHeading};
-  color: ${({ theme }) => theme.colorPrimary};
-  margin: 10px auto;
+  color: ${th('colorPrimary')};
+  font-size: ${th('fontSizeHeading5')};
+  font-family: ${th('fontHeading')};
+  margin: calc(${th('subGridUnit')} * 2) auto;
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/UIComponents/NotFound.js b/packages/components-faraday/src/components/UIComponents/NotFound.js
index 0c4acda1b..6a4ed011b 100644
--- a/packages/components-faraday/src/components/UIComponents/NotFound.js
+++ b/packages/components-faraday/src/components/UIComponents/NotFound.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Icon, Button, th } from '@pubsweet/ui'
 import styled from 'styled-components'
+import { Icon, Button, th } from '@pubsweet/ui'
 
 const NotFound = ({ history }) => (
   <Root>
diff --git a/packages/components-faraday/src/components/UIComponents/index.js b/packages/components-faraday/src/components/UIComponents/index.js
index 738dc3c98..b2defb43c 100644
--- a/packages/components-faraday/src/components/UIComponents/index.js
+++ b/packages/components-faraday/src/components/UIComponents/index.js
@@ -4,6 +4,5 @@ export { FormItems }
 export { default as Logo } from './Logo'
 export { default as Spinner } from './Spinner'
 export { default as NotFound } from './NotFound'
-export { default as Dropdown } from './Dropdown'
 export { default as ErrorPage } from './ErrorPage'
 export { default as ConfirmationPage } from './ConfirmationPage'
-- 
GitLab