feat(deleteManuscriptModal): Update modal for deleting a manuscript.

packages/component-faraday-ui/src/manuscriptDetails/DeleteManuscriptModal.js

@@ -23,10 +23,19 @@ const Form = compose(
   }),
 )(({ fetchingError, hideModal, handleSubmit, isFetching }) => (
   <Root>
-    <IconButton icon="x" onClick={hideModal} right={5} secondary top={5} />
-    <H2>Are you sure you want to remove this manuscript?</H2>
+    <IconButton
+      icon="x"
+      iconSize={2}
+      onClick={hideModal}
+      right={5}
+      secondary
+      top={5}
+    />
+    <H2 ml={4} mr={4}>
+      Are you sure you want to remove this manuscript?
+    </H2>
 
-    <Row mt={1}>
+    <Row mt={2}>
       <ItemOverrideAlert data-test-id="manuscript-return-reason" vertical>
         <Label required>
           Reason for removing the manuscript from the platform:
@@ -34,6 +43,7 @@ const Form = compose(
         <ValidatedField
           component={TextArea}
           name="comments"
+          style={{ 'max-width': '440px', 'min-width': '440px' }}
           validate={[required]}
         />
       </ItemOverrideAlert>
@@ -43,7 +53,7 @@ const Form = compose(
         {fetchingError}
       </Text>
     )}
-    <Row mt={1}>
+    <Row mt={3}>
       {isFetching ? (
         <Spinner size={3} />
       ) : (
@@ -52,7 +62,7 @@ const Form = compose(
             NO
           </Button>
           <Button data-test-id="modal-confirm" onClick={handleSubmit} primary>
-            YES
+            OK
           </Button>
         </Fragment>
       )}
@@ -87,18 +97,17 @@ DeleteManuscriptModal.defaultProps = {
 const DeleteIcon = styled(ActionLink)``
 const Root = styled.div`
   align-items: center;
-  background: ${th('colorBackground')};
+  background: ${th('colorBackgroundHue')};
   border: ${th('borderWidth')} ${th('borderStyle')} transparent;
   border-radius: ${th('borderRadius')};
   box-shadow: ${th('boxShadow')};
   display: flex;
   flex-direction: column;
   position: relative;
-  padding: calc(${th('gridUnit')} * 3);
-  width: calc(${th('gridUnit')} * 60);
+  padding: calc(${th('gridUnit')} * 5);
+  width: calc(${th('gridUnit')} * 65);
 
   ${H2} {
-    margin: 0;
     text-align: center;
   }
 `