fix: border on play icon

webui/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@recogito/annotorious": "^2.7.1",
-    "boxicons": "^2.1.1",
+    "boxicons": "^2.1.4",
     "date-fns": "^2.25.0",
     "dompurify": "^2.3.4",
     "filesize": "^8.0.6",

webui/src/components/display/blobs/VideoViewer.svelte

@@ -93,9 +93,7 @@
       />
     {/if}
     <div class="play-icon">
-      <div class="icon">
-        <Icon plain name="play" />
-      </div>
+      <Icon plain border name="play" />
     </div>
     <div
       class="timecode"
@@ -152,21 +150,8 @@
       left: 50%;
       transform: translate(-50%, -50%);
 
-      $size: var(--icon-size);
-
-      width: $size;
-      height: $size;
-
       color: white;
-      font-size: $size;
-      line-height: 1;
-
-      border-radius: calc($size / 4);
-      border: 0.07em solid white;
-
-      .icon {
-        margin-left: 0.04em;
-      }
+      font-size: var(--icon-size);
 
       opacity: 0;
       transition: opacity 0.2s;

webui/src/components/utils/Icon.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   export let plain = false;
   export let name: string;
+  export let border = false;
 
   if (!loaded) {
     document.head.innerHTML += `<link
@@ -15,10 +16,14 @@
   }
 </script>
 
-<i class="bx bx-{name}" class:plain />
+<i class="bx bx-{name}" class:plain class:bx-border={border} />
 
 <style>
   .bx:not(.plain) {
     font-size: 115%;
   }
+
+  .bx-border {
+    border-color: white;
+  }
 </style>

webui/yarn.lock

@@ -724,9 +724,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"boxicons@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "boxicons@npm:2.1.1"
+"boxicons@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "boxicons@npm:2.1.4"
   dependencies:
     "@webcomponents/webcomponentsjs": ^2.0.2
     prop-types: ^15.6.0
@@ -734,7 +734,7 @@ __metadata:
     react-dom: ^16.0.0
     react-interactive: ^0.8.1
     react-router-dom: ^4.2.2
-  checksum: c192c79693da679c534abf748d025c4775808a8d817b5f9443d4310194cdcf4d37207fef0760915b37323cdb42266f907b18c3b69a6a6ae6b5cab0fa0ec09da9
+  checksum: 2d77f91d993121a23cddb093c8ccdf7d274b8108f2ff3a52f88fd14899bb6fcdcd8c17556bd3f51fb73776c37178ec7b104aa920c3a6e51bc99339f561d8edc0
   languageName: node
   linkType: hard
 
@@ -3985,7 +3985,7 @@ __metadata:
     "@types/wavesurfer.js": ^6.0.3
     "@typescript-eslint/eslint-plugin": ^5.32.0
     "@typescript-eslint/parser": ^5.32.0
-    boxicons: ^2.1.1
+    boxicons: ^2.1.4
     date-fns: ^2.25.0
     dompurify: ^2.3.4
     eslint: ^8.21.0
@@ -4019,8 +4019,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=upend-kestrel%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b32491&locator=upend-kestrel%40workspace%3A."
-  checksum: 4e4e5c0a6498ad2ea8369a91e3c67c160186a96d47073469d61794c3717824198bd2de7851f3e0786833fa5f8c0eb85c65f7d7dc9c0114b9328b2a1060f645b2
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=4972b4&locator=upend-kestrel%40workspace%3A."
+  checksum: 9449fce51433df8ce7a4d4e597fbd8811611f15ed3d8c499a6e14fd29bbba40adaf7f441e5cd4f4f3439e9fb46adf269783cef574904975569ba99c9933e711d
   languageName: node
   linkType: hard