okay this now works with bootstrap 5, I dont love the sz buttons / mixed black and white hover text needs love - probably own class with own styles, but I dont want to hard-code info color, need to work out how to do style / css using the right bs variable for info color

templates/viewer.html

@@ -56,15 +56,14 @@
                     context.beginPath()
                     context.lineWidth = 0.1
                     context.font = "30px Arial"
-                    context.globalAlpha = 0.7
+                    context.globalAlpha = 0.6
                     bbox = context.measureText(faces[i].who);
-                    console.log(bbox)
                     f_h=bbox.fontBoundingBoxAscent
                     if( bbox.fontBoundingBoxDescent )
                         f_h += bbox.fontBoundingBoxDescent
                     f_h -= 8
                     context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
-                    context.fillStyle="black"
+                    context.fillStyle="white"
                     context.fill()
                     context.stroke();
                     context.beginPath()
@@ -102,7 +101,7 @@
 <div id="viewer" class="container-fluid">
     {% set max=eids.split(',')|length %}
     <div id="bbar" class="form-row offset-lg-1 col">
-        <span id="faces" class="badge p-2 text-secondary" data-toggle="button" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
+        <span id="faces" class="badge p-2 text-secondary" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
     </div>
     <center>
         <input type="hidden" name="eids" value={{eids}}>