Merge pull request #265 from appsembler/matej-work/csv-export-ui-feed…

…back

Add success feedback to csv export dialog. John force merged because codecov is stuck

frontend/src/views/ProgressOverview.js

@@ -314,8 +314,14 @@ class ProgressOverview extends Component {
         </HeaderAreaLayout>
         {this.state.csvExportProgress ? (
           <div className={cx({ 'container': true, 'csv-export-content': true})}>
-            <h2>Exporting your CSV data...</h2>
-            <p>Please don't close this browser tab.</p>
+            {(this.state.csvExportProgress < 1) ? [
+              <h2>Exporting your CSV data...</h2>,
+              <p>Please don't close this browser tab.</p>
+            ] : [
+              <h2>Export successful!</h2>,
+              <p>Depending on your browser settings, you will either be prompted with a prompt to save the generated file, or the file will be automatically downloaded into your default Downloads folder.</p>,
+              <p>It is now safe to close the exporter.</p>,
+            ]}
             <div className={styles['progress-bar']}>
               <span className={styles['progress-bar-inner']} style={{ width: this.state.csvExportProgress * 100 + '%'}}></span>
             </div>

frontend/src/views/_progress-overview-content.scss

@@ -229,6 +229,13 @@ button.export-the-csv-button {
     margin: 0 0 calcRem(20);
   }
 
+  p {
+    font-size: calcRem(14);
+    max-width: calcRem(800);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .progress-bar {
     width: 100%;
     max-width: calcRem(500);
@@ -264,6 +271,7 @@ button.close-csv-button {
   outline: none;
   border-radius: 50px;
   transition: all 0.3s ease-in-out;
+  font-size: calcRem(16);
 
   &:hover {
     cursor: pointer;