franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Style for the login/register form done

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-25 14:26:24 -03:00
parent 1f5222c069
commit 8e72320c28
7 changed files with 146 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
public/css_styles/styles.css
View File

@@ -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;

2
public/css_styles/styles.css.map
View File

@@ -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"}
{"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"}

65
public/sass_styles/_identify.scss Normal file
View File

@@ -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;
}
}
}
}
}

3
public/sass_styles/styles.scss
View File

@@ -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;

4
src/components/Identify Childrens/LoginForm.jsx
View File

@@ -3,8 +3,8 @@ import React from 'react'
const LoginForm = () => {
return (
<form>
<input type="email" placeholder="email"></input>
<input type="password" placeholder="password"></input>
<input type="email" placeholder="Email"></input>
<input type="password" placeholder="Password"></input>
<input type="submit"></input>
</form>
)

6
src/components/Identify Childrens/RegisterForm.jsx
View File

@@ -3,9 +3,9 @@ import React from 'react'
const RegisterForm = () => {
return (
<form>
<input type="email" placeholder="email"></input>
<input type="password" placeholder="password"></input>
<input type="password" placeholder="confirm password"></input>
<input type="email" placeholder="Email"></input>
<input type="password" placeholder="Password"></input>
<input type="password" placeholder="Confirm Password"></input>
<input type="submit"></input>
</form>
)

40
src/components/Identify.jsx
View File

@@ -6,25 +6,31 @@ import RegisterForm from './Identify Childrens/RegisterForm'
const Identify = () => {
const [act, setAct] = useState('register')
return (
<div>
<nav>
<div>
<h2>LOGIN</h2>
<div className="identify-container">
<div className="identify">
<nav className="options-container">
<div className="option">
<h2>LOGIN</h2>
</div>
<div className="option">
<h2>REGISTER</h2>
</div>
</nav>
<div className="form-container">
{
act === 'login' ? <LoginForm /> : null
}
{
act === 'register' ? <RegisterForm /> : null
}
</div>
<div>
<h2>REGISTER</h2>
</div>
</nav>
<div>
{
act === 'login' ? <LoginForm /> : null
}
{
act === 'register' ? <RegisterForm /> : null
}
</div>
</div>
)