Merge pull request #23 from apsinghdev/Feat/add-eraser-UI

Feat/add eraser UI

Author: apsinghdev

client/src/assets/eraser.png

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 function ClearBtn(props){
     return (
-      <div className="border block flex items-center justify-center mt-5">
+      <div className="block flex items-center justify-center mt-5">
         <button
           type="button"
           className="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br font-medium rounded-lg text-sm px-5 py-2.5 text-center"

client/src/components/ClearBtn.jsx

@@ -8,7 +8,7 @@ function ColorPicker(props){
         <input
           type="color"
           value={props.defaultColor}
-          className="p-1 h-10 w-14 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"
+          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>
     );

client/src/components/ColorPicker.jsx

@@ -0,0 +1,14 @@
+import eraserImg from "../assets/eraser.png";
+
+function Eraser(){
+    return (
+      <div className="flex p-1 items-center justify-around mt-3">
+        <h1 className="font-sans text-lg antialiased font-semibold text-white">
+          Eraser :
+        </h1>
+        <img src={eraserImg} className="h-8 w-8 rounded cursor-pointer"></img>
+      </div>
+    );
+}
+
+export default Eraser;

client/src/components/Eraser.jsx

@@ -7,8 +7,8 @@ function Header(props) {
       <h1 className="font-sans text-2xl antialiased font-extrabold text-white">
         drawRTC
       </h1>
-      <div className="" id="options">
-        <FaBars size={25} onClick={props.toggleMenu}/>
+      <div className="cursor-pointer" id="options">
+        <FaBars size={25} onClick={props.toggleMenu} />
       </div>
     </div>
   );

client/src/components/Header.jsx

@@ -8,7 +8,7 @@ function StrokeWidthPicker(){
           type="number"
           placeholder="2"
           defaultValue={2}
-          className="w-12 p-1 h-7 block border border-gray-800 cursor-pointer rounded-md"
+          className="w-12 p-1 h-8 block border border-gray-800 cursor-pointer rounded-md"
         ></input>
       </div>
     );

client/src/components/StrokeWidthPicker.jsx

@@ -2,12 +2,14 @@
 import ColorPicker from "./ColorPicker";
 import StrokeWidthPicker from "./StrokeWidthPicker";
 import ClearBtn from "./ClearBtn";
+import Eraser from "./Eraser";
 
 function Toolbar(props){
     return (
-      <div className="block w-full mt-20 border align-center">
+      <div className="block w-full mt-20 align-center">
         <ColorPicker name="Colors :" defaultColor="#000000"></ColorPicker>
         <ColorPicker name="Canvas :" defaultColor="#FFFFFF"></ColorPicker>
+        <Eraser></Eraser>
         <StrokeWidthPicker></StrokeWidthPicker>
         <ClearBtn clearOnClick={props.clearOnClick} id={props.id}></ClearBtn>
       </div>