refactor: popover indicator

tldraw/apps/tldraw-logseq/src/components/GeometryTools/GeometryTools.tsx

@@ -24,8 +24,6 @@ export const GeometryTools = observer(function GeometryTools() {
     },
   ]
 
-  const [isOpen, setOpen] = React.useState(false);
-
   const app = useApp()
   const [activeGeomId, setActiveGeomId] = React.useState(
     () => (geometries.find(geo => geo.id === app.selectedTool.id) ?? geometries[0]).id
@@ -38,10 +36,10 @@ export const GeometryTools = observer(function GeometryTools() {
   }, [app.selectedTool.id])
 
   return (
-    <Popover.Root onOpenChange={(open: boolean) => {setOpen(open)}}>
+    <Popover.Root>
       <Popover.Trigger className="tl-geometry-tools-pane-anchor">
         <ToolButton {...geometries.find(geo => geo.id === activeGeomId)!} />
-        <TablerIcon className="tl-popover-indicator" name={isOpen ? "chevron-up-right" : "chevron-down-left"} />
+        <TablerIcon className="tl-popover-indicator" name="chevron-down-left" />
       </Popover.Trigger>
 
       <Popover.Content

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

@@ -17,9 +17,9 @@
   --color-text: var(--ls-primary-text-color);
   --color-text-inverted: var(--ls-tertiary-background-color);
   --color-hover: var(--ls-secondary-background-color);
-  --color-selectedStroke: rgb(42, 123, 253);
-  --color-selectedFill: var(--ls-selection-background-color);
-  --color-selectedContrast: var(--ls-selection-text-color);
+  --color-selectedStroke: var(--color-indigo-900);
+  --color-selectedFill: var(--color-indigo-500);
+  --color-selectedContrast: #fff;
   --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -331,14 +331,22 @@ button.tl-select-input-trigger {
 
 .tl-geometry-tools-pane-anchor {
   @apply relative;
+
+  &[aria-expanded='true'] {
+    .tl-popover-indicator {
+      transform: rotate(180deg);
+      color: #000;
+    }
+  }
 }
 
 .tl-popover-indicator {
-  @apply absolute;
+  @apply absolute text-2xs;
 
+  opacity: 0.6;
   pointer-events: none;
-  left: -2px;
-  bottom: -2px;
+  left: 0;
+  bottom: -1px;
 }
 
 .floating-panel[data-tool-locked='true'] > .tl-button[data-selected='true']::after {