Played around with forms

14 files changed, 128 insertions, 81 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 660e7f6..d8e94d3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,13 +1,14 @@
 import React from "react";
 import Header from "./Header/Header";
-import HomeView from "./Views/Home";
+import BillingForm from "./Form/Form.js";
 
 const App = () => {
-	const currentview = "home";
 	return (
 		<>
 			<Header/>
-			{currentview === "home" && <HomeView/>}
+			<div className={"root-content"}>
+				<BillingForm/>
+			</div>
 		</>
 	)
 }
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
new file mode 100644
index 0000000..d0ecc5f
--- /dev/null
+++ b/src/components/Form/Form.css
@@ -0,0 +1,4 @@
+form {
+  border: 1px solid purple;
+  display: flex;
+  justify-content: space-evenly; }
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
new file mode 100644
index 0000000..1261e4b
--- /dev/null
+++ b/src/components/Form/Form.js
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import "./Form.css";
+
+const BillingForm = () => {
+  /*
+  const sampleData = [
+    {
+      "Model": "Kisan Chair",
+      "Description":"Very good chair",
+      "Price":"10000",
+      "Discount":"3%"
+    },
+    {
+      "Model": "Supreme Chair",
+      "Description":"Even better chair",
+      "Price":"2134983",
+      "Discount":"9%"
+    }
+  ]
+  */
+  const [itemValue, setItemValue] = useState("");
+  const [descValue, setDescValue] = useState("");
+
+
+
+  return (
+    <form onSubmit={
+      (event) => {
+        event.preventDefault();
+        console.log(itemValue, descValue);
+      }
+    }>
+
+      <label>
+        Item: <input type="text" value={itemValue} onChange={
+          (event) => {
+            setItemValue(event.target.value);
+          }
+        } />
+      </label>
+
+      <label>
+        Description: <input type="text" value={descValue} onChange={
+          (event) => {
+            setDescValue(event.target.value);
+          }
+        } />
+      </label>
+
+      <input type="submit" value="add" />
+
+    </form>
+  )
+}
+
+export default BillingForm;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
new file mode 100644
index 0000000..01f9bf2
--- /dev/null
+++ b/src/components/Form/Form.scss
@@ -0,0 +1,5 @@
+form {
+  border: 1px solid purple;
+  display: flex;
+  justify-content: space-evenly;
+}
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index dd320ea..5dc483d 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1,5 +1,17 @@
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
 /* Experimental color scheme */
+/* light theme */
+/* 
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 0px 0px 4px #232627;
+*/
+/* Inspired by Dracula */
 .header {
   display: flex;
   flex-direction: row;
@@ -7,12 +19,12 @@
   align-items: center;
   justify-content: space-between;
   position: static;
-  margin: none;
+  margin: 0 0 1.5rem 0;
   padding: none;
   width: 100%;
   height: 5rem;
-  background-color: lightgray;
-  box-shadow: 2px 0px 4px #232627; }
+  background-color: #383A59;
+  box-shadow: 0px 4px 4px #383A59; }
 
 .header div {
   margin: auto 1rem; }
@@ -20,7 +32,7 @@
 nav a {
   text-decoration: none;
   padding: 0.3rem;
-  color: brown; }
+  color: #F2F2F2; }
 
 .placeholder {
   width: 5rem;
@@ -30,4 +42,4 @@ nav a {
   display: inline-block; }
 
 p, h1, h2, h3, h4, h5, h6 {
-  color: #000000; }
+  color: #F2F2F2; }
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index e9242dd..cebc2cc 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -7,12 +7,11 @@
 	align-items: center;
 	justify-content: space-between;
 	position: static;
-	margin: none;
+	margin: 0 0 1.5rem 0;
 	padding: none;
 	width: 100%;
 	height: 5rem;
 	background-color: $altBG;
-
 	box-shadow: $defShadow;
 }
 
diff --git a/src/components/Tile/Tile.js b/src/components/Tile/Tile.js
deleted file mode 100644
index 2c67741..0000000
--- a/src/components/Tile/Tile.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-// import React, { useState } from "react";
-// import "./Tile.css";
-
-const Tile = (props) => {
-	// const [activeLink, updateActiveLink] = useState("home")
-	return (
-		<div className={"tile"} style={{
-			"height": props.height,
-			"width": props.width
-		}}></div>
-	)
-}
-
-export default Tile;
diff --git a/src/components/Tile/Tile.scss b/src/components/Tile/Tile.scss
deleted file mode 100644
index d1c62ce..0000000
--- a/src/components/Tile/Tile.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../../../styles/theme";
-
-.tile {
-	width: 5rem;
-	height: 5rem;
-
-	border: 1px dashed $defFG;
-	margin: 1rem;
-}
diff --git a/src/components/Views/Home.css b/src/components/Views/Home.css
deleted file mode 100644
index 39a8bc2..0000000
--- a/src/components/Views/Home.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
-/* Experimental color scheme */
-.view {
-  width: 80%;
-  margin: 2rem auto; }
-
-.view {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center; }
diff --git a/src/components/Views/Home.js b/src/components/Views/Home.js
deleted file mode 100644
index ab8b66f..0000000
--- a/src/components/Views/Home.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-// import React, { useState } from "react";
-import "./../Tile/Tile";
-import "./Home.css";
-
-const HomeView = () => {
-	// const [activeLink, updateActiveLink] = useState("home")
-	return (
-		<div className={"view"}>
-			<Tile height="1rem" width="1rem"></Tile>
-		</div>
-	)
-}
-
-export default HomeView
diff --git a/src/components/Views/Home.scss b/src/components/Views/Home.scss
deleted file mode 100644
index cd07dd5..0000000
--- a/src/components/Views/Home.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../../../styles/theme";
-@import "../../../styles/view";
-
-.view {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;;
-}
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 66a16fc..5f92bc9 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -1,6 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
 
+$defFont: 'Quicksand', sans-serif;
+
 /* Experimental color scheme */
+/* light theme */
+/* 
 $defBG: #FFFFFF;
 $altBG: lightgray;
 $defFG: #000000;
@@ -8,10 +12,16 @@ $altFG: #232627;
 $defLink: brown;
 $altLink: brown;
 
-$defShadow: 2px 0px 4px #232627;
+$defShadow: 0px 0px 4px #232627;
+*/
 
-$bodyPadding: 0;
-$bodyMargin: 0;
+/* Inspired by Dracula */
+$defBG: #282A36;
+$altBG: #383A59;
+$defFG: #F2F2F2;
+$altFG: #FF79C6;
+$defLink: $defFG;
+$altLink: $altFG;
 
-$defFont: 'Quicksand', sans-serif;
+$defShadow: 0px 4px 4px $altBG;
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 3049801..198f1e1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,10 +1,25 @@
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
 /* Experimental color scheme */
+/* light theme */
+/* 
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 0px 0px 4px #232627;
+*/
+/* Inspired by Dracula */
 * {
   font-family: "Quicksand", sans-serif; }
 
 body {
-  background-color: #FFFFFF;
-  color: #000000;
-  padding: 0;
+  background-color: #282A36;
+  color: #F2F2F2;
   margin: 0; }
+
+.root-content {
+  width: 90%;
+  margin: auto; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index f893b61..b0e5ea1 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,12 +1,16 @@
 @import "theme";
 
 * {
-	font-family: $defFont
+  font-family: $defFont
 }
 
 body {
-	background-color: $defBG;
-	color: $defFG;
-	padding: $bodyPadding;
-	margin: $bodyMargin;
+  background-color: $defBG;
+  color: $defFG;
+  margin: 0;
+}
+
+.root-content {
+  width: 90%;
+  margin: auto;
 }