UX improvements

css/main.css

@@ -1246,7 +1246,7 @@ ol li::before {
 .event-card {
   padding: 0.4rem 0.6rem;
   font-weight: 500;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   background-color: rgba(var(--text-color), 0.04);
   border-radius: 0.5rem;
   color: rgba(var(--text-color), 0.8);
@@ -1271,10 +1271,15 @@ ol li::before {
 .pipeline-event {
   padding: 0.8rem 1rem;
   border: solid thin rgba(var(--text-color), 0.2);
+  text-align: start;
 }
 .pipeline-event--signed .icon {
   fill: var(--green);
 }
+.pipeline-event .time {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.7);
+}
 
 .contact,
 .mail-card {

css/main.scss

@@ -1274,7 +1274,7 @@ ol {
 .event-card {
   padding: 0.4rem 0.6rem;
   font-weight: 500;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   background-color: rgba(var(--text-color), 0.04);
   border-radius: 0.5rem;
   color: rgba(var(--text-color), 0.8);
@@ -1299,11 +1299,16 @@ ol {
 .pipeline-event {
   padding: 0.8rem 1rem;
   border: solid thin rgba(var(--text-color), 0.2);
+  text-align: start;
   &--signed {
     .icon {
       fill: var(--green);
     }
   }
+  .time {
+    font-size: 0.8rem;
+    color: rgba(var(--text-color), 0.7);
+  }
 }
 
 .contact,

index.html

@@ -2658,22 +2658,30 @@
                 } else if (type) {
                     switch (type) {
                         case 'TRANSACTION':
-                            return html.node`<p class="pipeline-event pipeline-event--signed event-card flex align-center">
+                            return html.node`<div class="pipeline-event pipeline-event--signed event-card flex align-center">
                                     <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>
-                                    ${getContactName(sender)} signed the transaction
-                                </p>`
+                                    <div class="grid gap-0-3">
+                                        <time class="time">${getFormattedTime(timestamp)}</time>
+                                        ${getContactName(sender)} signed the transaction
+                                    </div>
+                                </div>`
                             break;
                         case 'BROADCAST':
                             if ($('#transaction_details'))
                                 $('#transaction_details').remove()
-                            getRef('chat_footer').classList.remove('hidden')
+                            getRef('chat_footer').classList.add('hidden')
                             let redirectTo = `https://live.blockcypher.com/btc/tx/`
                             if (messenger.pipeline[activeChat.address].model === 'flo_multisig')
                                 redirectTo = `https://flosight.ranchimall.net/tx/`
                             return html.node`<div class="pipeline-event pipeline-event--signed event-card flex align-center">
                                 <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>
-                                <h4>Transaction approved</h4>
-                                <a class="button--small margin-left-0-5" href="${`${redirectTo}${msg.txid}`}" target="_blank">View on blockchain</a>
+                                <div class="grid">
+                                    <time class="time">${getFormattedTime(timestamp)}</time>
+                                    <div class="flex align-center">
+                                        <h4>Transaction approved</h4>
+                                        <a class="button--small margin-left-0-5" href="${`${redirectTo}${msg.txid}`}" target="_blank">View on blockchain</a>
+                                    </div>
+                                </div>
                             </div>`
                             break;
                     }