button styling

assets/main.js

@@ -15,7 +15,7 @@ class Button extends HTMLButtonElement {
   constructor() {
     super();
     this.addEventListener("click", this.click);
-    this.setAttribute("style", "min-width:4em");
+    this.setAttribute("style", "min-width:2.3em");
   }
 }
 
@@ -43,13 +43,16 @@ class LineRemover extends Button {
 }
 
 class LinePinner extends Button {
+  connectedCallback() {
+    this.innerText = "pin";
+  }
   click() {
     const l = this.closest("div.line");
     l.classList.toggle("unpinned");
     if (l.classList.contains("unpinned")) {
       this.innerText = "pin";
     } else {
-      this.innerText = "unpin";
+      this.innerHTML = "<strong>pin</strong>";
     }
   }
 }
@@ -84,7 +87,7 @@ class LineEditor extends Button {
   }
   done() {
     this.editing = false;
-    this.innerText = "edit";
+    this.innerText = "✎";
     this.span.innerText = this.i.value;
     this.f.remove();
     this.span.setAttribute("style", "display:inline");
@@ -96,7 +99,7 @@ class LineEditor extends Button {
       return;
     }
     this.editing = true;
-    this.innerText = "done";
+    this.innerHTML = "<strong>✓</strong>";
     this.span.setAttribute("style", "display:none");
     this.i.value = this.span.innerText;
     this.parentElement.appendChild(this.f);

templates/index.tmpl

@@ -18,11 +18,11 @@ div.line:not(.unpinned) > .linetext {
     <template id="linetmpl">
       <span class="linecontrols">
         <button is="line-pinner">pin</button>
-        <button is="line-editor">edit</button>
-        <button is="line-upper">up</button>
-        <button is="line-downer">down</button>
-        <button is="line-remover">remove</button>
+        <button is="line-editor">✎</button>
+        <button is="line-upper">↑</button>
+        <button is="line-downer">↓</button>
         <button is="source-shower"></button>
+        <button is="line-remover">X</button>
       </span>
       <span class="linetext"></span>
       <p is="source-text"></p>