quick functionality and style fixes

src/components/Canvas/Canvas.tsx

@@ -89,7 +89,7 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(function Canvas(
 			throw new Error("Couldn't get the 2D context of the canvas.");
 		}
 
-		ctx.globalAlpha = opacity.current;
+		ctx.globalAlpha = mode === "eraser" ? 1 : opacity.current;
 
 		// Clip the drawing to the bounds of the canvas
 		ctx.save();
@@ -157,7 +157,6 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(function Canvas(
 			mode === "eraser" ? "destination-out" : "source-over";
 		ctx.fillStyle = color.current;
 		ctx.strokeStyle = color.current;
-		// ctx.globalAlpha = mode === "eraser" ? 0 : opacity.current;
 		ctx.lineWidth = strokeWidth.current * dpi;
 		const currentShapeMode = shapeMode.current;
 

src/components/CanvasPane/CanvasPane.tsx

@@ -190,8 +190,13 @@ function CanvasPane({ loading }: CanvasPaneProps): ReactNode {
 			if (!canvasSpace) return;
 
 			if (e instanceof WheelEvent) {
-				console.log(e.deltaY);
-				performZoom(e.clientX, e.clientY, e.deltaY / 10);
+				if (e.ctrlKey) {
+					// Ctrl key means we are zooming.
+					performZoom(e.clientX, e.clientY, e.deltaY / 10);
+				} else if (e.shiftKey) {
+					// Shift key means we are panning horizontally.
+					changeX(-e.deltaY);
+				}
 				// Handle the click event
 			} else if (e instanceof MouseEvent) {
 				if (!isClickingOnSpace(e)) return;

src/components/DrawingToolbar/DrawingToolbar.tsx

@@ -115,6 +115,7 @@ function DrawingToolbar(): ReactNode {
 		<Fragment key="settings_Strength">
 			<span className="text-sm">Stroke Width</span>
 			<input
+				className="mx-2"
 				name={`${mode}_strength`.toUpperCase()}
 				type="range"
 				min={strengthSettings.min}
@@ -137,6 +138,7 @@ function DrawingToolbar(): ReactNode {
 		<Fragment key="settings_Brush">
 			<Brush />
 			<input
+				className="mx-2"
 				type="range"
 				id="brush-size"
 				min={0.01}

src/components/LayerPane/LayerPane.tsx

@@ -34,7 +34,7 @@ function LayerPane(): ReactNode {
 		}
 	};
 	const newLayerButtonCss =
-		"inline-flex justify-center p-1 text-lg bg-[rgb(36,36,36)] hover:bg-[#d1836a] rounded-t-[5px] border border-[rgb(56,55,55)] disabled:bg-[#242424] disabled:text-gray-500";
+		"inline-flex justify-center p-1 text-lg bg-[rgb(36,36,36)] hover:bg-accent rounded-t-[5px] border border-[rgb(56,55,55)] disabled:bg-[#242424] disabled:text-gray-500";
 
 	const newLayerButton =
 		totalLayers >= MAX_LAYERS ? (

src/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 // Lib
-import logo from "@/assets/icons/IdeaDrawnNewLogo_transparent.png";
+import logo from "@/assets/icons/IdeaDrawnNewLogo.png";
 import { useRef, useCallback, useEffect, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import useStore from "@/state/hooks/useStore";

src/state/slices/canvasElementsSlice.ts

@@ -44,7 +44,7 @@ export const createCanvasElementsSlice: StateCreator<
 			...properties, // Override the default properties with the provided properties, if any.
 			drawType: shapeMode,
 			strokeWidth,
-			opacity
+			opacity: type === "eraser" ? 1 : opacity
 		};
 
 		set((state) => ({

src/state/slices/canvasSlice.ts

@@ -425,6 +425,7 @@ export const createCanvasSlice: StateCreator<
 		ctx.beginPath();
 		ctx.rect(x, y, width, height);
 		ctx.globalCompositeOperation = "destination-over";
+		ctx.globalAlpha = 1;
 
 		if (background === "transparent" && !preview) {
 			// If the background is transparent, fill with a checkerboard pattern.
@@ -649,8 +650,7 @@ export const createCanvasSlice: StateCreator<
 		width: 400,
 		height: 400,
 		mode: "move",
-		// background: "#00FFFF",
-		background: "transparent",
+		background: "#ffffff",
 		shape: "rectangle",
 		shapeMode: "fill",
 		color: "#000000",