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/PanControls.tsx

@@ -1,6 +1,6 @@
 import { Hand } from "@phosphor-icons/react";
 import { BottomControlDivider } from "./Divider";
-import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
+import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";
 
 export type PanControlsProps = {
   x: number;
@@ -9,9 +9,9 @@ export type PanControlsProps = {
 
 export function PanControls({ x, y }: PanControlsProps) {
   return (
-    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+    <div className={bottomControlMenuClass()}>
       <span className={bottomControlIconSlotClass()}>
-        <Hand size={16} weight="regular" />
+        <Hand size={24} weight="regular" />
       </span>
       <BottomControlDivider />
       <span className={bottomControlLabelClass()}>X</span>