Merge branch 'main' into bc/update-bootstrap5

Author: BenjaminCharmes

webapp/src/App.vue

@@ -14,8 +14,14 @@ body {
 @import url("https://fonts.googleapis.com/css?family=Figtree");
 @import url("https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text");
 @import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
+
+:root {
+  --font-primary: Figtree, Avenir, Arial, sans-serif;
+  --font-monospace: "Roboto Mono", monospace;
+}
+
 #app {
-  font-family: Figtree, Avenir, Arial, sans-serif;
+  font-family: var(--font-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /*text-align: center;*/

webapp/src/components/FileList.vue

@@ -92,8 +92,9 @@ export default {
   methods: {
     formatDistance,
     deleteFile(event, file_id) {
-      deleteFileFromSample(this.item_id, file_id);
-      return false;
+      if (window.confirm("Are you sure you want to unlink this file from this entry?")) {
+        deleteFileFromSample(this.item_id, file_id);
+      }
     },
     setFileSelectModalOpen() {
       this.$store.commit("setFileSelectModalOpenStatus", true);
@@ -109,7 +110,7 @@ export default {
 
 .filelink {
   color: #004175;
-  font-family: "Andalé Mono", monospace;
+  font-family: var(--font-monospace);
 }
 
 .filelink:hover {
@@ -130,6 +131,11 @@ export default {
   padding: 0.9rem 1.25rem;
 }
 
+.delete-file-button:hover {
+  color: #dc3545;
+  cursor: pointer;
+}
+
 #uppy-trigger {
   scroll-anchor: auto;
   width: 8rem;
@@ -143,7 +149,7 @@ export default {
 }
 
 .server-name {
-  font-family: "Andalé Mono", monospace;
+  font-family: var(--font-monospace);
   font-weight: 400;
   /*font-style: italic;*/
   color: teal;

webapp/src/components/MessageBubble.vue

@@ -145,14 +145,14 @@ export default {
 }
 
 .system-prompt-label {
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--font-monospace);
   font-size: 0.875rem;
   fw: 600;
   color: rgb(100, 100, 100);
 }
 
 .raw-content {
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--font-monospace);
   font-size: 0.875rem;
   white-space: pre-wrap;
   overflow-x: auto;

webapp/src/components/QRCode.vue

@@ -75,7 +75,7 @@ export default {
 
 <style scoped>
 .qrcode-text-label {
-  font-family: "Helvetica", "Arial", "Roboto Mono";
+  font-family: var(--font-monospace);
   font-size: 1.8rem;
 }
 </style>

webapp/src/components/StyledBlockInfo.vue

@@ -123,7 +123,7 @@ input {
 }
 
 .filetype-li {
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--font-monospace);
 }
 
 #tooltip {