From 8e72320c284013ae7cef67add8391ff4c4b883d3 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Sat, 25 Sep 2021 14:26:24 -0300 Subject: [PATCH] Style for the login/register form done --- public/css_styles/styles.css | 49 ++++++++++++++ public/css_styles/styles.css.map | 2 +- public/sass_styles/_identify.scss | 65 +++++++++++++++++++ public/sass_styles/styles.scss | 3 + .../Identify Childrens/LoginForm.jsx | 4 +- .../Identify Childrens/RegisterForm.jsx | 6 +- src/components/Identify.jsx | 40 +++++++----- 7 files changed, 146 insertions(+), 23 deletions(-) create mode 100644 public/sass_styles/_identify.scss diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 1218ac7..ae9eb59 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -333,6 +333,55 @@ background-color: #9DF3C4; } +.identify-container { + display: flex; + justify-content: center; +} +.identify-container .identify { + width: 70vw; +} +.identify-container .identify .options-container { + display: flex; +} +.identify-container .identify .options-container .option { + width: 35vw; + display: flex; + justify-content: space-around; + padding: 5vh 0px; + background-color: #1FAB89; +} +.identify-container .identify .options-container .option h2 { + font-family: "Raleway", sans-serif; + font-weight: 700; + margin: 0; + padding: 0; + user-select: none; + color: #ffffff; +} +.identify-container .identify .form-container { + display: flex; + justify-content: center; +} +.identify-container .identify .form-container form { + width: 50vw; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 1vh; +} +.identify-container .identify .form-container form input { + height: 4vh; + width: 60%; + margin-bottom: 1vh; + border: none; + border-bottom: 1px solid #969696; + outline: none; +} +.identify-container .identify .form-container form input[type=submit] { + width: 50%; + border: #969696 solid 1px; +} + html, body { margin: 0; padding: 0; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index bfe202f..99c988f 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPGF;;;AQ3Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;;AQvBC;ERhBZ;EACA;EAQA;EACA;EACA;EQSgB;;AAKZ;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARDpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA1Be","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_identify.scss b/public/sass_styles/_identify.scss new file mode 100644 index 0000000..9f2a6a6 --- /dev/null +++ b/public/sass_styles/_identify.scss @@ -0,0 +1,65 @@ +.identify-container { + display: flex; + justify-content: center; + + .identify { + width: 70vw; + + .options-container { + display: flex; + + .option { + width: 35vw; + + display: flex; + justify-content: space-around; + + padding: 5vh 0px; + background-color: $second-color; + + h2 { + @include titleFont(); + @include normalizeTitle(); + + color: #ffffff; + } + } + } + + .form-container { + + display: flex; + justify-content: center; + + form { + width: 50vw; + + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 1vh; + + + input { + height: 4vh; + width: 60%; + + margin-bottom: 1vh; + + border: none; + border-bottom: 1px solid $border-color; + outline: none; + + } + + input[type=submit] { + width: 50%; + border: $border-color solid 1px; + } + } + } + } + + +} \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index 68b27d7..617af85 100644 --- a/public/sass_styles/styles.scss +++ b/public/sass_styles/styles.scss @@ -36,6 +36,8 @@ } $background-color: #ffffff; +$border-color: #969696; + $main-color: #62D2A2; $second-color: #1FAB89; @@ -50,6 +52,7 @@ $lightest-color: #D7FBE8; @import 'aboutThis'; @import 'historyButton'; @import 'pomodoro-counter'; +@import 'identify'; html, body { margin: 0; diff --git a/src/components/Identify Childrens/LoginForm.jsx b/src/components/Identify Childrens/LoginForm.jsx index 41e53db..4b0adf4 100644 --- a/src/components/Identify Childrens/LoginForm.jsx +++ b/src/components/Identify Childrens/LoginForm.jsx @@ -3,8 +3,8 @@ import React from 'react' const LoginForm = () => { return (
- - + +
) diff --git a/src/components/Identify Childrens/RegisterForm.jsx b/src/components/Identify Childrens/RegisterForm.jsx index 226c69a..b77a7c9 100644 --- a/src/components/Identify Childrens/RegisterForm.jsx +++ b/src/components/Identify Childrens/RegisterForm.jsx @@ -3,9 +3,9 @@ import React from 'react' const RegisterForm = () => { return (
- - - + + +
) diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx index 0e882e1..ac8d9b3 100644 --- a/src/components/Identify.jsx +++ b/src/components/Identify.jsx @@ -6,25 +6,31 @@ import RegisterForm from './Identify Childrens/RegisterForm' const Identify = () => { const [act, setAct] = useState('register') - - return ( -
- -
- { - act === 'login' ? : null - } - { - act === 'register' ? : null - }
)