style/note title & icon: tweak appearance

apps/client/src/widgets/note_icon.css

@@ -81,6 +81,8 @@ body.experimental-feature-new-layout {
 
     .note-icon-widget button.note-icon {
         position: relative;
+        outline-offset: 4px;
+        border-radius: 50%;
         background: transparent !important;
 
         &:hover {

apps/client/src/widgets/note_icon.tsx

@@ -42,7 +42,7 @@ export default function NoteIcon() {
             className="note-icon-widget"
             title={t("note_icon.change_note_icon")}
             dropdownContainerStyle={{ width: "610px" }}
-            buttonClassName={`note-icon ${icon ?? "bx bx-empty"}`}
+            buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`}
             hideToggleArrow
             disabled={viewScope?.viewMode !== "default"}
         >

apps/client/src/widgets/note_title.css

@@ -46,12 +46,12 @@ body.experimental-feature-new-layout {
         .note-icon-widget {
             --note-icon-size: 20px;
             --note-icon-container-padding-size: 4px;
-            margin-inline: 8px;
+            margin-inline: 12px 8px;
         }
         
         .note-title-widget {
             --note-title-size: 18px;
-            --note-title-padding-inline: 4px;
+            --note-title-padding-inline: 0;
         }
 
         @container (max-width: 700px) {