Change text and styling (#2)

assets/vpu-signature-pdf-upload.metadata.json

@@ -3,16 +3,15 @@
   "module_src": "vpu-signature-pdf-upload.js",
   "routing_name": "pdf-upload",
   "name": {
-    "de": "PDF hochladen",
-    "en": "Upload PDF"
+    "de": "Amtssignatur aufbringen",
+    "en": "Officially sign"
   },
   "short_name": {
-    "de": "PDF hochladen",
-    "en": "Upload PDF"
+    "de": "Amtssignatur aufbringen",
+    "en": "Officially sign"
   },
   "description": {
     "de": "Erlaubt das Hochladen von PDF Dateien um sie mit einer Amtssignatur zu versehen",
     "en": "Allows upload of PDF files to officially sign them"
   }
 }
-

src/vpu-signature-pdf-upload.js

@@ -219,14 +219,8 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
                 vertical-align: middle;
             }
 
-            button.is-download {
-                background-color: lightgray;
-                border-color: gray;
-            }
-
-            button.is-re-upload {
-                background-color: lightpink;
-                border-color: lightcoral;
+            .file .info strong {
+                font-weight: 600;
             }
 
             .notification vpu-mini-spinner {
@@ -234,6 +228,10 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
                 top: 2px;
                 margin-right: 5px;
             }
+
+            .error {
+                color: #e4154b;
+            }
         `;
     }
 
@@ -246,7 +244,7 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
                             @click="${() => {this.fileDownloadClickHandler(file);}}"><vpu-icon name="download"></vpu-icon></button>
                 </div>
                 <div class="info">
-                    <strong>${file.name}</strong> (${humanFileSize(file.contentSize)})
+                    ${file.name} (${humanFileSize(file.contentSize)})
                 </div>
             </div>
         `);
@@ -256,13 +254,13 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
         return this.errorFiles.map((data, id) => html`
             <div class="file">
                 <div class="button-box">
-                    <button class="button is-small is-re-upload"
+                    <button class="button is-small"
                             title="${i18n.t('pdf-upload.re-upload-file-button-title')}"
-                            @click="${() => {this.fileUploadClickHandler(data.file, id);}}"><vpu-icon name="upload"></vpu-icon></button>
+                            @click="${() => {this.fileUploadClickHandler(data.file, id);}}"><vpu-icon name="reload"></vpu-icon></button>
                 </div>
                 <div class="info">
-                    <strong>${data.file.name}</strong> (${humanFileSize(data.file.size)})
-                    ${data.json["hydra:description"]}
+                    ${data.file.name} (${humanFileSize(data.file.size)})
+                    <strong class="error">${data.json["hydra:description"]}</strong>
                 </div>
             </div>
         `);
@@ -272,7 +270,7 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
         return html`
             <div class="${classMap({hidden: !this.isLoggedIn() || !this.hasSignaturePermissions()})}">
                 <div class="field">
-                    <label class="label">${i18n.t('pdf-upload.upload-field-label')}</label>
+                    <h2>${i18n.t('pdf-upload.upload-field-label')}</h2>
                     <div class="control">
                         <vpu-fileupload id="file-upload" lang="${this.lang}" url="${this.signingUrl}" accept="application/pdf"
                             text="${i18n.t('pdf-upload.upload-area-text')}" button-label="${i18n.t('pdf-upload.upload-button-label')}"></vpu-fileupload>
@@ -284,7 +282,7 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
                     ${this.uploadStatusText}
                 </div>
                 <div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
-                    <label class="label">${i18n.t('pdf-upload.signed-files-label')}</label>
+                    <h2>${i18n.t('pdf-upload.signed-files-label')}</h2>
                     <div class="control">
                         ${this.getSignedFilesHtml()}
                     </div>
@@ -295,7 +293,7 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
                     </div>
                 </div>
                 <div class="files-block field ${classMap({hidden: this.errorFilesCount === 0})}">
-                    <label class="label">${i18n.t('pdf-upload.error-files-label')}</label>
+                    <h2 class="error">${i18n.t('pdf-upload.error-files-label')}</h2>
                     <div class="control">
                         ${this.getErrorFilesHtml()}
                     </div>

common @ 959f889f

-Subproject commit 4f1d5c504ad5935b8903ab37abcbaa2b588112bd
+Subproject commit 959f889fbdedb7bd8ebae1d58e0fc5bd1b51e02d

file-upload @ 75ddf906

-Subproject commit 1a0894aecd523cd5b101ea3ad8028fc95c18741c
+Subproject commit 75ddf906102c05f7fc548c1566d82b12c21c4254