From 5266e3513398c5b9bfdf33206b3cdb47cef4d458 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Wed, 21 Sep 2022 09:14:36 +0300
Subject: [PATCH] chore: remove toolbar component

---
 .../src/components/Toolbar/ToolBar.tsx        | 67 -------------------
 .../src/components/Toolbar/index.ts           |  1 -
 tldraw/apps/tldraw-logseq/src/styles.css      | 22 ++----
 3 files changed, 4 insertions(+), 86 deletions(-)
 delete mode 100644 tldraw/apps/tldraw-logseq/src/components/Toolbar/ToolBar.tsx
 delete mode 100644 tldraw/apps/tldraw-logseq/src/components/Toolbar/index.ts

diff --git a/tldraw/apps/tldraw-logseq/src/components/Toolbar/ToolBar.tsx b/tldraw/apps/tldraw-logseq/src/components/Toolbar/ToolBar.tsx
deleted file mode 100644
index 696c6e8364..0000000000
--- a/tldraw/apps/tldraw-logseq/src/components/Toolbar/ToolBar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
-import { observer } from 'mobx-react-lite'
-import { useApp } from '@tldraw/react'
-import type { Shape } from '../../lib'
-
-export const ToolBar = observer(function ToolBar(): JSX.Element {
-  const app = useApp<Shape>()
-
-  const zoomIn = React.useCallback(() => {
-    app.api.zoomIn()
-  }, [app])
-
-  const zoomOut = React.useCallback(() => {
-    app.api.zoomOut()
-  }, [app])
-
-  const resetZoom = React.useCallback(() => {
-    app.api.resetZoom()
-  }, [app])
-
-  const zoomToFit = React.useCallback(() => {
-    app.api.zoomToFit()
-  }, [app])
-
-  const zoomToSelection = React.useCallback(() => {
-    app.api.zoomToSelection()
-  }, [app])
-
-  const sendToBack = React.useCallback(() => {
-    app.sendToBack()
-  }, [app])
-
-  const sendBackward = React.useCallback(() => {
-    app.sendBackward()
-  }, [app])
-
-  const bringToFront = React.useCallback(() => {
-    app.bringToFront()
-  }, [app])
-
-  const bringForward = React.useCallback(() => {
-    app.bringForward()
-  }, [app])
-
-  const flipHorizontal = React.useCallback(() => {
-    app.flipHorizontal()
-  }, [app])
-
-  const flipVertical = React.useCallback(() => {
-    app.flipVertical()
-  }, [app])
-
-  return (
-    <div className="tl-toolbar">
-      <button onClick={sendToBack}>Send to Back</button>
-      <button onClick={sendBackward}>Send Backward</button>
-      <button onClick={bringForward}>Bring Forward</button>
-      <button onClick={bringToFront}>Bring To Front</button>|<button onClick={zoomOut}>-</button>
-      <button onClick={zoomIn}>+</button>
-      <button onClick={resetZoom}>reset</button>
-      <button onClick={zoomToFit}>zoom to fit</button>
-      <button onClick={zoomToSelection}>zoom to selection</button>
-    </div>
-  )
-})
diff --git a/tldraw/apps/tldraw-logseq/src/components/Toolbar/index.ts b/tldraw/apps/tldraw-logseq/src/components/Toolbar/index.ts
deleted file mode 100644
index 12c4e0063f..0000000000
--- a/tldraw/apps/tldraw-logseq/src/components/Toolbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToolBar'
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index e6f3e58f23..169beed1f2 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -22,20 +22,6 @@
   }
 }
 
-.tl-toolbar {
-  @apply absolute top-0 w-full flex;
-
-  grid-row: 1;
-  align-items: center;
-  padding: 8px;
-  color: black;
-  z-index: 100000;
-  user-select: none;
-  background: white;
-  border-bottom: 1px solid var(--ls-secondary-border-color);
-  font-size: inherit;
-}
-
 .tl-context-menu-button {
   @apply flex items-center px-4 py-1 text-sm !important;
 
@@ -50,7 +36,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--ls-secondary-background-color) !important;
+    background-color: var(--ls-primary-background-color) !important;
   }
 }
 
@@ -67,7 +53,7 @@
   z-index: 180;
   min-width: 220px;
   pointer-events: 'all';
-  background: var(--ls-primary-background-color);
+  background: var(--ls-secondary-background-color);
 }
 
 .tl-context-menu-right-slot {
@@ -115,7 +101,7 @@
   padding-left: 20px;
 }
 
-.tl-button-bar {
+.tl-toolbar {
   @apply relative flex text-sm;
 
   pointer-events: all;
@@ -841,7 +827,7 @@ html[data-theme='dark'] {
   }
 }
 
-.tl-contextbar-separator {
+.tl-toolbar-separator {
   background-color: var(--ls-border-color);
   width: 1px;
 }