fix: whiteboard title styles

resources/css/common.css

@@ -85,6 +85,7 @@ html[data-theme='dark'] {
   --ls-search-icon-color: var(--ls-link-text-color);
   --ls-a-chosen-bg: var(--ls-secondary-background-color);
   --ls-right-sidebar-code-bg-color: #04303c;
+  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -145,6 +146,7 @@ html[data-theme='light'] {
   --ls-search-icon-color: var(--ls-icon-color);
   --ls-a-chosen-bg: #f7f7f7;
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
+  --ls-focus-ring-color: rgba(66, 133, 244, 0.5);
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);

src/main/frontend/components/whiteboard.cljs

@@ -201,7 +201,7 @@
                       false)]
 
     (page-refs-count name
-                     "text-md px-3 py-1 cursor-default whiteboard-page-refs-count"
+                     "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
                      (fn [open?] [:<> "Reference" (ui/icon (if open? "references-hide" "references-show"))]))]
    (tldraw-app name block-id)])
 

src/main/frontend/components/whiteboard.css

@@ -90,6 +90,7 @@
 .whiteboard-page-refs-count {
   border-radius: 8px;
   background: var(--ls-primary-background-color);
+  height: 38px;
 }
 
 .whiteboard-page-refs-count:hover,
@@ -107,15 +108,22 @@
   border-radius: 0 0 12px 12px;
   z-index: 2000;
   gap: 4px;
+  line-height: 1.4;
 }
 
 .whiteboard-page-title {
-  @apply inline-flex px-2;
+  @apply inline-flex px-2 py-1;
   font-size: 20px;
   border-radius: 8px;
+  border: 1px solid transparent;
   background: var(--ls-secondary-background-color);
 }
 
 .whiteboard-page-title:hover {
   background-color: var(--ls-tertiary-background-color);
 }
+
+.whiteboard-page-title:focus-within {
+  border: 1px solid var(--ls-border-color);
+  box-shadow: 0 0 0 4px var(--ls-focus-ring-color);
+}

tldraw/apps/tldraw-logseq/src/styles.css

@@ -248,7 +248,7 @@
   pointer-events: all;
 }
 
-.tl-select-input-trigger {
+button.tl-select-input-trigger {
   @apply flex items-center;
   border: 1px solid var(--ls-secondary-background-color);
   background-color: var(--ls-tertiary-background-color);