laid out some very basic components, the tile component still needs to be worked upon

14 files changed, 104 insertions, 35 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 2808a4b..4f71c90 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,14 @@
 import React from "react";
 import Header from "./Header/Header";
+import HomeView from "./Views/Home/Home";
 
 const App = () => {
+	const currentview = "home";
 	return (
-		<Header />
+		<>
+			<Header/>
+			{currentview === "home" && <HomeView/>}
+		</>
 	)
 }
 
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 6d146f6..dd320ea 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -6,9 +6,7 @@
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  position: absolute;
-  top: 0px;
-  left: 0px;
+  position: static;
   margin: none;
   padding: none;
   width: 100%;
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 28a0489..e9242dd 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_themes.sass";
+@import "../../styles/_theme";
 
 .header {
 	display: flex;
@@ -6,8 +6,7 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: space-between;
-	position: absolute;
-	top: 0px; left: 0px;
+	position: static;
 	margin: none;
 	padding: none;
 	width: 100%;
diff --git a/src/components/Tile/Tile.js b/src/components/Tile/Tile.js
new file mode 100644
index 0000000..6fa7f2c
--- /dev/null
+++ b/src/components/Tile/Tile.js
@@ -0,0 +1,20 @@
+import React from "react";
+// import React, { useState } from "react";
+import "./Tile.css";
+
+const Tile = (props) => {
+	// const [,] = useState()
+	
+	const style = {
+		height: props.height;
+		width: props.width;
+		backgroundColor: props.colorBG
+		// textColor: props.colorFG
+	}
+
+	return (
+		<div className={"tile"} style={style}></div>
+	)
+}
+
+export default Tile
diff --git a/src/components/Tile/Tile.scss b/src/components/Tile/Tile.scss
new file mode 100644
index 0000000..54a5ad7
--- /dev/null
+++ b/src/components/Tile/Tile.scss
@@ -0,0 +1,17 @@
+@import "../../../styles/theme";
+@import "../../../styles/view";
+
+.view {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;;
+}
+
+.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
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Views/Home.css
diff --git a/src/components/Views/Home/Home.css b/src/components/Views/Home/Home.css
new file mode 100644
index 0000000..4f5cb8d
--- /dev/null
+++ b/src/components/Views/Home/Home.css
@@ -0,0 +1,17 @@
+@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; }
+
+.tile {
+  width: 5rem;
+  height: 5rem;
+  border: 1px dashed #000000;
+  margin: 1rem; }
diff --git a/src/components/Views/Home/Home.js b/src/components/Views/Home/Home.js
new file mode 100644
index 0000000..51c4c4f
--- /dev/null
+++ b/src/components/Views/Home/Home.js
@@ -0,0 +1,16 @@
+import React from "react";
+// import React, { useState } from "react";
+import "./Home.css";
+
+const HomeView = (procs) => {
+	const tileHeight = procs.height;
+	const tileWidth = procs.width;
+	// const [activeLink, updateActiveLink] = useState("home")
+	return (
+		<div className={"view"}>
+			<div className={"tile"}></div>
+		</div>
+	)
+}
+
+export default HomeView
diff --git a/src/components/Views/Home/Home.scss b/src/components/Views/Home/Home.scss
new file mode 100644
index 0000000..54a5ad7
--- /dev/null
+++ b/src/components/Views/Home/Home.scss
@@ -0,0 +1,17 @@
+@import "../../../styles/theme";
+@import "../../../styles/view";
+
+.view {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;;
+}
+
+.tile {
+	width: 5rem;
+	height: 5rem;
+
+	border: 1px dashed $defFG;
+	margin: 1rem;
+}
diff --git a/src/styles/_themes.sass b/src/styles/_theme.scss
index 66a16fc..66a16fc 100644
--- a/src/styles/_themes.sass
+++ b/src/styles/_theme.scss
diff --git a/src/styles/_view.scss b/src/styles/_view.scss
new file mode 100644
index 0000000..0ccc22a
--- /dev/null
+++ b/src/styles/_view.scss
@@ -0,0 +1,4 @@
+.view {
+	width: 80%;
+	margin: 2rem auto;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 099c3de..3049801 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,8 +1,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
 * {
   font-family: "Quicksand", sans-serif; }
 
 body {
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  color: #000000;
   padding: 0;
   margin: 0; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 703efb8..f893b61 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,4 @@
-@import "themes";
+@import "theme";
 
 * {
 	font-family: $defFont
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index a273b0c..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}