implemented toolbar

Author: apsinghdev

client/src/components/ClearBtn.jsx

@@ -0,0 +1,14 @@
+function ClearBtn(){
+    return (
+      <div className="border 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"
+        >
+          Clear
+        </button>
+      </div>
+    );
+}
+
+export default ClearBtn;

client/src/components/ColorPicker.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 function ColorPicker(props){
     return (
-      <div className="flex p-1 items-center justify-around">
+      <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>

client/src/components/Socials.jsx

@@ -1,14 +1,14 @@
 function StrokeWidthPicker(){
     return (
-      <div className="flex p-1 items-center justify-around">
+      <div className="flex p-1 items-center justify-around mt-4">
         <h1 className="font-sans text-lg antialiased font-semibold text-white">
           Stroke :
         </h1>
         <input
           type="number"
           placeholder="2"
           defaultValue={2}
-          className="w-12 p-1 h-7 block border border-gray-800 cursor-pointer rounded-lg"
+          className="w-12 p-1 h-7 block border border-gray-800 cursor-pointer rounded-md"
         ></input>
       </div>
     );

client/src/components/StrokeWidthPicker.jsx

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