From 59a2239c60128368a87175e0035546ebddbd5b39 Mon Sep 17 00:00:00 2001
From: Mayankbazari <201851065@iiitvadodara.ac.in>
Date: Fri, 22 May 2020 23:11:07 +0530
Subject: [PATCH 1/2] check

---
 client/src/Components/CusButton.jsx    | 17 -----
 client/src/Components/Home/Home.js     | 33 ++++++++-
 client/src/Components/Home/TextBox.jsx | 99 ++++++++++++++++++++++++++
 3 files changed, 131 insertions(+), 18 deletions(-)
 create mode 100644 client/src/Components/Home/TextBox.jsx

diff --git a/client/src/Components/CusButton.jsx b/client/src/Components/CusButton.jsx
index 5c2e977..c85b581 100644
--- a/client/src/Components/CusButton.jsx
+++ b/client/src/Components/CusButton.jsx
@@ -50,26 +50,9 @@ class CusButton extends Component {
         draggable="true"
         onDragStart={this.dragStart}
         onDragOver={this.dragover}
-<<<<<<< HEAD
-        id={this.props.aid}
-        style={{
-          color: this.props.color,
-          left: this.props.left,
-          top: this.props.top,
-          borderRadius: this.props.radius,
-        }}
-        onContextMenu={(e) => {
-          console.log(e);
-          e.preventDefault();
-          this.props.toggle(this.props.aid);
-          // console window object for global access
-          console.log(window.anuj);
-        }}
-=======
         id={aid}
         style={this.getButtonStyles()}
         onContextMenu={this.handleContextMenu}
->>>>>>> d82c6fc60d083b463d9991d533c1b886b49c6bf1
       >
         <input
           type="text"
diff --git a/client/src/Components/Home/Home.js b/client/src/Components/Home/Home.js
index 69a3a5f..5eb4ff6 100644
--- a/client/src/Components/Home/Home.js
+++ b/client/src/Components/Home/Home.js
@@ -3,6 +3,7 @@ import CusButton from "../CusButton";
 import "../../scss/main.scss";
 import DarkNav from "./DarkNavBar";
 import ContactUsForm from "./contactUs";
+import TextBox from "./TextBox";
 
 function Home() {
   const [backgroundColor, setbackgroundColor] = useState();
@@ -72,6 +73,19 @@ function Home() {
         height: "600px",
         padding: "50px",
       },
+      Text: {
+
+        padding: "12px 20px",
+        margin: "8px 0",
+        boxSizing: "border-box",
+        border: "1px solid #555",
+        outline: "none",
+        width: "200px",
+        
+       
+      },
+
+
     };
     return properties[type];
   };
@@ -81,7 +95,9 @@ function Home() {
     const _mouseY = e.clientY;
     const _mouseX = e.clientX;
     const card_id = e.dataTransfer.getData("card_id");
+    console.log(card_id)
     if (card_id) {
+
       const card = document.getElementById(card_id);
       card.style.display = "block";
       card.style.top = `${_mouseY}px`;
@@ -109,13 +125,17 @@ function Home() {
       contactUs: (
         <ContactUsForm key={index} styles={element} toggle={toggleModal} />
       ),
+      Text: (
+        <TextBox key={index} styles={element} toggle={toggleModal} />
+      ),   
+
     };
     return components[type];
   };
   return (
     <div className="Home">
       <aside className="sidebar">
-        <h1>Our Components</h1>
+        <h1  style={{color: "red"}}>Our Components</h1>
         {renderSidebarButton(
           "lightgrey",
           "25px",
@@ -138,6 +158,16 @@ function Home() {
           "contact us",
           "contactUs"
         )}
+
+        {renderSidebarButton(
+          "#92D9A6",
+          "25",
+          "box1",
+          "Simple Textbox",
+          "Text"
+        )}
+        
+
       </aside>
       <div className="modal" id="add-modal">
         <div className="modal__content">
@@ -158,6 +188,7 @@ function Home() {
         })}
       </div>
     </div>
+    
   );
 }
 export default Home;
diff --git a/client/src/Components/Home/TextBox.jsx b/client/src/Components/Home/TextBox.jsx
new file mode 100644
index 0000000..f426021
--- /dev/null
+++ b/client/src/Components/Home/TextBox.jsx
@@ -0,0 +1,99 @@
+import React, { Component } from "react";
+class TextBox extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+             username: '',
+             hover: ''
+        }
+    }
+
+  dragover = (e) => {
+    e.stopPropagation();
+  };
+  dragStart = (e) => {
+    const target = e.target;
+    target.classList.add("drag");
+    e.dataTransfer.setData("card_id", target.id);
+    setTimeout(() => {
+      target.style.display = "none";
+    }, 0);
+  };
+
+  myChangeHandler = (event) => {
+    this.setState({username: event.target.value});
+  }
+  
+
+  getInputStyles = () => {
+    const element = this.props.styles;
+    const style = {};
+   // element[backgroundColor] =  this.state.hover ? 'grey': this.props.backgroundColor;
+    const properties = [
+      "position",
+      "backgroundColor",
+      "margin",
+      "boxSizing",  
+      "borderRadius",
+      "height",
+      "padding",
+      "width",
+      "border",
+      "outline",
+      "transition"
+    ];
+   for (const property of properties) {
+      style[property] = element[property];
+    }
+    style['backgroundColor'] =  this.state.hover ? 'grey': element['backgroundColor'];
+    return style;
+  };
+
+  handleContextMenu = (e) => {
+    e.preventDefault();
+    const { toggle, styles } = this.props;
+    toggle(styles.aid);
+  };
+
+  handleMouseIn() {
+    this.setState({ hover: true })
+  }
+  
+  handleMouseOut() {
+    this.setState({ hover: false })
+  }
+
+//   hoverStyle = {
+//     backgroundColor: this.state.hover ? 'grey' : ''
+//   }  
+  
+  
+  render() {
+    return (
+   
+        
+         
+         
+          <input 
+          
+                type="text"
+                value = {this.state.username}
+                style={this.getInputStyles()}
+                draggable={true}
+                placeholder={"type your text here"}
+                onChange={this.myChangeHandler}
+                className="textbox"
+                onDragStart={this.dragStart}
+                onDragOver={this.dragover}
+                id={this.props.styles.aid}
+                onContextMenu={this.handleContextMenu}
+              />     
+        
+        
+    );
+  }
+
+}
+
+export default TextBox;
\ No newline at end of file

From 4db1323a6e56a6ac1378a023453cee1bdab9954e Mon Sep 17 00:00:00 2001
From: Mayankbazari <201851065@iiitvadodara.ac.in>
Date: Sat, 23 May 2020 12:27:23 +0530
Subject: [PATCH 2/2] Textbox added

---
 client/src/Components/CusButton.jsx      |  2 +-
 client/src/Components/Home/TextBox.jsx   | 26 +++-------
 client/src/scss/components/_Textbox.scss | 61 ++++++++++++++++++++++++
 client/src/scss/main.scss                |  1 +
 4 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 client/src/scss/components/_Textbox.scss

diff --git a/client/src/Components/CusButton.jsx b/client/src/Components/CusButton.jsx
index c85b581..6e91158 100644
--- a/client/src/Components/CusButton.jsx
+++ b/client/src/Components/CusButton.jsx
@@ -66,4 +66,4 @@ class CusButton extends Component {
   }
 }
 
-export default CusButton;
+export default CusButton;
\ No newline at end of file
diff --git a/client/src/Components/Home/TextBox.jsx b/client/src/Components/Home/TextBox.jsx
index f426021..527806c 100644
--- a/client/src/Components/Home/TextBox.jsx
+++ b/client/src/Components/Home/TextBox.jsx
@@ -29,10 +29,9 @@ class TextBox extends Component {
   getInputStyles = () => {
     const element = this.props.styles;
     const style = {};
-   // element[backgroundColor] =  this.state.hover ? 'grey': this.props.backgroundColor;
+   
     const properties = [
       "position",
-      "backgroundColor",
       "margin",
       "boxSizing",  
       "borderRadius",
@@ -46,7 +45,7 @@ class TextBox extends Component {
    for (const property of properties) {
       style[property] = element[property];
     }
-    style['backgroundColor'] =  this.state.hover ? 'grey': element['backgroundColor'];
+   
     return style;
   };
 
@@ -56,17 +55,7 @@ class TextBox extends Component {
     toggle(styles.aid);
   };
 
-  handleMouseIn() {
-    this.setState({ hover: true })
-  }
-  
-  handleMouseOut() {
-    this.setState({ hover: false })
-  }
-
-//   hoverStyle = {
-//     backgroundColor: this.state.hover ? 'grey' : ''
-//   }  
+ 
   
   
   render() {
@@ -74,23 +63,22 @@ class TextBox extends Component {
    
         
          
-         
+         <div className="topbox">
           <input 
           
                 type="text"
                 value = {this.state.username}
                 style={this.getInputStyles()}
                 draggable={true}
-                placeholder={"type your text here"}
+                placeholder={"Type your text here"}
                 onChange={this.myChangeHandler}
-                className="textbox"
+                className="field"
                 onDragStart={this.dragStart}
                 onDragOver={this.dragover}
                 id={this.props.styles.aid}
                 onContextMenu={this.handleContextMenu}
               />     
-        
-        
+       </div>
     );
   }
 
diff --git a/client/src/scss/components/_Textbox.scss b/client/src/scss/components/_Textbox.scss
new file mode 100644
index 0000000..e0e1fcf
--- /dev/null
+++ b/client/src/scss/components/_Textbox.scss
@@ -0,0 +1,61 @@
+@import url("https://fonts.googleapis.com/css2?family=Handlee&family=Maven+Pro&display=swap");
+$fontfamily: "Maven Pro", sans-serif;
+
+.textbox{
+    margin-bottom: 10px;
+    width: 100%;
+    outline: none;
+    border: none;
+    padding: 3% 4%;
+    font-size: 20px;
+    background-color: #ebeef1;
+    border-radius: 30px;
+
+}
+
+.field {
+    width: 100%;
+    height: 56px;
+    border-radius: 4px;
+    position: relative;
+    background-color: lightblue;
+    transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out;
+  }
+
+  .field:hover {
+    background-color: lightcyan;
+    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  .topbox input {
+    width: 100%;
+    height: 56px;
+    position: relative;
+    padding: 0px 16px;
+    border: none;
+    border-radius: 4px;
+    font-family: $fontfamily;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: normal;
+    background-color: lightsteelblue;
+    color: black;
+    outline: none;
+    box-shadow: 0px 4px 20px 0px transparent;
+    transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out,
+      0.1s padding ease-in-out;
+    -webkit-appearance: none;
+  }
+
+  .field input::-webkit-input-placeholder {
+    color: red;
+  }
+  .field input::-moz-placeholder {
+    color: red;
+  }
+  .field input:-ms-input-placeholder {
+    color: red;
+  }
+  .field input:-moz-placeholder {
+    color: red  ;
+  }
\ No newline at end of file
diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss
index 5a48ea4..6558ead 100644
--- a/client/src/scss/main.scss
+++ b/client/src/scss/main.scss
@@ -15,3 +15,4 @@
 @import "components/navbar";
 @import "components/contactus";
 @import "components/home";
+@import "./components/Textbox"