From 82096b2a564a6b19745d48111af30c3ef2a1925a Mon Sep 17 00:00:00 2001
From: Jonathan Grangien <jonathan.grangien@gmail.com>
Date: Mon, 9 Jul 2018 16:01:48 -0400
Subject: [PATCH] Improve vol. conversion overall progress styling

---
 .../DataLoader/PrepareUploadedData.jsx          | 17 +++++++++++------
 .../DataLoader/PrepareUploadedData.scss         |  4 ++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.jsx b/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.jsx
index ab50bf4749..494e183a76 100644
--- a/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.jsx
+++ b/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.jsx
@@ -12,6 +12,7 @@ import Input from '../common/Input/Input/Input';
 import styles from './PrepareUploadedData.scss';
 import Button from '../common/Input/Button/Button';
 import RadioButtons from '../common/Input/RadioButtons/RadioButtons';
+import Label from '../common/Label/Label';
 import Window from '../common/Window/Window';
 import ProgressBar from '../common/ProgressBar/ProgressBar';
 import Checkbox from '../common/Input/Checkbox/Checkbox';
@@ -192,12 +193,16 @@ class PrepareUploadedData extends Component {
                     onChange={this.changeRSquared}/>
           <Button onClick={() => this.upload()}> Convert </Button>
           {this.state.uploadButtonIsClicked && (
-            <Row>
-              <ProgressBar label='Volume conversion progress'
-                           initializingMsg='Reading'
-                           progressPercent={volumeProgressPercent} />
-              <div>{currentVolumesConvertedCount} / {currentVolumesToConvertCount} files complete</div>
-            </Row>
+            <div>
+              <Row>
+                <ProgressBar label='Volume conversion progress'
+                            initializingMsg='Reading'
+                            progressPercent={volumeProgressPercent} />
+              </Row>
+              <Row className={styles.filesConverted}>
+                <Label size="small">{currentVolumesConvertedCount} / {currentVolumesToConvertCount} files complete</Label>
+              </Row>
+            </div>
           )} 
         </div>
       </Window>
diff --git a/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.scss b/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.scss
index b4cfced525..23324cfa3c 100644
--- a/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.scss
+++ b/modules/webgui/web/src/components/DataLoader/PrepareUploadedData.scss
@@ -4,4 +4,8 @@
     & > div {
         padding: 20px 0;
     }
+}
+
+.filesConverted {
+    padding: 5px 10px;
 }
\ No newline at end of file