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

Structure of the pomodoros counter done

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-20 20:29:18 -03:00
parent a9e9e1483e
commit b20c2ed18d
7 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/css_styles/styles.css
View File

@@ -104,6 +104,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #1FAB89; color: #1FAB89;
user-select: none;
} }
.main-pomodoro .style-display h3 { .main-pomodoro .style-display h3 {
font-size: 30pt; font-size: 30pt;
@@ -298,6 +299,36 @@
} }
} }
.pomodoro-counter {
position: absolute;
top: 29vh;
}
.pomodoro-counter ul li {
display: flex;
font-family: "Rambla", sans-serif;
list-style-type: none;
margin-top: 2vh;
font-size: 15pt;
color: #00000070;
}
.pomodoro-counter ul li .separator {
user-select: none;
margin: 0px 0.5vw;
}
.pomodoro-counter ul li .quantity {
font-family: "Raleway", sans-serif;
font-weight: 700;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
border-radius: 100%;
color: #1FAB89;
background-color: #9DF3C4;
}
html, body { html, body {
margin: 0; margin: 0;
padding: 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"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;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;;AEHP;EACI;EFpBR;EACA;EEuBQ,OFFG;EEIH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC7DR;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;;;;ANSZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAtBe","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"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;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"}

2
public/sass_styles/_mainPomodoro.scss
View File

@@ -33,6 +33,8 @@
@include normalizeBody; @include normalizeBody;
color: $second-color; color: $second-color;
user-select: none;
} }
h3 { h3 {

45
public/sass_styles/_pomodoro-counter.scss Normal file
View File

@@ -0,0 +1,45 @@
.pomodoro-counter {
position: absolute;
top: 29vh;
ul {
li {
display: flex;
@include bodyFont;
list-style-type: none;
margin-top: 2vh;
font-size: 15pt;
color: #00000070;
.separator {
user-select: none;
margin: 0px 0.5vw;
}
.quantity {
@include titleFont;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
border-radius: 100%;
color: $second-color;
background-color: $light-color;
}
}
}
}

1
public/sass_styles/styles.scss
View File

@@ -49,6 +49,7 @@ $lightest-color: #D7FBE8;
@import 'goDownArrow'; @import 'goDownArrow';
@import 'aboutThis'; @import 'aboutThis';
@import 'historyButton'; @import 'historyButton';
@import 'pomodoro-counter';
html, body { html, body {
margin: 0; margin: 0;

4
src/components/MainPomodoro.jsx
View File

@@ -1,5 +1,6 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import MainPomodoroTimer from './MainPomodoroTimer' import MainPomodoroTimer from './MainPomodoroTimer'
import PomodoroCounter from './PomodoroCounter'
import StyleSelector from './StyleSelector' import StyleSelector from './StyleSelector'
const MainPomodoro = () => { const MainPomodoro = () => {
@@ -10,6 +11,8 @@ const MainPomodoro = () => {
const [displayHidden, setDisplayHidden] = useState(true) const [displayHidden, setDisplayHidden] = useState(true)
const [timerOn, setTimerOn] = useState(false) const [timerOn, setTimerOn] = useState(false)
//const [counter, setCounter]
const showStyles = () => { const showStyles = () => {
console.log('Styles Deployed') console.log('Styles Deployed')
@@ -38,6 +41,7 @@ const MainPomodoro = () => {
</div> </div>
<StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/> <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
<PomodoroCounter />
</> </>

21
src/components/PomodoroCounter.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react'
const PomodoroCounter = () => {
return (
<div className="pomodoro-counter">
<ul>
<li>
<span className="quantity">0</span><span className="separator"> - </span>Pomodoros
</li>
<li>
<span className="quantity">0</span><span className="separator"> - </span>Rests
</li>
<li>
<span className="quantity">0</span><span className="separator"> - </span>Long rests
</li>
</ul>
</div>
)
}
export default PomodoroCounter