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

Redesigned the responsive design

Browse Source
This commit is contained in:
Francisco Pessano
2022-05-24 14:45:44 -03:00
parent efad9f0b9c
commit e2329e5342
19 changed files with 322 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Header/Header.jsx
View File

@@ -2,6 +2,7 @@ import './header-styles.css'
import React from 'react'
import ThemeSwitch from './ThemeSwitch/ThemeSwitch'
import { Link } from 'react-router-dom'
const Header = (props) => {
@@ -19,17 +20,17 @@ const Header = (props) => {
return (
<header className={props.darkMode ? 'header-main-page dark-mode-component' : 'header-main-page'} >
<h1 className='title-link'><a href="/">Clockify Pomodoro Timer</a></h1>
<h1 className='title-link'><Link to="/">Clockify Pomodoro Timer</Link></h1>
<div className="buttons-container">
{
props.signedIn ?
<>
<a href="/config-account" className={props.darkMode ? 'go-to-account dark-mode-component' : 'go-to-account'}>
<div className="go-to-account-text">API</div>
</a>
<a href="/identify?act=clss" className={props.darkMode ? 'close-session dark-mode-component' : 'close-session'}>
<div className="close-session-text">Close session</div>
</a>
<Link to="/config-account">
<button>API</button>
</Link>
<Link to="/identify?act=clss">
<button>Close session</button>
</Link>
</>
: null
}

9
src/components/Header/ThemeSwitch/theme-switch-styles.css
View File

@@ -9,6 +9,7 @@
.theme-switch label {
display: block;
width: 4vw;
min-width: 80px;
height: 4vh;
background-color: var(--lightest-color);
border-radius: 100px;
@@ -17,6 +18,14 @@
transition: 0.5s;
box-shadow: 0 0 20px rgba(71, 122, 133, 0.3137254902);
}
.theme-switch label:hover {
filter: brightness(90%);
transition: none;
}
.theme-switch label:active {
filter: brightness(105%);
transition: none;
}
.theme-switch label::after {
content: "";
width: 3.5vh;

2
src/components/Header/ThemeSwitch/theme-switch-styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["theme-switch-styles.scss","theme-switch-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;ACAJ;ADEI;EACI,QAAA;EACA,SAAA;EACA,kBAAA;ACAR;ADGI;EACI,cAAA;EACA,UAAA;EACA,WAAA;EACA,uCAAA;EACA,oBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,qDAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACFR;ADKI;EACI,yBAAA;EACA,4BAAA;EAEA,0CAAA;ACJR;ADOI;EACI,yBAAA;ACLR;;ADSA;EAEI;IACI,iBAAA;ECPN;EDQM;IACI,WAAA;IACA,YAAA;ECNV;EDSM;IACI,WAAA;IACA,YAAA;ECPV;AACF;ADWA;EACI;IAWI,mBAAA;ECnBN;EDSM;IACI,WAAA;IACA,YAAA;ECPV;EDUM;IACI,WAAA;IACA,YAAA;ECRV;AACF","file":"theme-switch-styles.css"}
{"version":3,"sources":["theme-switch-styles.scss","theme-switch-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;ACAJ;ADEI;EACI,QAAA;EACA,SAAA;EACA,kBAAA;ACAR;ADGI;EACI,cAAA;EACA,UAAA;EACA,eAAA;EACA,WAAA;EACA,uCAAA;EACA,oBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,qDAAA;ACDR;ADII;EACI,uBAAA;EACA,gBAAA;ACFR;ADKI;EACI,wBAAA;EACA,gBAAA;ACHR;ADMI;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACJR;ADOI;EACI,yBAAA;EACA,4BAAA;EAEA,0CAAA;ACNR;ADSI;EACI,yBAAA;ACPR;;ADWA;EAEI;IACI,iBAAA;ECTN;EDUM;IACI,WAAA;IACA,YAAA;ECRV;EDWM;IACI,WAAA;IACA,YAAA;ECTV;AACF;ADaA;EACI;IAWI,mBAAA;ECrBN;EDWM;IACI,WAAA;IACA,YAAA;ECTV;EDYM;IACI,WAAA;IACA,YAAA;ECVV;AACF","file":"theme-switch-styles.css"}

11
src/components/Header/ThemeSwitch/theme-switch-styles.scss
View File

@@ -11,6 +11,7 @@
label {
display: block;
width: 4vw;
min-width: 80px;
height: 4vh;
background-color: var(--lightest-color);
border-radius: 100px;
@@ -20,6 +21,16 @@
box-shadow: 0 0 20px #477a8550;
}
label:hover {
filter: brightness(90%);
transition: none;
}
label:active {
filter: brightness(105%);
transition: none;
}
label::after {
content: "";
width: 3.5vh;

168
src/components/Header/header-styles.css
View File

@@ -38,78 +38,19 @@
.header-main-page .buttons-container a, .header-main-page .buttons-container label {
margin-right: 1vw;
}
.header-main-page .buttons-container a {
text-decoration: none;
}
.header-main-page .buttons-container .go-to-account {
width: 3vw;
height: 3vw;
.header-main-page .buttons-container button {
padding: 2vh 3vw;
background-color: var(--second-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
}
.header-main-page .buttons-container .go-to-account .go-to-account-text {
font-size: 1vw;
text-decoration: none;
font-size: 1.1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #ffffff;
}
.header-main-page .buttons-container .close-session {
width: 7vw;
height: 3vw;
background-color: var(--second-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 5%;
}
.header-main-page .buttons-container .close-session .close-session-text {
font-size: 1vw;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #ffffff;
}
@media (max-width: 991.98px) {
.go-to-account, .close-session {
position: initial;
padding: 1vw;
}
.go-to-account {
margin-top: 10px;
margin-bottom: 10px;
}
.go-to-account .go-to-account-text {
font-size: 9pt;
}
.close-session .close-session-text {
font-size: 9pt;
}
}
@media (max-width: 576px) {
.go-to-account, .close-session {
width: auto;
height: auto;
}
.go-to-account-text, .close-session-text {
position: initial;
margin: 10px 10px;
}
}
.notification-select {
.header-main-page .notification-select {
width: 100%;
height: 3vh;
background-color: var(--second-color);
display: flex;
align-items: flex-end;
@@ -117,17 +58,17 @@
margin-top: auto;
box-sizing: border-box;
}
.notification-select p {
.header-main-page .notification-select p {
display: inline-block;
align-self: center;
color: #fff;
padding: 0;
margin: 0;
margin-top: 1vh;
margin-right: 1vw;
}
.notification-select button {
height: 80%;
width: 5%;
.header-main-page .notification-select button {
margin-top: 0.5vh;
margin-right: 0.5vw;
border: none;
border-radius: 2px;
@@ -136,14 +77,52 @@
font-weight: bold;
cursor: pointer;
}
.notification-select button.yes {
.header-main-page .notification-select button.yes {
background-color: rgb(76, 175, 80);
}
.notification-select button.no {
.header-main-page .notification-select button.no {
background-color: rgb(211, 47, 47);
}
.header-main-page .banner-login {
width: 100%;
background-color: #D17262;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5vw;
}
.header-main-page .banner-login p {
color: #fff;
}
.header-main-page .banner-login .button-container {
width: 20vw;
display: flex;
justify-content: space-around;
}
.header-main-page .banner-login .button-container button {
font-size: 12pt;
font-weight: bold;
color: #ffffff;
height: 6vh;
cursor: pointer;
}
.header-main-page .banner-login .button-container .register {
border: solid 1px #ffffff;
border-radius: 24px;
}
.header-main-page .banner-login .button-container .login {
background-color: rgba(0, 0, 0, 0.3411764706);
border-radius: 24px;
}
.header-main-page .banner-login.blank {
opacity: 0%;
}
@media (max-width: 991.98px) {
.header-main-page {
height: auto;
row-gap: 1vh;
}
.header-main-page h1 {
font-size: 26pt;
}
@@ -165,44 +144,7 @@
width: 20%;
margin-bottom: 1vh;
}
}
.banner-login {
width: 100%;
background-color: #D17262;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5vw;
}
.banner-login p {
color: #fff;
}
.banner-login .button-container {
width: 20vw;
display: flex;
justify-content: space-around;
}
.banner-login .button-container button {
font-size: 12pt;
font-weight: bold;
color: #ffffff;
height: 6vh;
cursor: pointer;
}
.banner-login .button-container .register {
border: solid 1px #ffffff;
border-radius: 24px;
}
.banner-login .button-container .login {
background-color: rgba(0, 0, 0, 0.3411764706);
border-radius: 24px;
}
.banner-login.blank {
opacity: 0%;
}
@media (max-width: 918px) {
.banner-login {
justify-content: initial;
height: auto;
@@ -220,14 +162,22 @@
}
}
@media (max-width: 576px) {
.banner-login p {
.header-main-page .notification-select {
-moz-column-gap: 1vw;
column-gap: 1vw;
padding: 0px 1vw;
}
.header-main-page .notification-select button {
flex-grow: 1;
}
.header-main-page .banner-login p {
width: 50%;
}
.banner-login .button-container {
.header-main-page .banner-login .button-container {
width: 50%;
flex-direction: column;
}
.banner-login .button-container button {
.header-main-page .banner-login .button-container button {
width: 75%;
margin: 10px;
}

2
src/components/Header/header-styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["header-styles.scss","header-styles.css"],"names":[],"mappings":"AACA;EACI,mCAAA;EAEA,aAAA;EACA,8BAAA;EACA,eAAA;EAEA,YAAA;EAEA,sBAAA;ACHJ;ADKI;EACI,0BAAA;EAAA,uBAAA;EAAA,kBAAA;EAEA,cAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,gBAAA;EACA,mBAAA;EACA,gBAAA;EAEA,aAAA;EACA,mBAAA;EACA,YAAA;ACRR;ADUQ;EACI,cAAA;EACA,8BAAA;EACA,qBAAA;EAEA,eAAA;ACTZ;ADaI;EACI,cAAA;ACXR;ADcI;EACI,aAAA;EACA,mBAAA;EAEA,gBAAA;EACA,mBAAA;ACbR;ADeQ;EACI,iBAAA;ACbZ;ADgBQ;EACI,qBAAA;ACdZ;ADiBQ;EAEI,UAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,mBAAA;ACnBZ;ADqBY;EACI,cAAA;EACA,qBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;ACpBhB;ADwBQ;EACI,UAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,iBAAA;ACzBZ;AD2BY;EACI,cAAA;EAEA,qBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;AC3BhB;;ADkCA;EAEI;IACG,iBAAA;IACA,YAAA;EChCL;;EDmCE;IAKI,gBAAA;IACA,mBAAA;ECpCN;ED+BM;IACI,cAAA;EC7BV;;EDqCM;IACI,cAAA;EClCV;AACF;ADsCA;EACI;IACI,WAAA;IACA,YAAA;ECpCN;;EDuCE;IACI,iBAAA;IACA,iBAAA;ECpCN;AACF;ADuCA;EAEI,WAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,qBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,sBAAA;AC1CJ;AD4CI;EACI,qBAAA;EAEA,kBAAA;EAEA,WAAA;EAEA,UAAA;EAEA,SAAA;EACA,iBAAA;AC9CR;ADiDI;EACI,WAAA;EACA,SAAA;EAEA,mBAAA;EAEA,YAAA;EACA,kBAAA;EAEA,kBAAA;EAEA,WAAA;EACA,iBAAA;EAEA,eAAA;ACpDR;ADuDI;EACI,kCAAA;ACrDR;ADwDI;EACI,kCAAA;ACtDR;;AD0DA;EAGQ;IACI,eAAA;ECzDV;ED4DM;IACI,eAAA;EC1DV;;ED8DE;IACI,YAAA;IACA,eAAA;EC3DN;ED6DM;IACI,WAAA;IACA,eAAA;IACA,kBAAA;EC3DV;ED8DM;IACI,YAAA;IACA,UAAA;IACA,kBAAA;EC5DV;AACF;AD+DA;EAEI,WAAA;EAEA,yBAAA;EAMA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,gBAAA;ACrEJ;AD6DI;EACI,WAAA;AC3DR;ADoEI;EAEI,WAAA;EAEA,aAAA;EACA,6BAAA;ACpER;ADsEQ;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EAEA,WAAA;EACA,eAAA;ACrEZ;ADwEQ;EACI,yBAAA;EACA,mBAAA;ACtEZ;ADyEQ;EACI,6CAAA;EACA,mBAAA;ACvEZ;;AD4EA;EACI,WAAA;ACzEJ;;AD4EA;EACI;IACI,wBAAA;IAEA,YAAA;IAEA,gBAAA;EC3EN;ED6EM;IACI,YAAA;EC3EV;ED8EM;IACI,YAAA;IAEA,6BAAA;EC7EV;ED+EU;IACI,UAAA;EC7Ed;AACF;ADkFA;EAGQ;IACI,UAAA;EClFV;EDqFM;IACI,UAAA;IAEA,sBAAA;ECpFV;EDsFU;IACI,UAAA;IACA,YAAA;ECpFd;AACF","file":"header-styles.css"}
{"version":3,"sources":["header-styles.scss","header-styles.css"],"names":[],"mappings":"AACA;EACI,mCAAA;EAEA,aAAA;EACA,8BAAA;EACA,eAAA;EAEA,YAAA;EAEA,sBAAA;ACHJ;ADKI;EACI,0BAAA;EAAA,uBAAA;EAAA,kBAAA;EAEA,cAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,gBAAA;EACA,mBAAA;EACA,gBAAA;EAEA,aAAA;EACA,mBAAA;EACA,YAAA;ACRR;ADUQ;EACI,cAAA;EACA,8BAAA;EACA,qBAAA;EAEA,eAAA;ACTZ;ADaI;EACI,cAAA;ACXR;ADcI;EACI,aAAA;EACA,mBAAA;EAEA,gBAAA;EACA,mBAAA;ACbR;ADeQ;EACI,iBAAA;ACbZ;ADgBQ;EACI,gBAAA;EAEA,qCAAA;EAEA,gBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;EAEA,iBAAA;AClBZ;ADsBI;EAEI,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,qBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,sBAAA;ACzBR;AD2BQ;EACI,qBAAA;EAEA,kBAAA;EAEA,WAAA;EAEA,UAAA;EAEA,SAAA;EACA,eAAA;EACA,iBAAA;AC7BZ;ADgCQ;EACI,iBAAA;EACA,mBAAA;EAEA,YAAA;EACA,kBAAA;EAEA,kBAAA;EAEA,WAAA;EACA,iBAAA;EAEA,eAAA;AClCZ;ADqCQ;EACI,kCAAA;ACnCZ;ADsCQ;EACI,kCAAA;ACpCZ;ADwCI;EAEI,WAAA;EAEA,yBAAA;EAMA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,gBAAA;AC9CR;ADsCQ;EACI,WAAA;ACpCZ;AD6CQ;EAEI,WAAA;EAEA,aAAA;EACA,6BAAA;AC7CZ;AD+CY;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EAEA,WAAA;EACA,eAAA;AC9ChB;ADiDY;EACI,yBAAA;EACA,mBAAA;AC/ChB;ADkDY;EACI,6CAAA;EACA,mBAAA;AChDhB;ADqDI;EACI,WAAA;ACnDR;;ADwDA;EAGI;IAEI,YAAA;IACA,YAAA;ECxDN;ED0DM;IACI,eAAA;ECxDV;ED2DM;IACI,eAAA;ECzDV;;ED6DE;IACI,YAAA;IACA,eAAA;EC1DN;ED4DM;IACI,WAAA;IACA,eAAA;IACA,kBAAA;EC1DV;ED6DM;IACI,YAAA;IACA,UAAA;IACA,kBAAA;EC3DV;;EDgEE;IACI,wBAAA;IAEA,YAAA;IAEA,gBAAA;EC/DN;EDiEM;IACI,YAAA;EC/DV;EDkEM;IACI,YAAA;IAEA,6BAAA;ECjEV;EDmEU;IACI,UAAA;ECjEd;AACF;ADsEA;EAIQ;IACI,oBAAA;SAAA,eAAA;IAEA,gBAAA;ECxEV;EDyEU;IACI,YAAA;ECvEd;ED6EU;IACI,UAAA;EC3Ed;ED8EU;IACI,UAAA;IAEA,sBAAA;EC7Ed;ED+Ec;IACI,UAAA;IACA,YAAA;EC7ElB;AACF","file":"header-styles.css"}

312
src/components/Header/header-styles.scss
View File

@@ -50,150 +50,131 @@
a, label {
margin-right: 1vw;
}
a {
text-decoration: none;
}
.go-to-account {
width: 3vw;
height: 3vw;
button {
padding: 2vh 3vw;
background-color: var(--second-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
.go-to-account-text {
font-size: 1vw;
text-decoration: none;
user-select: none;
color: #ffffff;
}
font-size: 1.1em;
user-select: none;
color: #ffffff;
border-radius: 5%;
}
}
.notification-select {
width: 100%;
background-color: var(--second-color);
display: flex;
align-items: flex-end;
padding-left: 1vw;
margin-top: auto;
box-sizing: border-box;
p {
display: inline-block;
align-self: center;
color: #fff;
padding: 0;
margin: 0;
margin-top: 1vh;
margin-right: 1vw;
}
.close-session {
width: 7vw;
height: 3vw;
button {
margin-top: 0.5vh;
margin-right: 0.5vw;
border: none;
border-radius: 2px;
align-self: center;
color: #fff;
font-weight: bold;
cursor: pointer;
}
button.yes {
background-color: rgb(76, 175, 80);
}
button.no {
background-color: rgb(211, 47, 47);
}
}
.banner-login {
width: 100%;
background-color: var(--second-color);
background-color: #D17262;
p {
color: #fff;
}
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5vw;
.button-container {
width: 20vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5%;
.close-session-text {
font-size: 1vw;
text-decoration: none;
user-select: none;
justify-content: space-around;
button {
font-size: 12pt;
font-weight: bold;
color: #ffffff;
height: 6vh;
cursor: pointer;
}
.register {
border: solid 1px #ffffff;
border-radius: 24px;
}
.login {
background-color: #00000057;
border-radius: 24px;
}
}
}
.banner-login.blank {
opacity: 0%;
}
}
@media (max-width: 991.98px) {
//! I fucking hate make the responsive design
.go-to-account, .close-session {
position: initial;
padding: 1vw;
}
.go-to-account {
.go-to-account-text {
font-size: 9pt;
}
margin-top: 10px;
margin-bottom: 10px;
}
.close-session {
.close-session-text {
font-size: 9pt;
}
}
}
@media (max-width: 576px) {
.go-to-account, .close-session {
width: auto;
height: auto;
}
.go-to-account-text, .close-session-text {
position: initial;
margin:10px 10px;
}
}
.notification-select {
width: 100%;
height: 3vh;
background-color: var(--second-color);
display: flex;
align-items: flex-end;
padding-left: 1vw;
margin-top: auto;
box-sizing: border-box;
p {
display: inline-block;
align-self: center;
color: #fff;
padding: 0;
margin: 0;
margin-right: 1vw;
}
button {
height: 80%;
width: 5%;
margin-right: 0.5vw;
border: none;
border-radius: 2px;
align-self: center;
color: #fff;
font-weight: bold;
cursor: pointer;
}
button.yes {
background-color: rgb(76, 175, 80);
}
button.no {
background-color: rgb(211, 47, 47);
}
}
@media (max-width: 991.98px) {
.header-main-page {
height: auto;
row-gap: 1vh;
h1 {
font-size: 26pt;
}
@@ -219,56 +200,8 @@
margin-bottom: 1vh;
}
}
}
.banner-login {
width: 100%;
background-color: #D17262;
p {
color: #fff;
}
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5vw;
.button-container {
width: 20vw;
display: flex;
justify-content: space-around;
button {
font-size: 12pt;
font-weight: bold;
color: #ffffff;
height: 6vh;
cursor: pointer;
}
.register {
border: solid 1px #ffffff;
border-radius: 24px;
}
.login {
background-color: #00000057;
border-radius: 24px;
}
}
}
.banner-login.blank {
opacity: 0%;
}
@media (max-width: 918px) {
.banner-login {
justify-content: initial;
@@ -293,20 +226,33 @@
}
@media (max-width: 576px) {
.banner-login {
p {
width: 50%;
.header-main-page {
.notification-select {
column-gap: 1vw;
padding: 0px 1vw;
button {
flex-grow: 1;
}
}
.button-container {
width: 50%;
.banner-login {
flex-direction: column;
p {
width: 50%;
}
button {
width: 75%;
margin: 10px;
.button-container {
width: 50%;
flex-direction: column;
button {
width: 75%;
margin: 10px;
}
}
}
}

3
src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
View File

@@ -263,7 +263,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
}
</select>
<button
className={`add-task ${!clockifyData.projectID && 'disabled'}`}
className={`add-task ${!clockifyData.projectID && 'disabled'} ${addingNewTask === true && "adding-new-task"}`}
onClick={() => {
if (addingNewTask === "loading") {
@@ -295,6 +295,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
type="text"
ref={newTask}
placeholder="Set new task name"
className='new-task'
/>
}
</>

45
src/pages/Main/ClockifyTaskForm/clockify-task-form.css
View File

@@ -33,7 +33,7 @@
height: 3.5vh;
margin-left: 0.5vh;
display: inline;
background-color: var(--main-text-color);
background-color: var(--second-color);
border-radius: 100%;
color: #fff;
cursor: pointer;
@@ -66,36 +66,51 @@
pointer-events: none;
opacity: 0.3;
}
@media (max-width: 991.98px) {
.clockify-tasks-display-container .clockify-tasks-display {
position: initial;
width: auto;
.clockify-tasks-display-container {
position: static;
width: 100%;
padding-top: 2vh;
}
.clockify-tasks-display-container .clockify-task-form {
display: flex;
justify-content: space-around;
padding: 3vh 5vw;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding: 0px 3vw;
}
.clockify-tasks-display-container .clockify-tasks-display.loading-container {
width: 90%;
height: auto;
}
.clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
width: 20vw;
.clockify-tasks-display-container .clockify-task-form .workspace-selector, .clockify-tasks-display-container .clockify-task-form .project-selector, .clockify-tasks-display-container .clockify-task-form input[type=text] {
width: 33vw;
min-width: 120px;
height: 5vw;
min-height: 30px;
}
.clockify-tasks-display-container .clockify-task-form button.add-task {
margin-right: auto;
}
.clockify-tasks-display-container .clockify-task-form button.adding-new-task {
margin-right: 0;
}
.clockify-tasks-display-container .clockify-task-form input.new-task {
width: 10vw;
margin-right: auto;
margin-left: 1vw;
}
}
@media (max-width: 576px) {
.clockify-tasks-display-container .clockify-tasks-display {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.clockify-tasks-display-container .clockify-tasks-display.loading-container {
.clockify-tasks-display.loading-container {
width: 90%;
height: auto;
}
.clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;

2
src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,wCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADoBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;AClBZ;ADsBI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECvBV;EDyBU;IACI,UAAA;IACA,YAAA;ECvBd;ED0BU;IACI,WAAA;IACA,WAAA;ECxBd;AACF;AD6BI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC7BV;ED+BU;IACI,UAAA;IACA,YAAA;EC7Bd;EDgCU;IACI,UAAA;IACA,WAAA;IACA,eAAA;EC9Bd;AACF","file":"clockify-task-form.css"}
{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,qCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADoBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;AClBZ;;ADuBA;EAEI;IACI,gBAAA;IACA,WAAA;IAEA,gBAAA;ECtBN;EDwBM;IACI,aAAA;IACA,mBAAA;IACA,eAAA;IACA,8BAAA;IAEA,gBAAA;ECvBV;EDyBU;IACI,WAAA;IACA,gBAAA;IACA,WAAA;IACA,gBAAA;ECvBd;ED0BU;IACI,kBAAA;ECxBd;ED2BU;IACI,eAAA;ECzBd;ED4BU;IACI,WAAA;IACA,kBAAA;IACA,gBAAA;EC1Bd;AACF;AD+BA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC/BN;EDiCM;IACI,UAAA;IACA,YAAA;EC/BV;EDkCM;IACI,UAAA;IACA,WAAA;IACA,eAAA;EChCV;AACF","file":"clockify-task-form.css"}

76
src/pages/Main/ClockifyTaskForm/clockify-task-form.scss
View File

@@ -36,7 +36,7 @@
display: inline;
background-color: var(--main-text-color);
background-color: var(--second-color);
border-radius: 100%;
color: #fff;
@@ -77,51 +77,67 @@
opacity: 0.3;
}
}
}
@media (max-width: 991.98px) {
@media (max-width: 991.98px) {
.clockify-tasks-display {
position: initial;
width: auto;
.clockify-tasks-display-container {
position: static;
width: 100%;
padding-top: 2vh;
.clockify-task-form {
display: flex;
justify-content:space-around;
align-items: center;
flex-wrap: wrap;
justify-content:space-between;
padding: 3vh 5vw;
&.loading-container {
width: 90%;
height: auto;
}
padding: 0px 3vw;
.workspace-selector, .project-selector, input[type=text] {
width: 20vw;
width: 33vw;
min-width: 120px;
height: 5vw;
min-height: 30px;
}
button.add-task {
margin-right: auto;
}
button.adding-new-task {
margin-right: 0;
}
input.new-task {
width: 10vw;
margin-right: auto;
margin-left: 1vw;
}
}
}
}
@media (max-width: 576px) {
@media (max-width: 576px) {
.clockify-tasks-display {
position: initial;
width: auto;
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
&.loading-container {
width: 90%;
height: auto;
}
&.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
}
.workspace-selector, .project-selector, input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
}
}
}

2
src/pages/Main/Pomodoro/StyleSelector/style-selector.css
View File

@@ -75,7 +75,7 @@
margin: 0 0 5% 0;
width: 100%;
padding: 0;
padding: 0px 5vw;
padding: 2vh 5vw;
box-sizing: border-box;
}
.style-selector h2 {

2
src/pages/Main/Pomodoro/StyleSelector/style-selector.scss
View File

@@ -107,7 +107,7 @@
width: 100%;
padding: 0;
padding: 0px 5vw;
padding: 2vh 5vw;
box-sizing: border-box;

1
src/pages/Main/Pomodoro/pomodoro-styles.css
View File

@@ -91,6 +91,7 @@
@media (max-width: 576px) {
.main-pomodoro {
height: auto;
margin: 3vh 0px;
}
.main-pomodoro .timer {
font-size: 80pt;

2
src/pages/Main/Pomodoro/pomodoro-styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["pomodoro-styles.scss","pomodoro-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EAEA,YAAA;EAEA,8CAAA;ACFJ;ADII;EAEI,aAAA;EACA,uBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,6BAAA;ACLR;ADQI;EAEI,aAAA;EACA,mBAAA;EACA,sBAAA;ACPR;ADSQ;EACI,eAAA;EAEA,6BAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACRZ;ADWQ;EACI,eAAA;EAEA,6BAAA;EAEA,eAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACXZ;ADeI;EACI,eAAA;EACA,WAAA;EACA,WAAA;EAEA,8BAAA;EACA,gBAAA;EAEA,+BAAA;EACA,mBAAA;EAEA,cAAA;EACA,YAAA;AChBR;;ADoBA;EACI,kBAAA;EACA,SAAA;EACA,yCAAA;ACjBJ;ADoBQ;EACI,aAAA;EAEA,qBAAA;EACA,eAAA;EAEA,eAAA;ACpBZ;ADsBY;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,iBAAA;ACpBhB;ADuBY;EAEI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,uCAAA;EAEA,YAAA;EACA,WAAA;EAEA,mBAAA;EAEA,8BAAA;EACA,gBAAA;EACA,6BAAA;AC3BhB;;ADiCA;EAEI;IAEI,iBAAA;IACA,mBAAA;EChCN;AACF;ADmCA;EAEI;IAEI,YAAA;ECnCN;EDqCM;IACI,eAAA;ECnCV;EDsCM;IACI,eAAA;ECpCV;AACF","file":"pomodoro-styles.css"}
{"version":3,"sources":["pomodoro-styles.scss","pomodoro-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EAEA,YAAA;EAEA,8CAAA;ACFJ;ADII;EAEI,aAAA;EACA,uBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,6BAAA;ACLR;ADQI;EAEI,aAAA;EACA,mBAAA;EACA,sBAAA;ACPR;ADSQ;EACI,eAAA;EAEA,6BAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACRZ;ADWQ;EACI,eAAA;EAEA,6BAAA;EAEA,eAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACXZ;ADeI;EACI,eAAA;EACA,WAAA;EACA,WAAA;EAEA,8BAAA;EACA,gBAAA;EAEA,+BAAA;EACA,mBAAA;EAEA,cAAA;EACA,YAAA;AChBR;;ADoBA;EACI,kBAAA;EACA,SAAA;EACA,yCAAA;ACjBJ;ADoBQ;EACI,aAAA;EAEA,qBAAA;EACA,eAAA;EAEA,eAAA;ACpBZ;ADsBY;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,iBAAA;ACpBhB;ADuBY;EAEI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,uCAAA;EAEA,YAAA;EACA,WAAA;EAEA,mBAAA;EAEA,8BAAA;EACA,gBAAA;EACA,6BAAA;AC3BhB;;ADiCA;EAEI;IAEI,iBAAA;IACA,mBAAA;EChCN;AACF;ADmCA;EAEI;IAEI,YAAA;IAEA,eAAA;ECpCN;EDsCM;IACI,eAAA;ECpCV;EDuCM;IACI,eAAA;ECrCV;AACF","file":"pomodoro-styles.css"}

2
src/pages/Main/Pomodoro/pomodoro-styles.scss
View File

@@ -115,6 +115,8 @@
.main-pomodoro {
height: auto;
margin: 3vh 0px;
.timer {
font-size: 80pt;

10
src/styles.css
View File

@@ -29,7 +29,15 @@ body {
button {
background: none;
border: none;
width: 8vw;
cursor: pointer;
}
button:hover {
filter: brightness(90%);
}
button:active {
filter: brightness(105%);
}
h1, h2, h3, h4, h5, h6, p {

2
src/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EAEI,0BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sCAAA;EAEA,6BAAA;EACA,+BAAA;EAEA,qBAAA;EACA,uBAAA;EAEA,sBAAA;EACA,6BAAA;EAEA,yBAAA;EACA,gCAAA;EAEA,iCAAA;EACA,mCAAA;EACA,uBAAA;ACLJ;;ADQA;EACI,SAAA;EACA,UAAA;ACLJ;;ADQA;EACI,YAAA;EACA,8CAAA;ACLJ;;ADQA;EACI,gBAAA;EACA,YAAA;EACA,UAAA;ACLJ;;ADQA;EACI,SAAA;EACA,UAAA;ACLJ;;ADQA;EACI,iCAAA;ACLJ;;ADQA;EACI,kCAAA;EACA,gBAAA;ACLJ;;ADQA;EACI,wBAAA;ACLJ","file":"styles.css"}
{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EAEI,0BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sCAAA;EAEA,6BAAA;EACA,+BAAA;EAEA,qBAAA;EACA,uBAAA;EAEA,sBAAA;EACA,6BAAA;EAEA,yBAAA;EACA,gCAAA;EAEA,iCAAA;EACA,mCAAA;EACA,uBAAA;ACLJ;;ADQA;EACI,SAAA;EACA,UAAA;ACLJ;;ADQA;EACI,YAAA;EACA,8CAAA;ACLJ;;ADQA;EACI,gBAAA;EACA,YAAA;EACA,eAAA;ACLJ;;ADQA;EACI,uBAAA;ACLJ;;ADQA;EACI,wBAAA;ACLJ;;ADQA;EACI,SAAA;EACA,UAAA;ACLJ;;ADQA;EACI,iCAAA;ACLJ;;ADQA;EACI,kCAAA;EACA,gBAAA;ACLJ;;ADQA;EACI,wBAAA;ACLJ","file":"styles.css"}

10
src/styles.scss
View File

@@ -35,7 +35,15 @@ body {
button {
background: none;
border: none;
width: 8vw;
cursor: pointer;
}
button:hover {
filter: brightness(90%);
}
button:active {
filter: brightness(105%);
}
h1, h2, h3, h4, h5, h6, p {