Modernize file context menu

server/public/styles.css

@@ -792,25 +792,62 @@
 .u-nav .context-menu {
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: 10px;
   box-shadow: var(--shadow);
   display: grid;
-  min-width: 170px;
-  padding: 5px;
+  min-width: 205px;
+  padding: 4px;
   position: absolute;
   z-index: 100000;
 }
 
-.u-nav .context-menu button {
-  border-color: transparent;
-  justify-content: flex-start;
-  text-align: left;
+.u-nav .context-menu .context-action {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  box-shadow: none;
+  display: grid;
+  font: 500 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+  gap: 7px;
+  grid-template-columns: 18px minmax(0, 1fr);
+  justify-content: stretch !important;
+  letter-spacing: normal !important;
+  margin: 0 !important;
+  min-height: 30px;
+  padding: 0 8px !important;
+  text-align: left !important;
+  text-transform: none !important;
+  white-space: nowrap;
   width: 100%;
 }
 
-.u-nav .context-menu button:hover {
-  background: var(--surface-2);
-  border-color: var(--line);
+.u-nav .context-menu .context-action:hover,
+.u-nav .context-menu .context-action:focus-visible {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.u-nav .context-menu .context-action.danger {
+  color: #c4382d;
+}
+
+.u-nav .context-icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.u-nav .context-icon .unav-icon {
+  height: 15px;
+  stroke-width: 1.9;
+  width: 15px;
+}
+
+.u-nav .context-separator {
+  border-top: 1px solid var(--line);
+  height: 1px;
+  margin: 4px 5px;
 }
 
 .u-nav .modal-overlay {