diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 930dd67..da75841 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,89 +1,20 @@ -import people from "./images/people.png"; -import plus from "./images/plus.png"; -import phoneCall from "./images/phone-call.png"; -import circle from "./images/circle.png"; +import MeetingsPanel from "./MeetingsPanel"; +import ShortCuts from "./ShortCuts"; +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; const Home: React.FC = () => { return ( - - - - Digital Walk-Around - - -
-
-
-
-
- -
-
- -
- -
-
-
- -
-
- -
-
-
-
-
-
-
-
-
- - - -
-
- -
-
-
-
- - - -
-
- -
-
-
-
-
-
- - - -
-
- -
-
-
-
- - - -
-
- -
-
-
-
-
-
- - + + + + + + + + + + ); }; diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx new file mode 100644 index 0000000..4c4771a --- /dev/null +++ b/src/components/home/Meeting.tsx @@ -0,0 +1,17 @@ +function Meeting(props: any) { + return ( + +
+
+
+ +
+
+ +
+
+
+ ); + }; + + export default Meeting; \ No newline at end of file diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx new file mode 100644 index 0000000..56f5042 --- /dev/null +++ b/src/components/home/MeetingsPanel.tsx @@ -0,0 +1,19 @@ +import Meeting from "./Meeting"; + +const MeetingsPanel: React.FC = () => { + return ( +
+
+ +
+
+ +
+ + + +
+ ); + }; + + export default MeetingsPanel; \ No newline at end of file diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx new file mode 100644 index 0000000..2ea7277 --- /dev/null +++ b/src/components/home/ShortCuts.tsx @@ -0,0 +1,43 @@ +import PeopleIcon from '@mui/icons-material/People'; +import AddIcon from '@mui/icons-material/Add'; +import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled'; +import CircleIcon from '@mui/icons-material/Circle'; +import Button from "@mui/material/Button"; +import Grid from "@mui/material/Grid"; + +const ShortCuts: React.FC = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); + }; + + export default ShortCuts; \ No newline at end of file diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx new file mode 100644 index 0000000..ba95b2e --- /dev/null +++ b/src/components/login/Login.tsx @@ -0,0 +1,11 @@ +import Container from "@mui/material/Container"; + +const Login: React.FC = () => { + return ( + + Login + + ); + }; + + export default Login; \ No newline at end of file diff --git a/src/style/App.css b/src/style/App.css index 2f0348e..f305473 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -1,116 +1,49 @@ -.col-1 { - width: 8.33% !important; -} - -.col-2 { - width: 16.66% !important; -} - -.col-3 { - width: 25% !important; -} - -.col-4 { - width: 33.33% !important; -} - -.col-5 { - width: 41.66% !important; -} - -.col-6 { - width: 50% !important; -} - -.col-7 { - width: 58.33% !important; -} - -.col-8 { - width: 66.66% !important; -} - -.col-9 { - width: 75% !important; -} - -.col-10 { - width: 83.33% !important; -} - -.col-11 { - width: 91.66% !important; -} - -.col-12 { - width: 100% !important; -} - -[class*="col-"] { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} - -.row { - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - max-width: 100%; -} - -.row * { +.full-width { width: 100%; } -.container-fluid { - width: 100%; - margin-right: auto; - margin-left: auto; -} - -label { - display: inline-block; +.main-home { + max-width: 85% !important; } .main-home .meetings-panel { - display: block; - margin-top: 20vh; - margin-left: 10vw; + margin: auto; + margin-top: 15vh; border-style: solid; border-color: #D3D3D3; border-width: 2px; - width: 40vw; - height: 60vh; border-radius: 40px; + width: 65%; + height: 65vh; overflow: hidden; } .main-home .meetings-panel .row { width: 100%; - margin: 0; } .main-home .meetings-panel .current-time { text-align: center; background-color: grey; + padding-top: 1%; + padding-bottom: 1%; } .main-home .meetings-panel .current-date { text-align: center; background-color: grey; + padding-bottom: 1%; } .main-home .meetings-panel .meeting { background-color: #D3D3D3; text-align: center; margin-top: 15px; + line-height: 2; } .main-home .short-cuts .row-1 { - margin-top: 25vh; + margin-top: 30vh; } .main-home .short-cuts .row-2 { @@ -118,21 +51,22 @@ label { } .main-home .short-cuts label { - width: 10vw; + display: inline-block; + width: 100px; text-align: center; } .main-home .short-cuts .tile { + margin-right: 100%; background-color: #D3D3D3; - width: 10vw; - height: 10vw; - border-radius: 1.5vw; + width: 100px; + height: 100px; + border-radius: 16px; } -.main-home .short-cuts .tile img { +.main-home .short-cuts .tile .icon { + color: black; width: 70%; height: 70%; - margin-top: 15%; - margin-left: 15%; } -/*# sourceMappingURL=style.css.map */ \ No newline at end of file +/*# sourceMappingURL=App.css.map */ \ No newline at end of file diff --git a/src/style/App.css.map b/src/style/App.css.map index 202cc44..3c4086c 100644 --- a/src/style/App.css.map +++ b/src/style/App.css.map @@ -1,8 +1,8 @@ { "version": 3, - "mappings": "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", + "mappings": "AG4CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AK7ClB,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CA6CO;;AAhDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAtCjC,AAuCQ,UAvCE,CA8BN,WAAW,CASP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EPzCC,OAAO;EO0CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAhDhC,AA6CY,UA7CF,CA8BN,WAAW,CASP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG", "sources": [ - "style.sass", + "App.sass", "_variables.sass", "base/_base-dir.sass", "base/_base.sass", @@ -10,8 +10,9 @@ "layouts/_header.sass", "layouts/_footer.sass", "modules/_modules-dir.sass", - "modules/_mainHome.sass" + "modules/_mainHome.sass", + "modules/_login.sass" ], "names": [], - "file": "style.css" + "file": "App.css" } \ No newline at end of file diff --git a/src/style/base/_base.sass b/src/style/base/_base.sass index afa0261..f88dda4 100644 --- a/src/style/base/_base.sass +++ b/src/style/base/_base.sass @@ -1,42 +1,46 @@ -.col-1 - width: 8.33% !important -.col-2 - width: 16.66% !important -.col-3 - width: 25% !important -.col-4 - width: 33.33% !important -.col-5 - width: 41.66% !important -.col-6 - width: 50% !important -.col-7 - width: 58.33% !important -.col-8 - width: 66.66% !important -.col-9 - width: 75% !important -.col-10 - width: 83.33% !important -.col-11 - width: 91.66% !important -.col-12 - width: 100% !important +// .col-1 +// width: 8.33% !important +// .col-2 +// width: 16.66% !important +// .col-3 +// width: 25% !important +// .col-4 +// width: 33.33% !important +// .col-5 +// width: 41.66% !important +// .col-6 +// width: 50% !important +// .col-7 +// width: 58.33% !important +// .col-8 +// width: 66.66% !important +// .col-9 +// width: 75% !important +// .col-10 +// width: 83.33% !important +// .col-11 +// width: 91.66% !important +// .col-12 +// width: 100% !important -[class*="col-"] - flex: 0 0 auto +// [class*="col-"] +// flex: 0 0 auto -.row - box-sizing: border-box - display: flex - max-width: 100% - * - width: 100% +// .row +// box-sizing: border-box +// display: flex +// max-width: 100% +// * +// width: 100% -.container-fluid - width: 100% - margin-right: auto - margin-left: auto +// .container-fluid +// width: 100% +// margin-right: auto +// margin-left: auto -label - display: inline-block \ No newline at end of file +// label +// display: inline-block + + +.full-width + width: 100% \ No newline at end of file diff --git a/src/style/modules/_login.sass b/src/style/modules/_login.sass new file mode 100644 index 0000000..797d974 --- /dev/null +++ b/src/style/modules/_login.sass @@ -0,0 +1 @@ +.login \ No newline at end of file diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass index 05255dc..9f0d3e1 100644 --- a/src/style/modules/_mainHome.sass +++ b/src/style/modules/_mainHome.sass @@ -1,44 +1,49 @@ .main-home + // margin: 0 !important + // width: 100% !important + max-width: 85% !important .meetings-panel - display: block - margin-top: 20vh - margin-left: 10vw + margin: auto + margin-top: 15vh border-style: solid border-color: $main-home-background-color border-width: 2px - width: 40vw - height: 60vh border-radius: 40px + width: 65% + height: 65vh overflow: hidden .row width: 100% - margin: 0 .current-time text-align: center background-color: grey + padding-top: 1% + padding-bottom: 1% .current-date text-align: center background-color: grey + padding-bottom: 1% .meeting background-color: $main-home-background-color text-align: center margin-top: 15px - + line-height: 2 .short-cuts .row-1 - margin-top: 25vh + margin-top: 30vh .row-2 margin-top: 5vh label - width: 10vw + display: inline-block + width: 100px text-align: center .tile + margin-right: 100% background-color: $main-home-background-color - width: 10vw - height: 10vw - border-radius: 1.5vw - img + width: 100px + height: 100px + border-radius: 16px + .icon + color: black width: 70% - height: 70% - margin-top: 15% - margin-left: 15% \ No newline at end of file + height: 70% \ No newline at end of file diff --git a/src/style/modules/_modules-dir.sass b/src/style/modules/_modules-dir.sass index 6604aec..b4f6e8a 100644 --- a/src/style/modules/_modules-dir.sass +++ b/src/style/modules/_modules-dir.sass @@ -1 +1,2 @@ -@import "mainHome" \ No newline at end of file +@import "mainHome" +@import "login" \ No newline at end of file