feat: enhance bottom controls and UI components

- Updated BottomControlsIsland for improved layout and styling.
- Refactored LayersSheet to enhance usability and visual consistency.
- Modified ToolOverlay for better tool selection experience.
- Improved BrushControls with new ColorPicker and Slider components.
- Enhanced PanControls and TransformControls for better user interaction.
- Updated ZoomControls for consistent button sizes and styles.
- Introduced new styles for bottom controls in styles.ts and index.css.
- Added BottomControlColorPicker, BottomControlSelectMenu, and BottomControlSlider components for better modularity and reusability.

view/bottom-controls/ZoomControls.tsx

@@ -2,7 +2,7 @@ import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
 import { commandIds } from "@commands/ids";
 import type { AppStore } from "@editor/store";
 import { BottomControlDivider } from "./Divider";
-import { bottomControlButtonClass } from "./styles";
+import { bottomControlButtonClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";
 
 export type ZoomControlsProps = {
   zoom: number;
@@ -12,18 +12,18 @@ export type ZoomControlsProps = {
 
 export function ZoomControls({ zoom, zoomPercent, dispatch }: ZoomControlsProps) {
   return (
-    <>
+    <div className={bottomControlMenuClass()}>
       <button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
-        <Minus size={16} weight="regular" />
+        <Minus size={24} weight="regular" />
       </button>
-      <span className="min-w-14 text-center tabular-nums text-white">{zoomPercent}%</span>
+      <span className={bottomControlValueClass()}>{zoomPercent}%</span>
       <button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
-        <Plus size={16} weight="regular" />
+        <Plus size={24} weight="regular" />
       </button>
       <BottomControlDivider />
       <button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
-        <CornersOut size={16} weight="regular" />
+        <CornersOut size={24} weight="regular" />
       </button>
-    </>
+    </div>
   );
 }