Make req and resp sections more obvious on headers view

Author: aorith

assets/css/05_headers.css

@@ -1,3 +1,8 @@
+#headers-view h2 {
+  font-size: var(--fsize-xxl);
+  color: var(--fg-2);
+}
+
 .hdr-legend {
   display: flex;
   flex-direction: column;
@@ -55,8 +60,16 @@ div.hdr-table {
     font-size: var(--fsize-normal);
     font-weight: bold;
     padding: 8px 0 8px 0;
-    border-bottom: 1px solid var(--mild);
+  }
+
+  & div.hdr-tx-req {
     color: var(--mild);
+    border-bottom: 1px solid var(--mild);
+  }
+
+  & div.hdr-tx-resp {
+    color: var(--calm);
+    border-bottom: 1px solid var(--calm);
   }
 
   & div.hdr-title {

render/headers.go

@@ -27,7 +27,7 @@ func headersView(ts vsl.TransactionSet, tx *vsl.Transaction, visited map[vsl.VXI
 		switch record := r.(type) {
 		case vsl.BeginRecord:
 			if tx.TXType != vsl.TxTypeSession {
-				lines = append(lines, fmt.Sprintf(`<div class="hdr-tx">Request of %s</div>`, tx.TXID))
+				lines = append(lines, fmt.Sprintf(`<div class="hdr-tx hdr-tx-req">Request of %s</div>`, tx.TXID))
 				lines = append(lines, renderHeaders(tx.ReqHeaders)...)
 			}
 
@@ -39,7 +39,7 @@ func headersView(ts vsl.TransactionSet, tx *vsl.Transaction, visited map[vsl.VXI
 
 		case vsl.EndRecord:
 			if tx.TXType != vsl.TxTypeSession {
-				lines = append(lines, fmt.Sprintf(`<div class="hdr-tx">Response of %s</div>`, tx.TXID))
+				lines = append(lines, fmt.Sprintf(`<div class="hdr-tx hdr-tx-resp">Response of %s</div>`, tx.TXID))
 				lines = append(lines, renderHeaders(tx.RespHeaders)...)
 			}
 		}