Merge pull request #26 from apsinghdev/Feat/add-strokeColor-functionality

Feat/add stroke color functionality

Author: apsinghdev

client/src/App.jsx

@@ -107,7 +107,7 @@ function App() {
   }
 
   function addStroke(e) {
-    if (e.target.id === "stroke") {
+    if (e.target.id === "penColor") {
       const newColor = e.target.value;
       color = newColor;
       ctx.strokeStyle = newColor;
@@ -125,14 +125,16 @@ function App() {
   return (
     <div id="container">
       <Sidebar
+        addStroke={addStroke}
+
         addLineWidth={addLineWidth}
         clearOnClick={clearOnClick}
         ref={sidebarRef}
         id="clear"
         toggleMenu={toggleMenu}
       ></Sidebar>
       <Canvas canvasRef={canvasRef}></Canvas>
-      { showMenu && <Menu></Menu>}
+      {showMenu && <Menu></Menu>}
     </div>
   );
 }

client/src/components/CanvasColor.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+function CanvasColor(props) {
+  return (
+    <div className="flex p-1 items-center justify-around mt-3">
+      <h1 className="font-sans text-lg antialiased font-semibold text-white">
+        {props.name}
+      </h1>
+      <input
+        type="color"
+        value={props.defaultColor}
+        className="p-1 h-10 w-10 block bg-white border border-gray-800 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700"
+      ></input>
+    </div>
+  );
+}
+
+export default CanvasColor;

client/src/components/ColorPicker.jsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+function PenColor(props) {
+  return (
+    <div className="flex p-1 items-center justify-around mt-3">
+      <h1 className="font-sans text-lg antialiased font-semibold text-white">
+        {props.name}
+      </h1>
+      <input
+        id="penColor"
+        type="color"
+        onChange={props.addStroke}
+        value={props.defaultColor}
+        className="p-1 h-10 w-10 block bg-white border border-gray-800 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700"
+      ></input>
+    </div>
+  );
+}
+
+export default PenColor;

client/src/components/PenColor.jsx

@@ -14,6 +14,7 @@ function Sidebar(props){
           clearOnClick={props.clearOnClick}
           id={props.id}
           addLineWidth={props.addLineWidth}
+          addStroke={props.addStroke}
         ></Toolbar>
         <LoginAndLogout></LoginAndLogout>
       </div>

client/src/components/Sidebar.jsx

@@ -1,16 +1,19 @@
 /* eslint-disable react/prop-types */
-import ColorPicker from "./ColorPicker";
 import StrokeWidthPicker from "./StrokeWidthPicker";
 import ClearBtn from "./ClearBtn";
 import Eraser from "./Eraser";
+import CanvasColor from "./CanvasColor";
+import PenColor from "./PenColor";
 
 function Toolbar(props){
     return (
       <div className="block w-full mt-20 align-center">
-        <ColorPicker name="Colors :" defaultColor="#000000"></ColorPicker>
-        <ColorPicker name="Canvas :" defaultColor="#FFFFFF"></ColorPicker>
+        <PenColor addStroke={props.addStroke} name="Color :"></PenColor>
+        <CanvasColor name="Canvas :"></CanvasColor>
         <Eraser></Eraser>
-        <StrokeWidthPicker addLineWidth={props.addLineWidth} ></StrokeWidthPicker>
+        <StrokeWidthPicker
+          addLineWidth={props.addLineWidth}
+        ></StrokeWidthPicker>
         <ClearBtn clearOnClick={props.clearOnClick} id={props.id}></ClearBtn>
       </div>
     );