edit button grows and shakes on the first display #2483

src/public/app/widgets/buttons/edit_button.js

@@ -31,8 +31,18 @@ export default class EditButton extends OnClickButtonWidget {
             // prevent flickering by assuming hidden before async operation
             this.toggleInt(false);
 
+            const wasVisible = this.isVisible();
+
             // can't do this in isEnabled() since isReadOnly is async
             this.toggleInt(await this.noteContext.isReadOnly());
+
+            // make the edit button stand out on the first display, otherwise
+            // it's difficult to notice that the note is readonly
+            if (this.isVisible() && !wasVisible) {
+                this.$iconSpan.addClass("bx-tada bx-lg");
+
+                setTimeout(() => this.$iconSpan.removeClass("bx-tada bx-lg"), 1700);
+            }
         }
 
         await super.refreshWithNote(note);

src/public/app/widgets/floating_buttons/floating_buttons.js

@@ -21,7 +21,7 @@ const TPL = `
         }
         
         .floating-buttons-children > button {
-            font-size: 130%;
+            font-size: 150%;
             padding: 5px 10px 4px 10px;
             width: 40px;
             cursor: pointer;

src/public/app/widgets/floating_buttons/relation_map_buttons.js

@@ -1,7 +1,13 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `
-<div>
+<div class="relation-map-buttons">
+    <style>
+        .relation-map-buttons .floating-button {
+            font-size: 120%;
+        }
+    </style>
+
     <button type="button"
             class="relation-map-create-child-note floating-button btn bx bx-folder-plus no-print"
             title="Create new child note and add it into this relation map"></button>