add ui adjustment

Author: martgil

extension/css/cryptup.css

@@ -3502,6 +3502,41 @@ body#settings div.webmail_notifications div.webmail_notification a:hover {
   text-decoration: none;
 }
 
+/* thunderbird ui css */
+
+.thunderbird_attachment_root {
+  display: inline-flex;
+  margin: 0 7px 7px 0;
+  background: #fff;
+  align-items: center;
+  align-content: center;
+  border: 1px solid gray;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.thunderbird_attachment_root div {
+  display: inline-block;
+}
+
+.thunderbird_attachment_root .thunderbird_attachment_name {
+  margin: 0 2px;
+}
+
+.thunderbird_attachment_root .thunderbird_attachment_icon {
+  height: 40px;
+  width: 40px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.thunderbird_attachment_root .thunderbird_attachment_download {
+  background: url('/img/svgs/download-link.svg') center / auto no-repeat;
+  padding: 2px;
+  height: 40px;
+  width: 40px;
+}
+
 /* print class */
 @media screen {
   .printable {

extension/js/content_scripts/webmail/thunderbird/thunderbird-element-replacer.ts

@@ -114,16 +114,17 @@ export class ThunderbirdElementReplacer extends WebmailElementReplacer {
   };
 
   private generatePgpAttachmentTemplate = (attachment: messenger.messages.MessageAttachment) => {
-    const attachmentHtmlRoot = $('<div>');
-    const attachmentFilename = $('<div>');
-    attachmentFilename.addClass('attachment_name').text(Xss.escape(attachment.name));
-    const attachmentDownloadBtn = $('<div>');
-    attachmentDownloadBtn
-      .addClass('attachment_download')
-      .text('download')
+    const attachmentHtmlRoot = $('<div>').addClass('thunderbird_attachment_root');
+    const attachmentFileTypeIcon = $('<img>').addClass('thunderbird_attachment_icon');
+    attachmentFileTypeIcon.attr('alt', Xss.escape(attachment.name));
+    attachmentFileTypeIcon.attr('src', '/image/fileformat/generic.png');
+    const attachmentFilename = $('<div>').addClass('thunderbird_attachment_name').text(Xss.escape(attachment.name));
+    const attachmentDownloadBtn = $('<div>')
+      .addClass('thunderbird_attachment_download')
       .on('click', async () => {
         await this.downloadThunderbirdAttachmentHandler(attachment);
       });
+    attachmentHtmlRoot.append(attachmentFileTypeIcon); // xss-escaped
     attachmentHtmlRoot.append(attachmentFilename); // xss-escaped
     attachmentHtmlRoot.append(attachmentDownloadBtn); // xss-escaped
     return attachmentHtmlRoot;