chore(react/ribbon): add CSS for context menu

apps/client/src/widgets/buttons/note_actions.ts

@@ -1,39 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import utils from "../../services/utils.js";
-import branchService from "../../services/branches.js";
-import dialogService from "../../services/dialog.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
-import ws from "../../services/ws.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { FAttachmentRow } from "../../entities/fattachment.js";
-
-const TPL = /*html*/`
-<div class="dropdown note-actions">
-    <style>
-        .note-actions {
-            width: 35px;
-            height: 35px;
-        }
-
-        .note-actions .dropdown-menu {
-            min-width: 15em;
-        }
-
-        .note-actions .dropdown-item .bx {
-            position: relative;
-            top: 3px;
-            font-size: 120%;
-            margin-right: 5px;
-        }
-
-        .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
-            color: var(--muted-text-color) !important;
-            background-color: transparent !important;
-            pointer-events: none; /* makes it unclickable */
-        }
-
-    </style>
-</div>`;

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -61,6 +61,7 @@ function NoteContextMenu(props: NoteActionsProps) {
   return (
     <Dropdown
       buttonClassName="bx bx-dots-vertical-rounded"
+      className="note-actions"
       hideToggleArrow
       noSelectButtonStyle
     >

apps/client/src/widgets/ribbon/style.css

@@ -448,4 +448,28 @@
 .dropdown-header {
     background-color: var(--accented-background-color);
 }
+/* #endregion */
+
+/* #region Note actions */
+.note-actions {
+    width: 35px;
+    height: 35px;
+}
+
+.note-actions .dropdown-menu {
+    min-width: 15em;
+}
+
+.note-actions .dropdown-item .bx {
+    position: relative;
+    top: 3px;
+    font-size: 120%;
+    margin-right: 5px;
+}
+
+.note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
+    color: var(--muted-text-color) !important;
+    background-color: transparent !important;
+    pointer-events: none; /* makes it unclickable */
+}
 /* #endregion */