diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 7ab1717..644d2e8 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -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; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 223f788..ccd89f3 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","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss","../sass_styles/_made-with-love.scss"],"names":[],"mappings":"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","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","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss","../sass_styles/_made-with-love.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_aboutThis.scss b/public/sass_styles/_aboutThis.scss index 79a5fc9..056be5b 100644 --- a/public/sass_styles/_aboutThis.scss +++ b/public/sass_styles/_aboutThis.scss @@ -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; } -} \ No newline at end of file +} + +#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; + } + } + } + } + } +} \ No newline at end of file diff --git a/public/sass_styles/_account.scss b/public/sass_styles/_account.scss index e4a9a48..4287e65 100644 --- a/public/sass_styles/_account.scss +++ b/public/sass_styles/_account.scss @@ -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 } \ No newline at end of file diff --git a/public/sass_styles/_banner-login.scss b/public/sass_styles/_banner-login.scss index 56e04f8..30f5962 100644 --- a/public/sass_styles/_banner-login.scss +++ b/public/sass_styles/_banner-login.scss @@ -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; } \ No newline at end of file diff --git a/public/sass_styles/_clockify-tasks-display.scss b/public/sass_styles/_clockify-tasks-display.scss index ecf761b..6992b20 100644 --- a/public/sass_styles/_clockify-tasks-display.scss +++ b/public/sass_styles/_clockify-tasks-display.scss @@ -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; + + } \ No newline at end of file diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss index c1f300f..4705883 100644 --- a/public/sass_styles/_goDownArrow.scss +++ b/public/sass_styles/_goDownArrow.scss @@ -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; } \ No newline at end of file diff --git a/public/sass_styles/_goToAccount.scss b/public/sass_styles/_goToAccount.scss index 8c84255..459a70b 100644 --- a/public/sass_styles/_goToAccount.scss +++ b/public/sass_styles/_goToAccount.scss @@ -95,4 +95,8 @@ margin:10px 10px; } +} + +.go-to-account.dark-mode-component, .close-session.dark-mode-component { + background-color: $second-color-dark; } \ No newline at end of file diff --git a/public/sass_styles/_header.scss b/public/sass_styles/_header.scss index 8f9079c..689ab62 100644 --- a/public/sass_styles/_header.scss +++ b/public/sass_styles/_header.scss @@ -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; } \ No newline at end of file diff --git a/public/sass_styles/_identify.scss b/public/sass_styles/_identify.scss index 428bcb7..cc08d8e 100644 --- a/public/sass_styles/_identify.scss +++ b/public/sass_styles/_identify.scss @@ -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; + } + } + } +} } \ No newline at end of file diff --git a/public/sass_styles/_made-with-love.scss b/public/sass_styles/_made-with-love.scss index c0ddb3d..10d9cbd 100644 --- a/public/sass_styles/_made-with-love.scss +++ b/public/sass_styles/_made-with-love.scss @@ -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; - } \ No newline at end of file + } + +.made-with-love.dark-mode-component { + + background-color: $main-color-dark; +} \ No newline at end of file diff --git a/public/sass_styles/_mainPomodoro.scss b/public/sass_styles/_mainPomodoro.scss index 9250cef..096d433 100644 --- a/public/sass_styles/_mainPomodoro.scss +++ b/public/sass_styles/_mainPomodoro.scss @@ -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; + } + + } } \ No newline at end of file diff --git a/public/sass_styles/_pomodoro-counter.scss b/public/sass_styles/_pomodoro-counter.scss index 1aed09b..8f904d2 100644 --- a/public/sass_styles/_pomodoro-counter.scss +++ b/public/sass_styles/_pomodoro-counter.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/public/sass_styles/_styleSelector.scss b/public/sass_styles/_styleSelector.scss index c54a92c..17f8d85 100644 --- a/public/sass_styles/_styleSelector.scss +++ b/public/sass_styles/_styleSelector.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index df0ddd6..23297c3 100644 --- a/public/sass_styles/styles.scss +++ b/public/sass_styles/styles.scss @@ -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'; diff --git a/src/App.js b/src/App.js index d78b564..f86e6ac 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( <>
- + - + + - - -