From d52c08cd103ef311892c0ff0a7797d9978e45116 Mon Sep 17 00:00:00 2001
From: ruinivist <179396038+ruinivist@users.noreply.github.com>
Date: Sat, 30 May 2026 18:07:38 +0000
Subject: [PATCH] fix: style sidebar button to match native Excalidraw UI

---
 src/App.tsx    |  2 +-
 src/styles.css | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0e8c1cf..079a475 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -414,7 +414,7 @@ export function App() {
         <div className="app-actions">
           <button
             type="button"
-            className="secondary-button app-actions-toggle"
+            className="app-actions-toggle"
             onClick={openSidebar}
             aria-label="Open drawings"
           >
diff --git a/src/styles.css b/src/styles.css
index 82b1ea5..9a74d19 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -169,14 +169,16 @@ input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--lg-button-size, 2.25rem);
-  height: var(--lg-button-size, 2.25rem);
+  width: 2.25rem;
+  height: 2.25rem;
   padding: 0;
   border: none;
-  border-radius: var(--border-radius-lg, 12px);
+  border-radius: 8px;
   box-shadow: 0 0 0 1px var(--app-surface-lowest);
-  background: var(--app-surface-low);
+  background: var(--app-island-bg);
   color: var(--app-text-color);
+  cursor: pointer;
+  transition: background-color 120ms ease, box-shadow 120ms ease;
 }
 
 .app-actions-toggle svg {
@@ -265,12 +267,12 @@ input {
 }
 
 .app-actions-toggle:hover {
-  background: var(--app-button-hover-bg);
+  background-color: var(--app-button-hover-bg);
 }
 
 .app-actions-toggle:active {
-  box-shadow: 0 0 0 1px var(--app-button-active-border);
-  background: var(--app-button-active-bg);
+  background-color: var(--app-button-active-bg);
+  box-shadow: inset 0 0 0 1px var(--app-button-active-border);
 }
 
 .sr-only {