From 682167194e8bc4d815b0c4cc6f4ddbbbe57e06cc Mon Sep 17 00:00:00 2001
From: zainvirani <zainilabideen.virani@mail.mcgill.ca>
Date: Wed, 6 Sep 2017 16:39:43 -0400
Subject: [PATCH] stylistic changes to save button

---
 htdocs/css/direct-entry.css    | 11 +++++++++++
 jsx/InstrumentForm.js          | 15 +++++++++------
 jsx/InstrumentFormContainer.js | 26 +++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/htdocs/css/direct-entry.css b/htdocs/css/direct-entry.css
index 40c5dd9a9e5..b752315af6d 100644
--- a/htdocs/css/direct-entry.css
+++ b/htdocs/css/direct-entry.css
@@ -37,3 +37,14 @@ label {
     margin-top: 10px;
     z-index: 0;
 }
+
+#save {
+    margin: auto;
+    display: block;
+    color: white;
+    background-color: #08245b;
+}
+
+#warning {
+    color: red;
+}
diff --git a/jsx/InstrumentForm.js b/jsx/InstrumentForm.js
index 49caba1c360..2fe1b37c648 100644
--- a/jsx/InstrumentForm.js
+++ b/jsx/InstrumentForm.js
@@ -2,7 +2,7 @@ import Form from './Form';
 
 const { SelectElement, RadioGroupLabels, RadioGroupElement, CheckboxGroupElement, TextboxElement, DateElement } = Form;
 
-const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, onSave}) => {
+const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, onSave, saveText, saveWarning}) => {
   return (
     <div>
       <div id="instrument-error">
@@ -14,7 +14,7 @@ const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, o
           renderElement(element, index, onUpdate, showRequired && element.Options.RequireResponse)
         ))
       }
-      <SaveButton onClick={onSave}/>
+      <SaveButton onClick={onSave} saveText={saveText} saveWarning={saveWarning}/>
     </div>
   );
 };
@@ -140,11 +140,14 @@ function renderDate(element, key, onUpdate, isRequired) {
   )
 }
 
-const SaveButton = ({onClick}) => {
+const SaveButton = ({onClick, saveText, saveWarning}) => {
   return (
-    <button onClick={onClick} type="button" className="btn btn-default btn-lg">
-      <span className="" aria-hidden="true"></span> Save
-    </button>
+    <div>
+      <button onClick={onClick} id="save" type="button" className="btn btn-default btn-lg">
+        <span className="" aria-hidden="true"></span> {saveText}
+      </button>
+      <p id="warning"><center>{saveWarning}</center></p>
+    </div>
   );
 }
 
diff --git a/jsx/InstrumentFormContainer.js b/jsx/InstrumentFormContainer.js
index 24c91e9e0bf..a04f7af189f 100644
--- a/jsx/InstrumentFormContainer.js
+++ b/jsx/InstrumentFormContainer.js
@@ -12,14 +12,32 @@ class InstrumentFormContainer extends React.Component {
       data: this.props.initialData,
       localizedInstrument: localizeInstrument(this.props.instrument, this.props.lang),
       showRequired: false,
-      errorMessage: null
+      errorMessage: null,
     };
-
+    
     this.updateInstrumentData = this.updateInstrumentData.bind(this);
     this.incompleteRequiredFieldExists = this.incompleteRequiredFieldExists.bind(this);
     this.onSaveButtonClick = this.onSaveButtonClick.bind(this);
   }
 
+  getSaveText(lang) {
+    switch(lang) {
+      case 'en-ca':
+        return 'Save';
+      case 'fr-ca':
+        return 'Enregistrer';
+    }
+  }
+
+  getSaveWarning(lang) {
+    switch(lang) {
+      case 'en-ca':
+        return 'You cannot modify your answers after clicking this button. Please ensure all answers are correct.';
+      case 'fr-ca':
+        return 'Vous ne pouvez pas modifier vos réponses après avoir cliqué sur ce bouton. Assurez-vous que toutes les réponses sont correctes.';
+    }
+  }
+  
   /**
    * This function is called when the user inputs or updates an instrument
    * field. It is responsible for updating `state.data`, which involves not
@@ -151,7 +169,7 @@ class InstrumentFormContainer extends React.Component {
 
   render() {
     const { data, localizedInstrument } = this.state;
-    const { context, options } = this.props;
+    const { context, options, lang } = this.props;
 
     return (
       <InstrumentForm
@@ -167,6 +185,8 @@ class InstrumentFormContainer extends React.Component {
         errorMessage={this.state.errorMessage}
         onUpdate={this.updateInstrumentData}
         onSave={this.onSaveButtonClick}
+        saveText={this.getSaveText(lang)}
+        saveWarning={this.getSaveWarning(lang)}
       />
     );
   }