diff --git a/src/assets/zoom.png b/src/assets/zoom.png new file mode 100644 index 0000000..e05505e Binary files /dev/null and b/src/assets/zoom.png differ diff --git a/src/assets/zoom.svg b/src/assets/zoom.svg new file mode 100644 index 0000000..fea1f1d --- /dev/null +++ b/src/assets/zoom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index ba95b2e..cb3f046 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -1,9 +1,29 @@ +import { Stack } from "@mui/material"; import Container from "@mui/material/Container"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import hsbcLogo from "../../assets/logo-png.png"; +import zoomLogo from "../../assets/zoom.png"; +import LoginIcon from '@mui/icons-material/Login'; const Login: React.FC = () => { return ( - Login + + HSBC Logo + + + + Forgotten Your Password? + + + + + + Zoom Logo + + + ); }; diff --git a/src/index.tsx b/src/index.tsx index 74f554e..f239696 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,10 @@ import ReactDOM from "react-dom"; import App from "./App"; +import "./style/App.css"; +import Login from "./components/login/Login"; const Index:React.FC = () => { - return ; + return ; }; ReactDOM.render(, document.getElementById("root")); diff --git a/src/style/App.css b/src/style/App.css index f305473..bcf9c90 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -2,6 +2,10 @@ width: 100%; } +a { + text-decoration: none; +} + .main-home { max-width: 85% !important; } @@ -69,4 +73,46 @@ width: 70%; height: 70%; } + +.login .grid-container { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: auto; + margin-top: 20%; + max-width: 40% !important; +} + +.login .grid-container > * { + width: 98%; + margin: 0.5% 0; +} + +.login .grid-container .login-logo { + display: inline-block; + text-align: center; + margin: 5% 0; +} + +.login .grid-container .login-btn { + margin: 5% 0; + width: 40%; + background-color: #ed7f88; +} + +.login .grid-container .register-btn { + display: inline-block; + text-align: left; + margin: 5% 0; + padding-top: 1rem; +} + +.login .grid-container .zoom-logo { + width: 40px; + height: 40px; +} + +.login .grid-container .zoom-logo * { + width: 100%; +} /*# 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 3c4086c..a6a8c92 100644 --- a/src/style/App.css.map +++ b/src/style/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "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", + "mappings": "AG4CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKhD5B,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;;AChD9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG", "sources": [ "App.sass", "_variables.sass", diff --git a/src/style/base/_base.sass b/src/style/base/_base.sass index f88dda4..08bc717 100644 --- a/src/style/base/_base.sass +++ b/src/style/base/_base.sass @@ -43,4 +43,8 @@ .full-width - width: 100% \ No newline at end of file + width: 100% + +a + text-decoration: none + \ No newline at end of file diff --git a/src/style/modules/_login.sass b/src/style/modules/_login.sass index 797d974..31c28c0 100644 --- a/src/style/modules/_login.sass +++ b/src/style/modules/_login.sass @@ -1 +1,27 @@ -.login \ No newline at end of file +.login + .grid-container + align-items: center + margin: auto + margin-top: 20% + max-width: 40% !important + > * + width: 98% + margin: 0.5% 0 + .login-logo + display: inline-block + text-align: center + margin: 5% 0 + .login-btn, + margin: 5% 0 + width: 40% + background-color: #ed7f88 + .register-btn + display: inline-block + text-align: left + margin: 5% 0 + padding-top: 1rem + .zoom-logo + width: 40px + height: 40px + * + width: 100% \ No newline at end of file