From aef52169e3f0f9bde0e5f2dd21cbb316eaa34136 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sat, 27 Mar 2021 21:24:54 +0530 Subject: laid out some very basic components, the tile component still needs to be worked upon --- src/components/App.js | 7 ++++++- src/components/Header/Header.css | 4 +--- src/components/Header/Header.scss | 5 ++--- src/components/Tile/Tile.js | 20 ++++++++++++++++++++ src/components/Tile/Tile.scss | 17 +++++++++++++++++ src/components/Views/Home.css | 0 src/components/Views/Home/Home.css | 17 +++++++++++++++++ src/components/Views/Home/Home.js | 16 ++++++++++++++++ src/components/Views/Home/Home.scss | 17 +++++++++++++++++ src/styles/_theme.scss | 17 +++++++++++++++++ src/styles/_themes.sass | 17 ----------------- src/styles/_view.scss | 4 ++++ src/styles/global.css | 4 +++- src/styles/global.scss | 2 +- tsconfig.json | 26 -------------------------- 15 files changed, 121 insertions(+), 52 deletions(-) create mode 100644 src/components/Tile/Tile.js create mode 100644 src/components/Tile/Tile.scss create mode 100644 src/components/Views/Home.css create mode 100644 src/components/Views/Home/Home.css create mode 100644 src/components/Views/Home/Home.js create mode 100644 src/components/Views/Home/Home.scss create mode 100644 src/styles/_theme.scss delete mode 100644 src/styles/_themes.sass create mode 100644 src/styles/_view.scss delete mode 100644 tsconfig.json 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 ( -
+ <> +
+ {currentview === "home" && } + ) } 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 ( +
+ ) +} + +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 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 ( +
+
+
+ ) +} + +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/_theme.scss b/src/styles/_theme.scss new file mode 100644 index 0000000..66a16fc --- /dev/null +++ b/src/styles/_theme.scss @@ -0,0 +1,17 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +/* Experimental color scheme */ +$defBG: #FFFFFF; +$altBG: lightgray; +$defFG: #000000; +$altFG: #232627; +$defLink: brown; +$altLink: brown; + +$defShadow: 2px 0px 4px #232627; + +$bodyPadding: 0; +$bodyMargin: 0; + +$defFont: 'Quicksand', sans-serif; + diff --git a/src/styles/_themes.sass b/src/styles/_themes.sass deleted file mode 100644 index 66a16fc..0000000 --- a/src/styles/_themes.sass +++ /dev/null @@ -1,17 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); - -/* Experimental color scheme */ -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 2px 0px 4px #232627; - -$bodyPadding: 0; -$bodyMargin: 0; - -$defFont: 'Quicksand', sans-serif; - 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" - ] -} -- cgit v1.2.3