From 248e7952f78115b75616d6454f8ba08e07745b90 Mon Sep 17 00:00:00 2001
From: Stewart Allen <sa@grid.space>
Date: Sat, 1 Jun 2024 23:42:35 -0400
Subject: [PATCH] tweak cam op list l&f

---
 src/kiri-mode/cam/client.js | 5 ++---
 src/kiri-mode/fdm/client.js | 2 +-
 web/kiri/index.css          | 8 +++++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/kiri-mode/cam/client.js b/src/kiri-mode/cam/client.js
index 9e922383..9a797a1a 100644
--- a/src/kiri-mode/cam/client.js
+++ b/src/kiri-mode/cam/client.js
@@ -457,7 +457,7 @@ CAM.init = function(kiri, api) {
         currentIndex = isIndexed && !isPreview ? index * DEG2RAD : 0;
     }
 
-    // (re)render thea re-orderable op list
+    // (re)render the re-orderable op list
     api.event.on("cam.op.render", func.opRender = () => {
         let oplist = current.process.ops;
         if (!(isCamMode && oplist)) {
@@ -471,7 +471,6 @@ CAM.init = function(kiri, api) {
         let notime = false;
         oplist.forEach((rec,i) => {
             let clock = rec.type === '|';
-            // let label = clock ? `<i class="fa-regular fa-clock"></i>` : rec.type;
             let label = clock ? `` : rec.type;
             let clazz = notime ? [ "draggable", "notime" ] : [ "draggable" ];
             let notable = rec.note?.split(' ').filter(v => v.charAt(0) === '#');
@@ -481,7 +480,7 @@ CAM.init = function(kiri, api) {
                 `<div id="${mark+i}" class="${clazz.join(' ')}">`,
                 `<label class="label">${label}</label>`,
                 clock ? '' :
-                `<label id="${mark+i}-x" class="del"><i class="fa-regular fa-circle-xmark"></i></label>`,
+                `<label id="${mark+i}-x" class="del"><i class="fa fa-trash"></i></label>`,
                 `</div>`
             ]);
             bind[mark+i] = rec;
diff --git a/src/kiri-mode/fdm/client.js b/src/kiri-mode/fdm/client.js
index 1a4eea10..fb359ba7 100644
--- a/src/kiri-mode/fdm/client.js
+++ b/src/kiri-mode/fdm/client.js
@@ -114,7 +114,7 @@ FDM.init = function(kiri, api) {
             let id = (now++).toString(36);
             let rows = Object.entries(range.fields).map(a => `<div><label class="pad">${rangeVars[a[0]]}</label><span></span><label class="val">${a[1]}</label></div>`).join('');
             let hover = `<div id="hov_${id}" class="range-detail">${rows}</div>`;
-            let info = `<button id="sel_${id}" class="j-center grow">${range.lo} - ${range.hi}</button><button id="del_${id}"><i class="far fa-trash-alt"></i></button>`;
+            let info = `<button id="sel_${id}" class="j-center grow">${range.lo} - ${range.hi}</button><button id="del_${id}"><i class="fa fa-trash"></i></button>`;
             html.appendAll([
                 `<div id="rng_${id}" class="range-info">${hover}${info}</div>`
             ]);
diff --git a/web/kiri/index.css b/web/kiri/index.css
index f7aab9fc..bbbe9fa6 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -1063,6 +1063,9 @@ th, tr, td, label {
 #oplist .clock:hover {
     background-color: var(--blue-2);
 }
+#oplist > div {
+    padding: 5px 20px 5px 7px !important;
+}
 #oplist > div, .opdiv {
     display: flex;
     flex-direction: column;
@@ -1094,10 +1097,9 @@ th, tr, td, label {
 }
 #oplist div .del {
     position: absolute;
-    top: 1px;
-    right: 2px;
+    right: 6px;
     font-size: 14px;
-    color: rgba(0,0,0,0);
+    color: rgba(0,0,0,0.25);
 }
 .dark #oplist div:hover .del {
     color: #777;