toolbar styles

packages/excalidraw/components/MobileToolBar.scss

@@ -29,8 +29,8 @@
     flex-shrink: 0;
 
     .ToolIcon__icon {
-      width: var(--mobile-action-button-size);
+      width: 2.25rem;
-      height: var(--mobile-action-button-size);
+      height: 2.25rem;
 
       &:hover {
         background-color: transparent;

packages/excalidraw/components/MobileToolBar.tsx

@@ -363,7 +363,8 @@ export const MobileToolBar = ({
           className={clsx(
             "App-toolbar__extra-tools-trigger App-toolbar__extra-tools-trigger--mobile",
             {
-              "App-toolbar__extra-tools-trigger--selected": extraToolSelected,
+              "App-toolbar__extra-tools-trigger--selected":
+                extraToolSelected || isOtherShapesMenuOpen,
             },
           )}
           onToggle={() => setIsOtherShapesMenuOpen(!isOtherShapesMenuOpen)}
@@ -376,17 +377,7 @@ export const MobileToolBar = ({
             justifyContent: "center",
           }}
         >
-          <div
+          {extraIcon}
-            style={{
-              width: WIDTH,
-              height: WIDTH,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            {extraIcon}
-          </div>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           onClickOutside={() => setIsOtherShapesMenuOpen(false)}

packages/excalidraw/components/Toolbar.scss

@@ -44,6 +44,10 @@
         var(--button-active-border, var(--color-primary-darkest)) inset;
     }
 
+    &:hover {
+      background-color: transparent;
+    }
+
     &--selected,
     &--selected:hover {
       background: var(--color-primary-light);