Fix export button placement, finalize PDF layout

src/app/prediction/prediction.component.html

@@ -60,17 +60,17 @@
     <rb-form-radio name="multiple-samples" label="Multiple samples" [(ngModel)]="multipleSamples" [value]="true">
     </rb-form-radio>
   </div>
+</div>
 
 <!-- CSV export -->
-  <rb-icon-button icon="forward-right" mode="primary" (click)="exportCSV()" *ngIf="spectrumNames.length">
+<rb-icon-button icon="forward-right" mode="secondary" (click)="exportCSV()" *ngIf="spectrumNames.length" style="margin-right: 0.5rem">
   Export to CSV
 </rb-icon-button>
 
 <!-- PDF exprot -->
-  <rb-icon-button icon="forward-right" mode="primary" (click)="exportPDF()" *ngIf="spectrumNames.length">
+<rb-icon-button icon="forward-right" mode="secondary" (click)="exportPDF()" *ngIf="spectrumNames.length">
   Export to PDF
 </rb-icon-button>
-</div>
 
 <div class="dpt-chart space-below">
   <canvas baseChart

src/app/prediction/prediction.component.scss

@@ -2,6 +2,7 @@
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 0.5rem;
 }
 
 .file-input {

src/app/prediction/prediction.component.ts

@@ -155,6 +155,7 @@ export class PredictionComponent implements OnInit {
         },
         {
           table: {
+            widths: ['auto', '*', 'auto', 'auto', 'auto'],
             body: [
               [
                 {text: new Date().toLocaleDateString(), style: 'tableHeader'},
@@ -205,6 +206,10 @@ export class PredictionComponent implements OnInit {
           image: document.getElementsByTagName('canvas')[0].toDataURL('image/png'),
           width: 500
         },
+        {
+          table: {
+            body: [[{
+              stack: [
                 {
                   text: '*Disclaimer: This tool is still under development and Testing',
                   style: 'subsubheader'
@@ -215,43 +220,54 @@ export class PredictionComponent implements OnInit {
                     'These results may therefore under no circumstances be used to evaluate quality-relevant issues.',
                     'For more details please contact ',
                     {
-              text: 'CR/APS1-Lingenfelder',
+                      text: 'CR/APS1-Lingenfelser',
                       link: 'mailto:dominic.lingenfelser@bosch.com'
                     },
                     '.'
                   ]
                 },
+              ]
+            }]],
+          },
+          margin: [25, 20]
+        },
         {
           table: {
+            widths: ['*', '*', 'auto'],
             body: [
               [{text: 'Pr\u00fcfung', style: 'tableHeader'}, {text: 'Freigabe', style: 'tableHeader'}, {text: 'Datum', style: 'tableHeader'}],
               ['CR/APS1-Lotter', 'CR/APS1-Lingenfelser', new Date().toLocaleDateString()]
-            ]
+            ],
           }
-        },
-        {
-          text: '\u00a9 Alle Rechte bei Robert Bosch GmbH, auch f\u00fcr den Fall von Schutzreichtsanmeldungen. Jede Verf\u00fcgungsbefugnis, wie Kopier- und Weitergaberecht, bei uns.',
-          fontSize: 8
         }
       ],
+      footer: {
+        text: '\u00a9 Alle Rechte bei Robert Bosch GmbH, auch f\u00fcr den Fall von Schutzreichtsanmeldungen. Jede Verf\u00fcgungsbefugnis, wie Kopier- und Weitergaberecht, bei uns.',
+        fontSize: 8,
+        alignment: 'center'
+      },
       styles: {
         header: {
           fontSize: 18,
-          bold: true
+          bold: true,
+          margin: [0, 10]
         },
         subheader: {
           fontSize: 15,
-          bold: true
+          bold: true,
+          margin: [0, 8]
         },
         subsubheader: {
-          bold: true
+          bold: true,
+          margin: [0, 5]
         },
         tableHeader: {
           bold: true,
           fontSize: 13,
           color: 'black'
 		    }
-      }
+      },
+      pageMargins: [50, 50, 50, 15]
     };
 
     pdfMake.createPdf(dd).download();