UI enhancement for translation unit history (#511)

Author: Jee Yi

webapp/src/main/resources/properties/en.properties

@@ -710,14 +710,11 @@ textUnit.gitBlameModal.screenshotModalOpen=View
 workbench.translationHistoryModal.info=Text unit history
 
 # Title of the translation history modal dialog
-workbench.translationHistoryModal.title=Translation History for Locale {locale}
+workbench.translationHistoryModal.title=Translation History
 
 # Label for the button to close the translation history modal dialog
 textUnit.translationHistoryModal.close=Close
 
-# Text in the section in the translation history dialog where info about the translation unit is given
-textUnit.translationHistoryModal.source=Source: "{source}"
-
 # Label for the column that contains the username of the user that made the translation
 textUnit.translationHistoryModal.User=User Name
 

webapp/src/main/resources/public/js/components/workbench/TranslationHistoryModal.js

@@ -93,19 +93,13 @@ class translationHistoryModal extends React.Component {
             <Modal className={"git-blame-modal"} show={show} onHide={this.closeModal}>
                 <Modal.Header closeButton>
                     <Modal.Title>
-                        <FormattedMessage id="workbench.translationHistoryModal.title" values={{
-                            locale: textUnit.getTargetLocale()
-                        }}/>
+                        <FormattedMessage id={"workbench.translationHistoryModal.title"}/>
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <div className={"row"}>
-                        <div className={"col-sm-4"}>
-                            <div>
-                                <FormattedMessage id={"textUnit.translationHistoryModal.source"} values={{
-                                    source: textUnit.getSource()
-                                }}/>
-                            </div>
+                        <div className={"history-source"}>
+                            {textUnit.getSource()}
                         </div>
                     </div>
                     <p/>

webapp/src/main/resources/sass/mojito.scss

@@ -498,6 +498,14 @@ div.targetstring-container textarea {
     padding: 8px;
 }
 
+.history-source {
+    color: $brand-primary;
+    font-style: italic;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 20px;
+}
+
 /**
  * LOGIN
  */