3

src/components/DrawingCanvas.css

@@ -0,0 +1,71 @@
+.drawing-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.tool-button {
+  padding: 8px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 24px;
+  color: #333;
+  transition: all 0.2s ease;
+}
+
+.tool-button:hover {
+  background: #e0e0e0;
+  transform: scale(1.1);
+}
+
+.tool-button.active {
+  color: #007bff;
+}
+
+.canvas-container {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+
+.drawing-canvas {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+}
+
+.color-picker {
+  position: relative;
+}
+
+.thickness-controls {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.thickness-controls button {
+  padding: 5px;
+  font-size: 20px;
+  border-radius: 4px;
+}

src/components/DrawingCanvas.js

@@ -178,34 +178,39 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
   };
 
   return (
-    <div className="drawing-canvas-container">
+    <div className="drawing-container">
-      <canvas
-        ref={canvasRef}
-        className="drawing-canvas"
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-      />
       <div className="toolbar">
         <button onClick={() => setCurrentTool('pencil')} className={`tool-button ${currentTool === 'pencil' ? 'active' : ''}`}>
-          Pencil
+          ✏️
         </button>
         <button onClick={() => setCurrentTool('rectangle')} className={`tool-button ${currentTool === 'rectangle' ? 'active' : ''}`}>
-          Rectangle
+          🟨
         </button>
         <button onClick={() => setCurrentTool('circle')} className={`tool-button ${currentTool === 'circle' ? 'active' : ''}`}>
-          Circle
+          ⭕
+        </button>
+        <button onClick={handleUndo} className="tool-button">
+          ↺
+        </button>
+        <button onClick={handleRedo} className="tool-button">
+          ↻
         </button>
-        <button onClick={handleUndo}>Undo</button>
-        <button onClick={handleRedo}>Redo</button>
-        
         <div className="color-picker">
           <ChromePicker color={color} onChangeComplete={(color) => setColor(color.hex)} />
         </div>
-        
+        <div className="thickness-controls">
-        <input 
+          <button onClick={() => setThickness(thickness - 1)} disabled={thickness <= 1}>➖</button>
-          type="range" 
+          <span>{thickness}</span>
-          min="1" 
+          <button onClick={() => setThickness(thickness + 1)}>➕</button>
+        </div>
+      </div>
+      <div className="canvas-container">
+        <canvas
+          ref={canvasRef}
+          className="drawing-canvas"
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
           max="20" 
           value={thickness} 
           onChange={(e) => setThickness(e.target.value)}