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

Dark mode done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-02 15:49:23 -03:00
parent fdbd8a1be6
commit e4f3bccd8c
33 changed files with 604 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
public/css_styles/styles.css
View File

@@ -5,6 +5,7 @@
align-items: center;
justify-content: center;
height: 17vh;
box-sizing: border-box;
}
.header-main-page a {
text-decoration: none;
@@ -56,6 +57,11 @@
font-size: 13pt;
}
}
.header-main-page.dark-mode-component {
background-color: #303841;
border-bottom: 1px solid #ffffff72;
}
.banner-login {
background-color: #D17262;
color: white;
@@ -94,7 +100,7 @@
border-radius: 24px;
}
.blank {
.banner-login.blank {
opacity: 0%;
}
@@ -128,6 +134,11 @@
margin: 10px;
}
}
.banner-login.blank.dark-mode-component {
opacity: 100%;
background-color: #303841;
}
.main-pomodoro {
display: flex;
flex-direction: column;
@@ -187,6 +198,19 @@
font-size: 13pt;
}
}
.main-pomodoro-container.dark-mode-component {
background-color: #303841;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .timer {
color: #ffffff;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .style-display h3, .main-pomodoro-container.dark-mode-component .main-pomodoro .style-display h4 {
color: #ffffff;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .start-pomodoro {
background-color: #4c8ad5;
}
.style-selector {
width: calc(20vw - 1px);
padding-left: 3vw;
@@ -301,9 +325,24 @@
width: 100%;
}
}
.style-selector-container.dark-mode-component .style-selector h2 {
color: #ffffff;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .style-container label .title {
color: #ffffff;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .style-container label .times {
color: #4c8ad5;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox_control {
border: 3px solid #3e70ae;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
background-color: #4c8ad5;
}
.go-down {
height: 7vh;
width: 100%;
height: 8vh;
display: flex;
justify-content: center;
}
@@ -328,10 +367,26 @@
border-top: 1px solid #b8b8b8;
}
.go-down-separator-line.dark-mode-component {
background-color: #303841;
}
.go-down.dark-mode-component {
background-color: #303841;
}
.go-down.dark-mode-component#go-to-credits {
background-color: #3A4750;
}
#about-this, #credits {
height: 83vh;
padding: 0px 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
#about-this .titles, #credits .titles {
display: flex;
@@ -384,6 +439,17 @@
padding-bottom: 5vh;
}
}
#about-this.dark-mode-component, #credits.dark-mode-component {
background-color: #3A4750;
color: #ffffff;
}
#about-this.dark-mode-component .information, #credits.dark-mode-component .information {
display: flex;
}
#about-this.dark-mode-component .information ul li p a, #credits.dark-mode-component .information ul li p a {
color: #4c8ad5;
}
.history-button {
background: none;
border: none;
@@ -458,10 +524,26 @@
padding-bottom: 5vh;
}
}
.pomodoro-counter.dark-mode-component ul li {
color: #ffffff;
}
.pomodoro-counter.dark-mode-component ul li .quantity {
color: #4c8ad5;
background: #3A4750;
}
html, body {
height: 100%;
}
.identify-container {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.identify-container:has {
height: 100%;
}
.identify-container .error-message-container {
width: 70vw;
@@ -529,6 +611,23 @@
border: #969696 solid 1px;
}
.identify-container.dark-mode-component {
background-color: #3A4750;
}
.identify-container.dark-mode-component .identify .options-container .option {
background-color: #D72323;
}
.identify-container.dark-mode-component .identify .options-container .active-option {
background-color: #7c1414;
}
.identify-container.dark-mode-component .identify .form-container form input {
color: white;
background: none;
}
.identify-container.dark-mode-component .identify .form-container form input[type=submit] {
background-color: #303841;
}
.dark-mode {
position: absolute;
left: calc(100% - 5vw);
@@ -587,6 +686,13 @@
height: 15px;
}
}
html, body {
height: 100%;
}
.account-container {
height: 100%;
}
.account-container #message {
padding-left: 5vw;
background-color: #ff6a6a;
@@ -657,7 +763,8 @@
display: flex;
flex-direction: column;
padding-top: 1vh;
border-radius: 5%;
border-radius: 2px;
padding-left: 1vw;
}
.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .title {
margin: 0;
@@ -686,6 +793,46 @@
align-items: center;
}
@media (max-width: 991.98px) {
.account-container .next-step {
display: flex;
}
.account-container .next-step .next-step-title h1 {
font-size: 15pt;
}
.account-container .next-step .next-step-title h2 {
font-size: 12pt;
}
.account-container .next-step .flex-container-change-api-container .change-api-container {
width: auto;
}
}
.account-container.dark-mode-component {
background-color: #3A4750;
}
.account-container.dark-mode-component .next-step .next-step-title {
background-color: #4c8ad5;
}
.account-container.dark-mode-component .next-step .next-step-title h1, .account-container.dark-mode-component .next-step .next-step-title h2 {
color: #ffffff;
}
.account-container.dark-mode-component .next-step .next-step-title h1 a, .account-container.dark-mode-component .next-step .next-step-title h2 a {
color: #D7FBE8;
}
.account-container.dark-mode-component .next-step .next-step-title h1 a:visited, .account-container.dark-mode-component .next-step .next-step-title h2 a:visited {
color: #9DF3C4;
}
.account-container.dark-mode-component .next-step .flex-container-change-api-container .change-api-container {
background-color: #4c8ad5;
}
.account-container.dark-mode-component .next-step .flex-container-change-api-container .change-api-container .api-preview-container p {
color: white;
}
.loading-container.dark-mode-component {
background-color: #3A4750;
}
.go-to-account {
width: 3vw;
height: 3vw;
@@ -755,6 +902,10 @@
margin: 10px 10px;
}
}
.go-to-account.dark-mode-component, .close-session.dark-mode-component {
background-color: #3A4750;
}
.clockify-tasks-display {
width: 20vw;
position: absolute;
@@ -764,6 +915,7 @@
.clockify-tasks-display.loading-container {
width: 20vw;
height: auto;
background: none;
}
.clockify-tasks-display.disabled {
user-select: none;
@@ -808,7 +960,7 @@
width: auto;
display: flex;
justify-content: space-around;
padding: 0px 5vw;
padding: 3vh 5vw;
}
.clockify-tasks-display.loading-container {
width: 90%;
@@ -837,6 +989,10 @@
margin-top: 1vh;
}
}
.clockify-tasks-display-container.dark-mode-container {
background-color: #3A4750;
}
.made-with-love a {
color: #ff8787;
}
@@ -845,11 +1001,16 @@
color: #b9b9b9;
margin-top: auto;
width: 100%;
padding-bottom: 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
padding-left: 3vw;
box-sizing: border-box;
}
.made-with-love.dark-mode-component {
background-color: #303841;
}
html, body {
margin: 0;
padding: 0;

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

File diff suppressed because one or more lines are too long

32
public/sass_styles/_aboutThis.scss
View File

@@ -3,6 +3,11 @@
padding: 0px 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
display: flex;
flex-direction: column;
align-items: stretch;
.titles {
@@ -62,4 +67,29 @@
padding-bottom: 5vh;
}
}
}
#about-this.dark-mode-component, #credits.dark-mode-component {
background-color: $second-color-dark;
color: #ffffff;
.information {
display: flex;
ul {
li {
p {
a {
color: $lightest-color-dark;
}
}
}
}
}
}

82
public/sass_styles/_account.scss
View File

@@ -1,5 +1,11 @@
html, body {
height: 100%;
}
.account-container {
height: 100%;
#message {
padding-left: 5vw;
@@ -91,7 +97,9 @@
padding-top: 1vh;
border-radius: 5%;
border-radius: 2px;
padding-left: 1vw;
.api-preview-container {
@@ -129,5 +137,77 @@
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 991.98px) {
.account-container {
.next-step {
display: flex;
.next-step-title {
h1 {
font-size: 15pt;
}
h2 {
font-size: 12pt;
}
}
.flex-container-change-api-container{
.change-api-container {
width: auto;
}
}
}
}
}
.account-container.dark-mode-component {
background-color: $second-color-dark;
.next-step {
.next-step-title {
background-color: $lightest-color-dark;
h1, h2 {
color: #ffffff;
a {
color: $lightest-color;
}
a:visited {
color: $light-color;
}
}
}
.flex-container-change-api-container {
.change-api-container {
background-color: $lightest-color-dark;
.api-preview-container {
p {
color: rgb(255, 255, 255)
}
}
}
}
}
}
.loading-container.dark-mode-component {
background-color: $second-color-dark
}

8
public/sass_styles/_banner-login.scss
View File

@@ -49,8 +49,9 @@
}
.blank {
.banner-login.blank {
opacity: 0%;
}
@media (max-width: 918px) {
@@ -95,4 +96,9 @@
}
}
}
}
.banner-login.blank.dark-mode-component {
opacity: 100%;
background-color: $main-color-dark;
}

10
public/sass_styles/_clockify-tasks-display.scss
View File

@@ -9,6 +9,7 @@
&.loading-container {
width: 20vw;
height: auto;
background: none;
}
&.disabled {
@@ -67,7 +68,7 @@
display: flex;
justify-content:space-around;
padding: 0px 5vw;
padding: 3vh 5vw;
&.loading-container {
width: 90%;
@@ -103,4 +104,11 @@
margin-top: 1vh;
}
}
}
.clockify-tasks-display-container.dark-mode-container {
background-color: $second-color-dark;
}

17
public/sass_styles/_goDownArrow.scss
View File

@@ -1,6 +1,5 @@
.go-down {
height: 7vh;
width: 100%;
height: 8vh;
display: flex;
justify-content: center;
@@ -33,4 +32,18 @@
border: none;
border-top: 1px solid rgb(184, 184, 184);
}
}
.go-down-separator-line.dark-mode-component {
background-color: $main-color-dark;
}
.go-down.dark-mode-component {
background-color: $main-color-dark;
}
.go-down.dark-mode-component#go-to-credits {
background-color: $second-color-dark;
}

4
public/sass_styles/_goToAccount.scss
View File

@@ -95,4 +95,8 @@
margin:10px 10px;
}
}
.go-to-account.dark-mode-component, .close-session.dark-mode-component {
background-color: $second-color-dark;
}

6
public/sass_styles/_header.scss
View File

@@ -8,6 +8,7 @@
justify-content: center;
height: 17vh;
box-sizing: border-box;
a {
text-decoration: none;
@@ -69,4 +70,9 @@
font-size: 13pt;
}
}
}
.header-main-page.dark-mode-component {
background-color: $main-color-dark;
border-bottom: 1px solid #ffffff72;
}

47
public/sass_styles/_identify.scss
View File

@@ -1,7 +1,17 @@
html, body {
height: 100%;
}
.identify-container {
&:has {
height: 100%;
}
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
.error-message-container {
width: 70vw;
@@ -94,4 +104,41 @@
}
}
.identify-container.dark-mode-component {
background-color: $second-color-dark;
.identify {
.options-container {
.option {
background-color: $light-color-dark;
}
.active-option{
background-color: $light-color-dark-darker;
}
}
.form-container {
form {
input {
color: white;
background: none;
}
input[type=submit] {
background-color: $main-color-dark;
}
}
}
}
}

11
public/sass_styles/_made-with-love.scss
View File

@@ -6,8 +6,15 @@
color:rgb(185, 185, 185);
margin-top: auto;
width: 100%;
padding-bottom: 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
padding-left: 3vw;
box-sizing: border-box;
}
}
.made-with-love.dark-mode-component {
background-color: $main-color-dark;
}

26
public/sass_styles/_mainPomodoro.scss
View File

@@ -78,4 +78,30 @@
font-size: 13pt;
}
}
}
.main-pomodoro-container.dark-mode-component {
background-color: $main-color-dark;
.main-pomodoro {
.timer {
color: #ffffff;
}
.style-display {
h3, h4 {
color: #ffffff;
}
}
.start-pomodoro{
background-color: $lightest-color-dark;
}
}
}

16
public/sass_styles/_pomodoro-counter.scss
View File

@@ -52,4 +52,20 @@
position: initial;
padding-bottom: 5vh;
}
}
.pomodoro-counter.dark-mode-component {
ul {
li {
color: #ffffff;
.quantity {
color: $lightest-color-dark;
background: $second-color-dark;
}
}
}
}

39
public/sass_styles/_styleSelector.scss
View File

@@ -173,4 +173,43 @@
}
}
}
.style-selector-container.dark-mode-component {
.style-selector {
h2 {
color: #ffffff;
}
.style-selection-container {
.style-container{
label {
.title {
color: #ffffff;
}
.times {
color: $lightest-color-dark;
}
}
}
.checkbox_control {
border: 3px solid $lightest-color-dark-darker;
}
.checkbox__input input:checked + .checkbox_control {
background-color: $lightest-color-dark;
}
}
}
}

4
public/sass_styles/styles.scss
View File

@@ -47,7 +47,9 @@ $lightest-color: #D7FBE8;
$main-color-dark: #303841;
$second-color-dark: #3A4750;
$light-color-dark: #D72323;
$lightest-color-dark: #EEEEEE;
$light-color-dark-darker: #7c1414;
$lightest-color-dark: #4c8ad5;
$lightest-color-dark-darker: #3e70ae;
@import 'header';
@import 'banner-login';

52
src/App.js
View File

@@ -35,6 +35,8 @@ function App() {
const [workspaceID, setWorspaceID] = useState(0)
const [projectID, setProjectID] = useState(0)
const [darkMode, setDarkmode] = useState(false)
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
@@ -46,27 +48,49 @@ function App() {
}
})
const root = document.getElementById('root')
if (window.location.href.split('/')[3].includes('identify') || window.location.href.split('/')[3].includes('config-account')) {
root.style.height = '100%'
root.style.display = 'flex'
root.style.flexDirection ='column'
} else {
console.log(false)
}
return (
<Router>
<>
<Header
signIn={signIn}
darkMode={darkMode}
setDarkmode={setDarkmode}
/>
<Switch>
<Route path="/config-account">
<Account />
<Account
darkMode={darkMode}
/>
</Route>
<Route path="/identify">
<Identify />
<Identify
darkMode={darkMode}
/>
</Route>
<Route path="/">
<BannerLogin
signIn={signIn}
darkMode={darkMode}
/>
<ClockifyTasksDisplay
@@ -84,6 +108,8 @@ function App() {
projectID={projectID}
setProjectID={setProjectID}
darkMode={darkMode}
/>
<MainPomodoro
@@ -102,20 +128,34 @@ function App() {
projectID={projectID}
setProjectID={setProjectID}
darkMode={darkMode}
/>
<GoDownArrow
direction={'about-this'}
darkMode={darkMode}
/>
<AboutThis
darkMode={darkMode}
/>
<AboutThis />
<GoDownArrow
direction={'credits'}
darkMode={darkMode}
/>
<Credits />
<Footer />
<Credits
darkMode={darkMode}
/>
</Route>
</Switch>
<Footer
darkMode={darkMode}
/>
</>
</Router>
);

4
src/components/AboutThis.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'
const AboutThis = () => {
const AboutThis = (props) => {
return (
<div id="about-this">
<div id="about-this" className={props.darkMode ? 'dark-mode-component' : null}>
<div className="titles">
<h3>About<span className="line-through"> us </span>this</h3>
</div>

11
src/components/Account.jsx
View File

@@ -3,9 +3,10 @@ import {firebase} from './Firebase/firebase'
import {getAuth, onAuthStateChanged} from 'firebase/auth'
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import Message from './Account Childrens/Message';
import loadingGif from './img/loading.gif'
import loadingGifLightTheme from './img/loading-light-theme.png'
import loadingGifDarkTheme from './img/loading-dark-theme.png'
const Account = () => {
const Account = (props) => {
const [signIn, setSignIn] = useState('false')
const [apiKey, setApiKey] = useState('')
@@ -161,14 +162,14 @@ const Account = () => {
if (loading) {
return (
<div className="loading-container">
<img src={loadingGif} alt="" />
<div className={props.darkMode ? "loading-container dark-mode-component" : "loading-container"}>
<img src={props.darkMode ? loadingGifDarkTheme : loadingGifLightTheme} alt="" />
</div>
)
}
return (
<div className="account-container">
<div className={props.darkMode ? "account-container dark-mode-component" : "account-container"}>
{
actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? <Message message={actualState}/> : null
}

2
src/components/BannerLogin.jsx
View File

@@ -16,7 +16,7 @@ const BannerLogin = (props) => {
<button className="login" onClick={() => {window.location = '/identify?act=l'}}>Login</button>
</div>
</div>
: <div className="banner-login blank">
: <div className={props.darkMode ? 'banner-login blank dark-mode-component' : 'banner-login blank'}>
</div>
}

35
src/components/ClockifyTasksDisplay.jsx
View File

@@ -3,7 +3,8 @@ import React, {useState} from 'react'
import { firebase } from './Firebase/firebase';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import loadingGif from './img/loading.gif'
import loadingGifLightTheme from './img/loading-light-theme.png'
import loadingGifDarkTheme from './img/loading-dark-theme.png'
const ClockifyTasksDisplay = (props) => {
@@ -85,9 +86,9 @@ const ClockifyTasksDisplay = (props) => {
setWorkspacesReady(true)
setLoading(false)
}
}
React.useEffect( () => {
@@ -164,22 +165,26 @@ const ClockifyTasksDisplay = (props) => {
props.setProjectID(e)
}
if (loading && userUID !== '' && apiAvailable) {
if (loading && userUID) {
if (!apiAvailable) {
return (<div></div>)
} else {
return (
<div className="clockify-tasks-display loading-container">
<img src={props.darkMode ? loadingGifDarkTheme : loadingGifLightTheme} alt=""/>
</div>
)
}
return (
<div className="clockify-tasks-display loading-container">
<img src={loadingGif} alt=""/>
</div>
)
}
if (!apiAvailable) {
return (<div></div>)
}
return (
<>
<div className={props.darkMode ? 'clockify-tasks-display-container dark-mode-container' : 'clockify-tasks-display-container'}>
{
userUID ?
<div className={props.timerOn ? 'clockify-tasks-display disabled' : 'clockify-tasks-display'}>
@@ -217,7 +222,7 @@ const ClockifyTasksDisplay = (props) => {
</div>
: null
}
</>
</div>
)
}

4
src/components/Credits.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'
const Credits = () => {
const Credits = (props) => {
return (
<div id="credits">
<div id="credits" className={props.darkMode ? 'dark-mode-component' : null}>
<div className="titles">
<h3>Credits</h3>
</div>

4
src/components/Footer.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'
const Footer = () => {
const Footer = (props) => {
return (
<footer className="made-with-love">
<footer className={props.darkMode ? 'made-with-love dark-mode-component' : 'made-with-love'}>
Made with 💓 by <a href="http://www.franp.xyz">Francisco Pessano</a>
</footer>
)

11
src/components/GoDownArrow.jsx
View File

@@ -3,23 +3,18 @@ import { Link, animateScroll as scroll } from "react-scroll";
const GoDownArrow = (props) => {
const width = window.screen.width
if (width <= '991.98') {
return (
<div className="go-down-separator-line">
<hr/>
<div className={props.darkMode ? 'go-down-separator-line dark-mode-component' : 'go-down-separator-line'}>
<hr/>
</div>
)
}
return (
<div className="go-down">
<div className={props.darkMode ? 'go-down dark-mode-component' : 'go-down'} id={props.direction === 'credits' ? 'go-to-credits' : null}>
<Link to={props.direction} smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
</div>
)

37
src/components/Header Childrens/DarkMode.jsx
View File

@@ -1,11 +1,40 @@
import React from 'react'
const DarkMode = () => {
const DarkMode = (props) => {
React.useEffect( () => {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
props.setDarkmode(true)
const darkModeSwitch = document.getElementById('dark-mode_toogle-switch')
darkModeSwitch.checked = true
}
const darkModeCache = localStorage.getItem('dark-mode')
console.log(darkModeCache)
if (darkModeCache === 'true') {
props.setDarkmode(true)
const darkModeSwitch = document.getElementById('dark-mode_toogle-switch')
darkModeSwitch.checked = true
}
}, [])
const changeTheme = () => {
props.setDarkmode(!props.darkMode)
localStorage.setItem('dark-mode', !props.darkMode)
}
return (
<div className="dark-mode">
<input type="checkbox" id="dark-mode_toogle-switch" onChange={() => {
}}/>
<input type="checkbox" id="dark-mode_toogle-switch" onChange={changeTheme}/>
<label htmlFor="dark-mode_toogle-switch"></label>
</div>
)

4
src/components/Header Childrens/GoToAccount.jsx
View File

@@ -6,10 +6,10 @@ const GoToAccount = (props) => {
{
props.signIn ?
<>
<a href="/config-account" className="go-to-account">
<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="close-session">
<a href="/identify?act=clss" className={props.darkMode ? 'close-session dark-mode-component' : 'close-session'}>
<div className="close-session-text">Close session</div>
</a>
</>

12
src/components/Header.jsx
View File

@@ -7,11 +7,17 @@ const Header = (props) => {
return (
<header className="header-main-page">
<header className={props.darkMode ? 'header-main-page dark-mode-component' : 'header-main-page'} >
<a href="/"><h1>Pomodoro Timer</h1></a>
<h3>Made By <span className="selectable"><a target="_blank" href="http://www.franp.xyz" rel="noreferrer">Francisco Pessano</a></span></h3>
<DarkMode />
<GoToAccount signIn={props.signIn}/>
<DarkMode
darkMode={props.darkMode}
setDarkmode={props.setDarkmode}
/>
<GoToAccount
signIn={props.signIn}
darkMode={props.darkMode}
/>
</header>
)
}

3
src/components/Identify.jsx
View File

@@ -171,6 +171,7 @@ const Identify = (props) => {
if (action === 'clss') {
signOutFromApp()
props.history.push('/')
}
onAuthStateChanged(auth, (user) => {
@@ -182,7 +183,7 @@ const Identify = (props) => {
return (
<div className="identify-container">
<div className={props.darkMode ? 'identify-container dark-mode-component' : 'identify-container'}>
<div className="error-message-container">
{
errorMessage ? <p>{errorMessage}</p> : null

2
src/components/Main Pomodoro Childrens/PomodoroCounter.jsx
View File

@@ -3,7 +3,7 @@ import React from 'react'
const PomodoroCounter = (props) => {
return (
<div className="pomodoro-counter">
<div className={props.darkMode ? 'pomodoro-counter dark-mode-component': 'pomodoro-counter'}>
<ul>
<li>
<span className="quantity">{props.pomodoros}</span><span className="separator"> - </span>Pomodoros

18
src/components/Main Pomodoro Childrens/StyleSelector.jsx
View File

@@ -3,14 +3,16 @@ import StyleSelectionChildren from './Style Selector Children/StyleSelectionChil
const StyleSelector = (props) => {
return (
<div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
<h2>Select Style</h2>
<div className="style-selection-container">
<StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
<div className={props.darkMode ? 'style-selector-container dark-mode-component' : 'style-selector-container'}>
<div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
<h2>Select Style</h2>
<div className="style-selection-container">
<StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
</div>
</div>
</div>
)

8
src/components/MainPomodoro.jsx
View File

@@ -44,7 +44,7 @@ const MainPomodoro = (props) => {
return (
<>
<div className={props.darkMode ? 'main-pomodoro-container dark-mode-component' : 'main-pomodoro-container'}>
<div className="main-pomodoro">
<MainPomodoroTimer
@@ -103,9 +103,9 @@ const MainPomodoro = (props) => {
}</button>
</div>
<StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
<PomodoroCounter pomodoros={pomodoros} rests={rests} longRests={longRests}/>
</>
<StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle} darkMode={props.darkMode}/>
<PomodoroCounter pomodoros={pomodoros} rests={rests} longRests={longRests} darkMode={props.darkMode}/>
</div>
)

BIN
src/components/img/loading-dark-theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/components/img/loading-light-theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/components/img/loading.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB