Change marking to bold filename/normal filename

Download button is no longer in color, will not colored by marking the
file-block.

See issue #38

src/dbp-official-signature-pdf-upload.js

@@ -600,8 +600,8 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
                 white-space: nowrap;
             }
 
-            .button.downloaded {
-                background-color: var(--dbp-downloaded-bg-color);
+            .bold-filename {
+                font-weight: bold;
             }
 
             #pdf-preview .button.is-cancel {
@@ -773,12 +773,12 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
             const file = this.signedFiles[id];
 
             results.push(html`
-                <div class="file-block">
+                <div class="file-block" id="file-block-${id}">
                     <div class="header">
-                        <span class="filename"><strong>${file.name}</strong> (${humanFileSize(file.contentSize)})</span>
-                        <button class="button is-primary" id="file-download-button-${id}"
+                        <span class="filename"><span class="bold-filename">${file.name}</span> (${humanFileSize(file.contentSize)})</span>
+                        <button class="button close"
                             title="${i18n.t('official-pdf-upload.download-file-button-title')}"
-                            @click="${() => { this.downloadFileClickHandler(file, 'file-download-button-' + id); }}">
+                            @click="${() => { this.downloadFileClickHandler(file, 'file-block-' + id); }}">
                             <dbp-icon name="download"></dbp-icon></button>
                     </div>
                 </div>

src/dbp-qualified-signature-pdf-upload.js

@@ -706,8 +706,8 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
                 white-space: nowrap;
             }
 
-            .downloaded {
-                background-color: var(--dbp-downloaded-bg-color);
+            .bold-filename {
+                font-weight: bold;
             }
 
             #pdf-preview .button.is-cancel {
@@ -896,12 +896,12 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
             const file = this.signedFiles[id];
 
             results.push(html`
-                <div class="file-block">
+                <div class="file-block" id="file-block-${id}">
                     <div class="header">
-                        <span class="filename"><strong>${file.name}</strong> (${humanFileSize(file.contentSize)})</span>
-                        <button class="button is-primary" id="file-download-button-${id}"
+                        <span class="filename"><span class="bold-filename">${file.name}</span> (${humanFileSize(file.contentSize)})</span>
+                        <button class="button close"
                             title="${i18n.t('qualified-pdf-upload.download-file-button-title')}"
-                            @click="${() => { this.downloadFileClickHandler(file, 'file-download-button-' + id); }}">
+                            @click="${() => { this.downloadFileClickHandler(file, 'file-block-' + id); }}">
                             <dbp-icon name="download"></dbp-icon></button>
                     </div>
                 </div>

src/dbp-signature-lit-element.js

@@ -389,10 +389,9 @@ export default class DBPSignatureLitElement extends BaseLitElement {
         this._("#file-sink").files = files;
         this._("#zip-download-button").stop();
         // mark downloaded files buttons
-        const buttons = this.shadowRoot.querySelectorAll('.file-block > div > button');
-        buttons.forEach(button => {
-            button.classList.add('downloaded');
-            button.classList.remove('is-primary');
+        const spans = this.shadowRoot.querySelectorAll('.file-block > div.header > span.filename > span.bold-filename');
+        spans.forEach(span => {
+            span.classList.remove('bold-filename');
         });
     }
 
@@ -417,8 +416,9 @@ export default class DBPSignatureLitElement extends BaseLitElement {
         this.signedFilesToDownload = files.length;
         this._("#file-sink").files = files;
         // mark downloaded files button
-        const button = this.shadowRoot.querySelector('#' + id);
-        button.classList.add('downloaded');
-        button.classList.remove('is-primary');
+        const span = this.shadowRoot.querySelector('#' + id + ' > div.header > span.filename > span.bold-filename');
+        if (span) {
+            span.classList.remove('bold-filename');
+        }
     }
 }