From f358a966fd0f58996ab64facb7f130cd85e22e9d Mon Sep 17 00:00:00 2001
From: sima-qian <29804933+sima-qian@users.noreply.github.com>
Date: Thu, 18 Oct 2018 19:06:16 +0100
Subject: [PATCH] style case title input area, relates #148

---
 src/components/Pages/AddNew/AddNewContainer.js | 18 +++++++++++++++++-
 .../Pages/AddNew/NewTileTextInput.js           |  5 +----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Pages/AddNew/AddNewContainer.js b/src/components/Pages/AddNew/AddNewContainer.js
index 4741ce5..cdd3fb0 100644
--- a/src/components/Pages/AddNew/AddNewContainer.js
+++ b/src/components/Pages/AddNew/AddNewContainer.js
@@ -53,6 +53,22 @@ const StyledButton = styled.input`
   }
 `;
 
+const StyledTextArea = styled.textarea`
+  resize: none;
+  margin: 16px;
+  padding: 8px;
+  width: calc(100vw - 48px);
+  height: calc(100vh - 322px);
+  border: none;
+  font-size: 16px;
+  line-height: 1.2;
+  font-family: "Roboto", Helvetica, sans-serif;
+
+  :focus {
+    outline-color: #c7c7b2;
+  }
+`;
+
 const MarkSchemeList = styled.ul`
   width: 100%;
 `;
@@ -116,7 +132,7 @@ export default class AddNewContainer extends React.Component {
             {this.props.caseDetailsDisplayed ? (
               <div id="add-new-text" data-testid="new-case-details">
                 <InstructionText text={"Case details"} />
-                <textarea
+                <StyledTextArea
                   onChange={this.props.caseDetailsChange}
                   placeholder="Add patient details"
                   max-length="5000"
diff --git a/src/components/Pages/AddNew/NewTileTextInput.js b/src/components/Pages/AddNew/NewTileTextInput.js
index 80e0085..d411ecf 100644
--- a/src/components/Pages/AddNew/NewTileTextInput.js
+++ b/src/components/Pages/AddNew/NewTileTextInput.js
@@ -11,11 +11,8 @@ const NewTileTextInputElement = styled.input`
   width: 100%;
   border: none;
   border-bottom: solid black 2px;
-
-  color: #009f5c;
   font-size: 20px;
-  font-family: "Nova Round", Helvetica, sans-serif;
-  text-transform: uppercase;
+  font-family: "Roboto", Helvetica, sans-serif;
   line-height: 1.2;
   letter-spacing: 1px;