From c9115e2ef87f994caba41990ea868f338edefcb1 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Thu, 5 May 2022 20:31:45 -0300 Subject: [PATCH] =?UTF-8?q?Refactored=20the=20whole=20app=20=F0=9F=94=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css_styles/styles.css | 1106 ----------------- public/css_styles/styles.css.map | 1 - public/index.html | 5 - public/sass_styles/_banner-login.scss | 104 -- public/sass_styles/_goToAccount.scss | 104 -- public/sass_styles/_header.scss | 134 -- public/sass_styles/_historyButton.scss | 49 - public/sass_styles/_made-with-love.scss | 20 - public/sass_styles/_mainPomodoro.scss | 109 -- public/sass_styles/_pomodoro-counter.scss | 71 -- public/sass_styles/styles.scss | 77 -- src/App.js | 123 +- src/{components => }/Firebase/firebase.js | 0 src/components/Account Childrens/Message.jsx | 34 - src/components/BannerLogin.jsx | 27 - .../ClockifyTasksHoursCounter.jsx | 125 -- src/components/Clockify/clockify.js | 19 - .../Clockify/uploadToClockifyTimer.js | 35 - src/components/ClockifyTasksDisplay.jsx | 237 ---- src/components/{ => Footer}/Footer.jsx | 4 +- src/components/Footer/footer-styles.css | 13 + src/components/Footer/footer-styles.css.map | 1 + src/components/Footer/footer-styles.scss | 18 + .../{ => GoDownArrow}/GoDownArrow.jsx | 18 +- .../GoDownArrow/go-down-arrow-styles.css | 26 + .../GoDownArrow/go-down-arrow-styles.css.map | 1 + .../GoDownArrow/go-down-arrow-styles.scss | 17 +- src/components/Header Childrens/DarkMode.jsx | 42 - .../Header Childrens/GoToAccount.jsx | 22 - src/components/Header.jsx | 54 - src/components/Header/Header.jsx | 72 ++ .../Header/ThemeSwitch/ThemeSwitch.jsx | 102 ++ .../ThemeSwitch/theme-switch-styles.css | 65 + .../ThemeSwitch/theme-switch-styles.css.map | 1 + .../ThemeSwitch/theme-switch-styles.scss | 16 +- src/components/Header/header-styles.css | 234 ++++ src/components/Header/header-styles.css.map | 1 + src/components/Header/header-styles.scss | 313 +++++ .../Identify Childrens/LoginForm.jsx | 33 - .../Identify Childrens/RegisterForm.jsx | 39 - .../Identify Childrens/ResetPassword.jsx | 19 - src/components/Identify.jsx | 311 ----- src/components/Loading/Loading.jsx | 14 + .../{ => Loading}/img/loading-dark-theme.png | Bin .../{ => Loading}/img/loading-light-theme.png | Bin src/components/Loading/loading-styles.css | 5 + src/components/Loading/loading-styles.css.map | 1 + src/components/Loading/loading-styles.scss | 6 + .../setTimeStyle.js | 117 -- .../PomodoroCounter.jsx | 22 - .../StyleSelectionChildren.jsx | 33 - .../Main Pomodoro Childrens/StyleSelector.jsx | 21 - src/components/MainPomodoro.jsx | 112 -- src/components/Message/Message.jsx | 12 + .../AboutThis}/AboutThis.jsx | 12 +- src/pages/AboutThis/about-this-styles.css | 50 + src/pages/AboutThis/about-this-styles.css.map | 1 + .../pages/AboutThis/about-this-styles.scss | 37 +- .../ConfigAccount/ConfigAccount.jsx} | 77 +- .../ConfigAccount/config-account-styles.css | 105 ++ .../config-account-styles.css.map | 1 + .../ConfigAccount/config-account-styles.scss | 91 +- src/{components => pages/Credits}/Credits.jsx | 3 - src/pages/Identify/Identify.jsx | 349 ++++++ src/pages/Identify/identify-styles.css | 98 ++ src/pages/Identify/identify-styles.css.map | 1 + .../pages/Identify/identify-styles.scss | 92 +- .../ClockifyTaskForm/ClockifyTaskForm.jsx | 206 +++ .../ClockifyTaskForm/clockify-task-form.css | 91 ++ .../clockify-task-form.css.map | 1 + .../ClockifyTaskForm/clockify-task-form.scss | 11 +- src/pages/Main/Main.jsx | 69 + src/pages/Main/Pomodoro/Pomodoro.jsx | 152 +++ .../Pomodoro/PomodoroTimer/PomodoroTimer.jsx} | 128 +- .../Pomodoro/PomodoroTimer}/detectKeys.js | 0 .../PomodoroTimer}/getAndFormatCurrentTime.js | 0 .../Pomodoro/PomodoroTimer}/randomText.js | 0 .../Pomodoro/PomodoroTimer/timerLogic.js} | 0 .../Pomodoro/StyleSelector/StyleSelector.jsx | 75 ++ .../Pomodoro/StyleSelector/style-selector.css | 112 ++ .../StyleSelector/style-selector.css.map | 1 + .../StyleSelector/style-selector.scss | 58 +- src/pages/Main/Pomodoro/pomodoro-styles.css | 101 ++ .../Main/Pomodoro/pomodoro-styles.css.map | 1 + src/pages/Main/Pomodoro/pomodoro-styles.scss | 127 ++ src/{components => }/sounds/bell-x2.mp3 | Bin src/{components => }/sounds/bell-x3.mp3 | Bin src/styles.css | 51 + src/styles.css.map | 1 + src/styles.scss | 57 + 90 files changed, 2738 insertions(+), 3566 deletions(-) delete mode 100644 public/css_styles/styles.css delete mode 100644 public/css_styles/styles.css.map delete mode 100644 public/sass_styles/_banner-login.scss delete mode 100644 public/sass_styles/_goToAccount.scss delete mode 100644 public/sass_styles/_header.scss delete mode 100644 public/sass_styles/_historyButton.scss delete mode 100644 public/sass_styles/_made-with-love.scss delete mode 100644 public/sass_styles/_mainPomodoro.scss delete mode 100644 public/sass_styles/_pomodoro-counter.scss delete mode 100644 public/sass_styles/styles.scss rename src/{components => }/Firebase/firebase.js (100%) delete mode 100644 src/components/Account Childrens/Message.jsx delete mode 100644 src/components/BannerLogin.jsx delete mode 100644 src/components/Clockify Tasks Hours Counter/ClockifyTasksHoursCounter.jsx delete mode 100644 src/components/Clockify/clockify.js delete mode 100644 src/components/Clockify/uploadToClockifyTimer.js delete mode 100644 src/components/ClockifyTasksDisplay.jsx rename src/components/{ => Footer}/Footer.jsx (74%) create mode 100644 src/components/Footer/footer-styles.css create mode 100644 src/components/Footer/footer-styles.css.map create mode 100644 src/components/Footer/footer-styles.scss rename src/components/{ => GoDownArrow}/GoDownArrow.jsx (89%) create mode 100644 src/components/GoDownArrow/go-down-arrow-styles.css create mode 100644 src/components/GoDownArrow/go-down-arrow-styles.css.map rename public/sass_styles/_goDownArrow.scss => src/components/GoDownArrow/go-down-arrow-styles.scss (67%) delete mode 100644 src/components/Header Childrens/DarkMode.jsx delete mode 100644 src/components/Header Childrens/GoToAccount.jsx delete mode 100644 src/components/Header.jsx create mode 100644 src/components/Header/Header.jsx create mode 100644 src/components/Header/ThemeSwitch/ThemeSwitch.jsx create mode 100644 src/components/Header/ThemeSwitch/theme-switch-styles.css create mode 100644 src/components/Header/ThemeSwitch/theme-switch-styles.css.map rename public/sass_styles/_dark-mode_toogle-switch.scss => src/components/Header/ThemeSwitch/theme-switch-styles.scss (84%) create mode 100644 src/components/Header/header-styles.css create mode 100644 src/components/Header/header-styles.css.map create mode 100644 src/components/Header/header-styles.scss delete mode 100644 src/components/Identify Childrens/LoginForm.jsx delete mode 100644 src/components/Identify Childrens/RegisterForm.jsx delete mode 100644 src/components/Identify Childrens/ResetPassword.jsx delete mode 100644 src/components/Identify.jsx create mode 100644 src/components/Loading/Loading.jsx rename src/components/{ => Loading}/img/loading-dark-theme.png (100%) rename src/components/{ => Loading}/img/loading-light-theme.png (100%) create mode 100644 src/components/Loading/loading-styles.css create mode 100644 src/components/Loading/loading-styles.css.map create mode 100644 src/components/Loading/loading-styles.scss delete mode 100644 src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js delete mode 100644 src/components/Main Pomodoro Childrens/PomodoroCounter.jsx delete mode 100644 src/components/Main Pomodoro Childrens/Style Selector Children/StyleSelectionChildren.jsx delete mode 100644 src/components/Main Pomodoro Childrens/StyleSelector.jsx delete mode 100644 src/components/MainPomodoro.jsx create mode 100644 src/components/Message/Message.jsx rename src/{components => pages/AboutThis}/AboutThis.jsx (88%) create mode 100644 src/pages/AboutThis/about-this-styles.css create mode 100644 src/pages/AboutThis/about-this-styles.css.map rename public/sass_styles/_aboutThis.scss => src/pages/AboutThis/about-this-styles.scss (61%) rename src/{components/Account.jsx => pages/ConfigAccount/ConfigAccount.jsx} (80%) create mode 100644 src/pages/ConfigAccount/config-account-styles.css create mode 100644 src/pages/ConfigAccount/config-account-styles.css.map rename public/sass_styles/_account.scss => src/pages/ConfigAccount/config-account-styles.scss (58%) rename src/{components => pages/Credits}/Credits.jsx (99%) create mode 100644 src/pages/Identify/Identify.jsx create mode 100644 src/pages/Identify/identify-styles.css create mode 100644 src/pages/Identify/identify-styles.css.map rename public/sass_styles/_identify.scss => src/pages/Identify/identify-styles.scss (58%) create mode 100644 src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx create mode 100644 src/pages/Main/ClockifyTaskForm/clockify-task-form.css create mode 100644 src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map rename public/sass_styles/_clockify-tasks-display.scss => src/pages/Main/ClockifyTaskForm/clockify-task-form.scss (91%) create mode 100644 src/pages/Main/Main.jsx create mode 100644 src/pages/Main/Pomodoro/Pomodoro.jsx rename src/{components/Main Pomodoro Childrens/MainPomodoroTimer.jsx => pages/Main/Pomodoro/PomodoroTimer/PomodoroTimer.jsx} (79%) rename src/{components/Misc => pages/Main/Pomodoro/PomodoroTimer}/detectKeys.js (100%) rename src/{components/Clockify => pages/Main/Pomodoro/PomodoroTimer}/getAndFormatCurrentTime.js (100%) rename src/{components/Misc => pages/Main/Pomodoro/PomodoroTimer}/randomText.js (100%) rename src/{components/Main Pomodoro Childrens/timer.js => pages/Main/Pomodoro/PomodoroTimer/timerLogic.js} (100%) create mode 100644 src/pages/Main/Pomodoro/StyleSelector/StyleSelector.jsx create mode 100644 src/pages/Main/Pomodoro/StyleSelector/style-selector.css create mode 100644 src/pages/Main/Pomodoro/StyleSelector/style-selector.css.map rename public/sass_styles/_styleSelector.scss => src/pages/Main/Pomodoro/StyleSelector/style-selector.scss (71%) create mode 100644 src/pages/Main/Pomodoro/pomodoro-styles.css create mode 100644 src/pages/Main/Pomodoro/pomodoro-styles.css.map create mode 100644 src/pages/Main/Pomodoro/pomodoro-styles.scss rename src/{components => }/sounds/bell-x2.mp3 (100%) rename src/{components => }/sounds/bell-x3.mp3 (100%) create mode 100644 src/styles.css create mode 100644 src/styles.css.map create mode 100644 src/styles.scss diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css deleted file mode 100644 index 814612e..0000000 --- a/public/css_styles/styles.css +++ /dev/null @@ -1,1106 +0,0 @@ -.header-main-page { - background-color: #62D2A2; - display: flex; - flex-direction: column; - justify-content: center; - height: 14vh; - padding: 0vh 1vw; - box-sizing: border-box; -} -.header-main-page a { - text-decoration: none; -} -.header-main-page .title-link { - width: fit-content; -} -.header-main-page h1 { - color: #ffffff; - font-size: 3vw; - display: inline; - font-family: "Raleway", sans-serif; - font-weight: 700; - margin: 0; - padding: 0; - user-select: none; -} -.header-main-page .konami-code { - font-family: "Raleway", sans-serif; - font-weight: 700; - color: #4c8ad5; -} - -.notification-select { - background-color: #1FAB89; - height: 3vh; - display: flex; - align-items: flex-end; - padding-left: 1vw; - box-sizing: border-box; - color: #fff; - font-family: "Rambla", sans-serif; -} -.notification-select p { - display: inline-block; - align-self: center; - padding: 0; - margin: 0; - margin-right: 1vw; -} -.notification-select button { - height: 80%; - width: 5%; - margin-right: 0.5vw; - border: none; - border-radius: 2px; - align-self: center; - color: #fff; - font-weight: bold; - cursor: pointer; -} -.notification-select button.yes { - background-color: #4caf50; -} -.notification-select button.no { - background-color: #d32f2f; -} - -@media (max-width: 991.98px) { - .header-main-page { - height: auto; - padding: 3vw 0px; - align-items: center; - } - .header-main-page h1 { - font-size: 26pt; - } - .header-main-page h3 { - font-size: 13pt; - } - - .notification-select { - height: auto; - flex-wrap: wrap; - } - .notification-select p { - width: 100%; - margin-top: 1vh; - margin-bottom: 1vh; - } - .notification-select button { - height: 30px; - width: 20%; - margin-bottom: 1vh; - } -} -.header-main-page.dark-mode-component { - background-color: #303841; - border-bottom: 1px solid #ffffff72; -} - -.notification-select.dark-mode-component { - background-color: #3A4750; -} - -.banner-login { - background-color: #D17262; - color: white; - font-family: "Rambla", sans-serif; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0px 5vw; - height: 8vh; -} -.banner-login p { - margin: 0; - padding: 0; -} -.banner-login .button-container { - width: 20vw; - display: flex; - justify-content: space-around; -} -.banner-login .button-container button { - background: none; - border: none; - width: 8vw; - 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: #00000057; - border-radius: 24px; -} - -.banner-login.blank { - opacity: 0%; -} - -@media (max-width: 918px) { - .banner-login { - justify-content: initial; - height: auto; - padding: 2vh 2vw; - } - .banner-login p { - width: 33.3%; - } - .banner-login .button-container { - width: 66.6%; - justify-content: space-around; - } - .banner-login .button-container button { - width: 30%; - } -} -@media (max-width: 576px) { - .banner-login p { - width: 50%; - } - .banner-login .button-container { - width: 50%; - flex-direction: column; - } - .banner-login .button-container button { - width: 75%; - margin: 10px; - } -} -.banner-login.blank.dark-mode-component { - opacity: 100%; - background-color: #303841; -} - -.main-pomodoro { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 68vh; -} -.main-pomodoro .timer { - display: flex; - justify-content: center; - font-family: "Rambla", sans-serif; - font-weight: bold; - font-size: 130pt; - color: #1FAB89; -} -.main-pomodoro .style-display { - display: flex; - align-items: center; - flex-direction: column; - font-family: "Rambla", sans-serif; -} -.main-pomodoro .style-display h4 { - font-size: 24pt; - margin: 0; - padding: 0; - color: #1FAB89; - user-select: none; -} -.main-pomodoro .style-display h3 { - font-size: 30pt; - margin: 0; - padding: 0; - color: #1FAB89; - cursor: pointer; - user-select: none; -} -.main-pomodoro .start-pomodoro { - background: none; - border: none; - width: 8vw; - font-family: "Raleway", sans-serif; - font-weight: 700; - margin-top: 6vh; - width: 30vw; - height: 8vh; - background: #1FAB89; - border-radius: 24px; - font-size: 5vh; - color: white; -} - -@media (max-width: 576px) { - .main-pomodoro { - height: auto; - } - .main-pomodoro .timer { - font-size: 80pt; - } - .main-pomodoro .start-pomodoro { - 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; - padding-bottom: 12vh; - position: absolute; - top: 29vh; - left: 75vw; - box-shadow: 1px 6px 15px #00000020; - z-index: 50; - transition: 0.2s ease-in-out; -} -.style-selector h2 { - font-family: "Rambla", sans-serif; - color: #1FAB89; - font-size: 30pt; - text-align: center; - margin-left: -3vw; - margin-top: 1vh; - margin-bottom: 3vh; -} -.style-selector .style-selection-container .style-container { - display: flex; - height: 10vh; - align-items: center; -} -.style-selector .style-selection-container .style-container label { - display: flex; - flex-direction: column; - justify-content: center; -} -.style-selector .style-selection-container .style-container label .title { - font-family: "Rambla", sans-serif; - font-size: 13pt; -} -.style-selector .style-selection-container .style-container label .times { - font-family: "Rambla", sans-serif; - color: #1FAB89; - font-size: 13pt; -} -.style-selector .style-selection-container input { - width: 65px; - opacity: 0; -} -.style-selector .style-selection-container .checkbox__input { - display: grid; - grid-template-areas: "checkbox"; -} -.style-selector .style-selection-container .checkbox__input > * { - grid-area: checkbox; -} -.style-selector .style-selection-container .checkbox_control { - display: inline-grid; - width: 45px; - height: 45px; - border: 3px solid #62D2A2; - border-radius: 0.25em; - border-radius: 100%; - transition: ease-in-out 0.2s; -} -.style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control { - background-color: #9DF3C4; -} - -.style-selector-show { - opacity: 100%; - pointer-events: auto; -} - -.style-selector-hidden { - opacity: 0%; - pointer-events: none; -} - -@media (max-width: 991.98px) { - .style-selector { - position: initial; - margin: 0 0 5% 0; - width: 100%; - padding: 0; - padding: 0px 5vw; - box-sizing: border-box; - } - .style-selector h2 { - text-align: start; - margin-left: 0; - } - .style-selector .style-selection-container { - display: flex; - flex-wrap: wrap; - width: 100%; - } - .style-selector .style-selection-container .style-container { - height: 100%; - width: 30%; - margin: 1% 10%; - } -} -@media (max-width: 918px) { - .style-selector { - margin-bottom: 5vh; - } - .style-selector .style-selection-container { - flex-wrap: nowrap; - flex-direction: column; - } - .style-selector .style-selection-container .style-container { - width: 60%; - } -} -@media (max-width: 462px) { - .style-selector .style-selection-container .style-container { - 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 #eff3f8; -} -.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control { - background-color: #4c8ad5; -} - -.go-down { - height: 8vh; - display: flex; - justify-content: center; -} -.go-down svg { - height: 6vh; - width: 6vh; - cursor: pointer; -} -.go-down svg path { - fill: #aaaaaa; -} - -.go-down-separator-line { - width: 100%; - display: flex; - justify-content: center; -} -.go-down-separator-line hr { - height: 1px; - width: 75%; - border: none; - 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; -} -#about-this .titles h3, #credits .titles h3 { - width: 50%; - font-family: "Raleway", sans-serif; - font-weight: 700; - margin: 0; - padding: 0; - user-select: none; - font-size: 22pt; -} -#about-this .titles h3 .line-through, #credits .titles h3 .line-through { - text-decoration: line-through; - text-decoration-thickness: 3px; -} -#about-this .information, #credits .information { - display: flex; -} -#about-this .information ul, #credits .information ul { - width: 50%; -} -#about-this .information ul li, #credits .information ul li { - margin-top: 3vh; -} -#about-this .information ul li h4, #credits .information ul li h4 { - margin: 0; - padding: 0; - user-select: none; - font-family: "Rambla", sans-serif; - font-size: 18pt; -} -#about-this .information ul li p, #credits .information ul li p { - margin: 0; - padding: 0; - font-family: "Rambla", sans-serif; - font-size: 13pt; - margin-left: 2vw; - margin-top: 1vh; -} - -#credits { - height: 95vh; -} - -@media (max-width: 918px) { - #about-this, #credits { - height: auto; - 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; - width: 8vw; - height: 9vh; - width: 9vh; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - position: absolute; - left: 6vh; - border-radius: 100%; - background-color: #9DF3C4; -} -.history-button svg { - cursor: pointer; - width: 6vh; - height: 6vh; -} -.history-button svg path { - fill: #aaaaaa; -} -.history-button svg path { - fill: rgba(80, 80, 80, 0.556); -} -.history-button:hover { - animation: spin 0.4s ease-in-out; -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.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; -} - -@media (max-width: 991.98px) { - .pomodoro-counter { - position: initial; - 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, .identify-container .success-message-container { - width: 70vw; - background-color: #D17262; - display: flex; - justify-content: center; - align-items: center; -} -.identify-container .error-message-container p, .identify-container .success-message-container p { - margin: 2vw; - color: #ffffff; - font-family: "Raleway", sans-serif; - font-weight: 700; - user-select: none; - font-size: 22pt; -} -.identify-container .success-message-container { - background-color: #D7FBE8; -} -.identify-container .success-message-container p { - color: #464646; -} -.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; - cursor: pointer; - transition: 0.4s ease-in-out; -} -.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 .options-container .active-option { - cursor: initial; - background-color: #15745c; -} -.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; -} - -.loading-container { - width: 100%; - height: 83vh; - display: flex; - justify-content: center; - align-items: center; -} -.loading-container.dark-mode-component { - background-color: #303841; -} - -.reset-password { - height: 4vh; - width: 60%; - margin-bottom: 1vh; - border: none; - border-bottom: 1px solid #969696; - outline: none; - width: 50%; - border: #969696 solid 1px; - background-color: #62D2A2; -} - -.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; - top: 1.7vh; - left: calc(100% - 5vw); -} -.dark-mode #dark-mode_toogle-switch { - width: 0; - height: 0; - visibility: hidden; -} -.dark-mode label { - display: block; - width: 4vw; - height: 4vh; - background-color: #D7FBE8; - border-radius: 100px; - position: relative; - cursor: pointer; - transition: 0.5s; - box-shadow: 0 0 20px #477a8550; -} -.dark-mode label::after { - content: ""; - width: 3.5vh; - height: 3.5vh; - background-color: #b632eb; - position: absolute; - border-radius: 100%; - top: 0.25vh; - left: 0.25vh; - transition: 0.5s; -} -.dark-mode input:checked + label:after { - left: calc(100% - 0.25vh); - transform: translateX(-100%); - background-color: #D7FBE8; -} -.dark-mode input:checked + label { - background-color: #b632eb; -} - -@media (max-width: 991.98px) { - .dark-mode { - position: initial; - } - .dark-mode label { - width: 50px; - height: 20px; - } - .dark-mode label::after { - width: 15px; - height: 15px; - } -} -@media (max-width: 576px) { - .dark-mode { - margin-bottom: 20px; - } - .dark-mode label { - width: 50px; - height: 20px; - } - .dark-mode label::after { - width: 15px; - height: 15px; - } -} -html, body { - height: 100%; -} - -.account-container { - height: 69vh; -} -.account-container #message { - padding-left: 5vw; - background-color: #ff6a6a; -} -.account-container #message h1 { - font-family: "Raleway", sans-serif; - font-weight: 700; - margin: 0; - padding: 0; - user-select: none; - color: #ffffff; - padding: 2vh 0px; -} -.account-container .successfully { - background-color: #75b7ff !important; -} -.account-container .successfully h1 { - color: #3a3a3a !important; -} -.account-container .next-step .disabled { - user-select: none; - cursor: initial; - pointer-events: none; - opacity: 30%; -} -.account-container .next-step .next-step-title { - padding-left: 5vw; - padding-top: 5vh; - background-color: #9DF3C4; -} -.account-container .next-step .next-step-title h1, .account-container .next-step .next-step-title h2 { - margin: 0; - padding: 0; - user-select: none; - font-family: "Raleway", sans-serif; - font-weight: 700; - color: #1FAB89; - padding-bottom: 3vh; -} -.account-container .next-step form { - width: 50vw; - display: flex; - flex-direction: column; - align-items: center; - padding-top: 1vh; -} -.account-container .next-step form input { - height: 4vh; - width: 60%; - margin-bottom: 1vh; - border: none; - border-bottom: 1px solid #969696; - outline: none; -} -.account-container .next-step form input[type=submit] { - width: 50%; - border: #969696 solid 1px; -} -.account-container .next-step form .disabled { - opacity: 0%; -} -.account-container .next-step .flex-container-change-api-container { - padding-left: 5vw; -} -.account-container .next-step .flex-container-change-api-container .change-api-container { - width: 50vw; - background-color: #D7FBE8; - display: flex; - flex-direction: column; - padding-top: 1vh; - border-radius: 2px; - padding-left: 1vw; -} -.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .title { - margin: 0; - padding: 0; - user-select: none; - font-family: "Raleway", sans-serif; - font-weight: 700; -} -.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .api-preview { - font-weight: bold; -} -.account-container .next-step .flex-container-change-api-container .change-api-container #change-API-button { - height: 4vh; - width: 20vw; - margin-bottom: 1vh; - border: none; - outline: none; - border: #969696 solid 1px; -} - -.loading-container { - width: 100%; - height: 83vh; - display: flex; - justify-content: center; - 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; - position: absolute; - top: 10.5vh; - left: 87vw; - background-color: #1FAB89; - display: flex; - justify-content: center; - align-items: center; - border-radius: 100%; -} -.go-to-account .go-to-account-text { - font-family: "Raleway", sans-serif; - font-weight: 700; - font-size: 1vw; - text-decoration: none; - user-select: none; - color: #ffffff; -} - -.close-session { - width: 7vw; - height: 3vw; - position: absolute; - top: 10.5vh; - left: 91vw; - background-color: #1FAB89; - display: flex; - justify-content: center; - align-items: center; - border-radius: 5%; -} -.close-session .close-session-text { - font-family: "Raleway", sans-serif; - font-weight: 700; - font-size: 1vw; - text-decoration: 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; - } -} -.go-to-account.dark-mode-component, .close-session.dark-mode-component { - background-color: #3A4750; -} - -.clockify-tasks-display { - width: 20vw; - position: absolute; - top: 60vh; - left: 2.5vw; -} -.clockify-tasks-display.loading-container { - width: 20vw; - height: auto; - background: none; -} -.clockify-tasks-display.disabled { - user-select: none; - cursor: initial; - pointer-events: none; - opacity: 30%; -} -.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector { - width: 15vw; - height: 3vw; -} -.clockify-tasks-display .workspace-selector.disabled, .clockify-tasks-display .project-selector.disabled { - user-select: none; - cursor: initial; - pointer-events: none; - opacity: 30%; -} -.clockify-tasks-display select { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.clockify-tasks-display input[type=text] { - width: 15vw; - height: 3vw; - font-family: "Rambla", sans-serif; - font-size: 12pt; - outline: none; - padding: 1px 2px; - box-sizing: border-box; -} -.clockify-tasks-display input[type=text].disabled { - user-select: none; - cursor: initial; - pointer-events: none; - opacity: 30%; -} - -@media (max-width: 991.98px) { - .clockify-tasks-display { - position: initial; - width: auto; - display: flex; - justify-content: space-around; - padding: 3vh 5vw; - } - .clockify-tasks-display.loading-container { - width: 90%; - height: auto; - } - .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { - width: 20vw; - height: 5vw; - } -} -@media (max-width: 576px) { - .clockify-tasks-display { - position: initial; - width: auto; - display: flex; - flex-direction: column; - align-items: center; - } - .clockify-tasks-display.loading-container { - width: 90%; - height: auto; - } - .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { - width: 70%; - height: 4vh; - margin-top: 1vh; - } -} -.clockify-tasks-display-container.dark-mode-container { - background-color: #3A4750; -} - -.made-with-love a { - color: #ff8787; -} - -.made-with-love { - color: #b9b9b9; - margin-top: auto; - width: 100%; - 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; -} - -body { - height: 100%; - background-color: #ffffff; -} - -/*# sourceMappingURL=styles.css.map */ diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map deleted file mode 100644 index 9f5de15..0000000 --- a/public/css_styles/styles.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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":"AACA;EACI,kBCsCS;EDpCT;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;EAEA;ECxBJ;EACA;EAQA;EACA;EACA;;ADmBA;EC9BA;EACA;EDgCI,OCcc;;;ADXtB;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EC3CA;;AD+CA;EACI;EAEA;EAEA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;EACI;IACI;IACA;IAEA;;EAEA;IACI;;EAGJ;IACI;;;EAIR;IACI;IACA;;EAEA;IACI;IACA;IACA;;EAGJ;IACI;IACA;IACA;;;AAKZ;EACI,kBCjFc;EDkFd;;;AAGJ;EACI,kBCrFgB;;;AC/CpB;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;;;AAOZ;EACI;;;AAIJ;EACI;IACI;IAEA;IAEA;;EAEA;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;;;AAMhB;EAGQ;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;IACA;;;AAMhB;EACI;EACA,kBDxDc;;;AE9ClB;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AAKR;EAEI;IAEI;;EAEA;IACI;;EAGJ;IACI;;;AAKZ;EAEI,kBFxCc;;AE4CV;EAEI;;AAKA;EAEI;;AAIR;EACI,kBFtDU;;;AGlDtB;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDd;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;IACI;IAEA;IAEA;IAEA;IACA;IAEA;;EAEA;IACI;IAEA;;EAIJ;IAEI;IAEA;IAEA;;EAEA;IACI;IACA;IAEA;;;AAMhB;EAEI;IAWI;;EATA;IACI;IAEA;;EAEA;IACI;;;AAQhB;EAMY;IACI;;;AAWR;EACI;;AAUQ;EAEI;;AAGJ;EACI,OHpJF;;AGyJV;EAEI;;AAGJ;EAEI,kBHhKM;;;AIlDtB;EACI;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;AAMZ;EAEI;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;;;AAIR;EACI,kBJSc;;;AINlB;EAEI,kBJIc;;;AIDlB;EAEI;;;AC/CJ;EACI;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEI;;AAEA;EACI;ELbR;EACA;EAQA;EACA;EACA;EKOQ;;AAEA;EACI;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAEA;EAEI;;AAEA;EL7BZ;EACA;EACA;EANA;EKoCgB;;AAGJ;EL7BZ;EACA;EAXA;EK0CgB;EACA;EACA;;;AAOpB;EACI;;;AAGJ;EACI;IACI;IAEA;;;AAIR;EAEI,kBL1BgB;EK4BhB;;AAEA;EAEI;;AAQY;EACI,OLtCF;;;AMlDtB;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,OPED;EODC,kBPGF;;;AOId;EAEI;IAEI;IACA;;;AAOA;EAEI;;AAEA;EAEI,OPfM;EOgBN,YPnBI;;;AQ/CpB;EACI;;;AAGJ;EAKI;EACA;EACA;EAEA;;AAPA;EACI;;AAQJ;EACI;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;ERvBR;EACA;EQyBQ;EAEA;;AAOR;EAEI,kBRIS;;AQFT;EAEI;;AAIR;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRpBD;EQsBC;EAEA;;AAEA;ERhEZ;EACA;EAQA;EACA;EACA;EQyDgB;;AAIR;EACI;EACA,kBRnCM;;AQuCd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;AASpB;EACI;EACA;EAEA;EACA;EACA;;AAEA;EACI,kBRlFU;;;AQsFlB;EACI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA,kBRxGS;;;AQ4Gb;EAEG,kBRvGiB;;AQ6GZ;EACI,kBR7GO;;AQgHX;EACI,kBRhHc;;AQyHd;EAEI;EAEA;;AAGJ;EACI,kBRpIE;;;AS9ClB;EAEI;EAEA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT2BS;ES1BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTGS;;ASAb;EACI;;;AAIR;EAEI;IACI;;EACA;IACI;IACA;;EAGJ;IACI;IACA;;;AAMZ;EACI;IAWI;;EAVA;IACI;IACA;;EAGJ;IACI;IACA;;;AC3EZ;EACI;;;AAGJ;EAEI;;AAEA;EACI;EAEA;;AAEA;EVVJ;EACA;EAQA;EACA;EACA;EUGQ;EACA;;AAIR;EACI;;AAEA;EAAI;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA,kBVCE;;AUCF;EVhCR;EACA;EACA;EAXA;EACA;EU6CY,OVRD;EUUC;;AAIR;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;EACA,kBVhDC;EUkDD;EACA;EAEA;EAEA;EAEA;;AAKI;EV9FhB;EACA;EACA;EAXA;EACA;;AU2GgB;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA;;;AAOpB;EACI;EACA;EAEA;EACA;EACA;;;AAIJ;EAIQ;IAEI;;EAKI;IACI;;EAGJ;IACI;;EAKJ;IACI;;;AAOpB;EACI,kBV7HgB;;AUiIZ;EACI,kBV/HU;;AUiIV;EACI;;AAEA;EACI,OV3IH;;AU6ID;EACI,OV/IN;;AUwJF;EAEI,kBVnJM;;AUuJF;EACI;;;AAQxB;EACI,kBVpKgB;;;AW/CpB;EAEI;EACA;EAEA;EAEA;EACA;EAEA,kBX+BW;EW7BX;EACA;EACA;EAEA;;AAEA;EXfA;EACA;EWkBI;EACA;EACA;EAEA;;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA,kBXEW;EWAX;EACA;EACA;EAEA;;AAEA;EX5CA;EACA;EW8CI;EAEA;EAEA;EAEA;;;AAKR;EAEI;IACG;IACA;;;EAIH;IAOI;IACA;;EANA;IACI;;;EAUJ;IACI;;;AAKZ;EACI;IACI;IACA;;;EAGJ;IACI;IACA;;;AAKR;EACI,kBXvDgB;;;AY/CpB;EAEI;EACA;EAEA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EZjCJ;EYqCI;EAEA;EACA;EAEA;;AAEA;EACI;EACA;EACA;EACA;;;AAKZ;EAEI;IACI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;;;AAMZ;EAEI;IACI;IACA;IAEA;IACA;IACA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;IACA;;;AAKZ;EAEI,kBZ/DgB;;;Aa/CpB;EACI;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAGJ;EAEE,kBb4BgB;;;AAsBlB;EACI;EACA;;;AAGJ;EACI;EACA,kBAtCe","file":"styles.css"} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 4194b35..5b1ef86 100644 --- a/public/index.html +++ b/public/index.html @@ -1,15 +1,10 @@ - - - - - diff --git a/public/sass_styles/_banner-login.scss b/public/sass_styles/_banner-login.scss deleted file mode 100644 index 66e944c..0000000 --- a/public/sass_styles/_banner-login.scss +++ /dev/null @@ -1,104 +0,0 @@ -.banner-login { - background-color: #D17262; - color: white; - - @include bodyFont(); - - display: flex; - align-items: center; - justify-content: space-between; - - padding: 0px 5vw; - - height: 8vh; - - - p { - @include normalizeBody(); - } - - .button-container { - - width: 20vw; - - display: flex; - justify-content: space-around; - - button { - @include normalizeButton(); - - 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; - - height: auto; - - padding: 2vh 2vw; - - p { - width: 33.3%; - } - - .button-container { - width: 66.6%; - - justify-content: space-around; - - button { - width: 30%; - } - } - } -} - -@media (max-width: 576px) { - .banner-login { - - p { - width: 50%; - } - - .button-container { - width: 50%; - - flex-direction: column; - - button { - width: 75%; - margin: 10px; - } - } - } -} - -.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/_goToAccount.scss b/public/sass_styles/_goToAccount.scss deleted file mode 100644 index 9a3b985..0000000 --- a/public/sass_styles/_goToAccount.scss +++ /dev/null @@ -1,104 +0,0 @@ -.go-to-account { - - width: 3vw; - height: 3vw; - - position: absolute; - - top: 10.5vh; - left: 87vw; - - background-color: $second-color; - - display: flex; - justify-content: center; - align-items: center; - - border-radius: 100%; - - .go-to-account-text { - - @include titleFont(); - - font-size: 1vw; - text-decoration: none; - user-select: none; - - color: #ffffff; - } -} - -.close-session { - width: 7vw; - height: 3vw; - - position: absolute; - - top: 10.5vh; - left: 91vw; - - background-color: $second-color; - - display: flex; - justify-content: center; - align-items: center; - - border-radius: 5%; - - .close-session-text { - - @include titleFont(); - font-size: 1vw; - - text-decoration: none; - - user-select: none; - - color: #ffffff; - } -} - - -@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; - - } -} - -.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 deleted file mode 100644 index fec432a..0000000 --- a/public/sass_styles/_header.scss +++ /dev/null @@ -1,134 +0,0 @@ - -.header-main-page { - background-color: $main-color; - - display: flex; - flex-direction: column; - // align-items: center; - justify-content: center; - - height: 14vh; - padding: 0vh 1vw; - - box-sizing: border-box; - - a { - text-decoration: none; - } - - .title-link { - width: fit-content; - } - - h1 { - color: #ffffff; - - font-size: 3vw; - - display: inline; - - @include titleFont(); - @include normalizeTitle(); - } - - .konami-code { - @include titleFont(); - - color: $lightest-color-dark; - } -} -.notification-select { - - background-color: $second-color; - height: 3vh; - - display: flex; - align-items: flex-end; - - padding-left: 1vw; - - box-sizing: border-box; - - color: #fff; - - @include bodyFont(); - - p { - display: inline-block; - - align-self: center; - - 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; - padding: 3vw 0px; - - align-items: center; - - h1 { - font-size: 26pt; - } - - h3 { - font-size: 13pt; - } - } - - .notification-select { - height: auto; - flex-wrap: wrap; - - p { - width: 100%; - margin-top: 1vh; - margin-bottom: 1vh; - } - - button { - height: 30px; - width: 20%; - margin-bottom: 1vh; - } - } -} - -.header-main-page.dark-mode-component { - background-color: $main-color-dark; - border-bottom: 1px solid #ffffff72; -} - -.notification-select.dark-mode-component { - background-color: $second-color-dark; -} \ No newline at end of file diff --git a/public/sass_styles/_historyButton.scss b/public/sass_styles/_historyButton.scss deleted file mode 100644 index 9ba8a72..0000000 --- a/public/sass_styles/_historyButton.scss +++ /dev/null @@ -1,49 +0,0 @@ -.history-button { - @include normalizeButton; - - height: 9vh; - width: 9vh; - - padding: 0; - - display: flex; - justify-content: center; - align-items: center; - - position: absolute; - left: 6vh; - - border-radius: 100%; - - background-color: $light-color; - - svg { - @include svgStyle; - - path { - fill: rgba(80, 80, 80, 0.556); - } - - width: 6vh; - height: 6vh; - - } - - &:hover { - animation: spin 0.4s ease-in-out; - -} - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - - - 100% { - transform: rotate(360deg); - } - } - - -} \ No newline at end of file diff --git a/public/sass_styles/_made-with-love.scss b/public/sass_styles/_made-with-love.scss deleted file mode 100644 index 10d9cbd..0000000 --- a/public/sass_styles/_made-with-love.scss +++ /dev/null @@ -1,20 +0,0 @@ -.made-with-love a { - color: #ff8787 - } - - .made-with-love { - color:rgb(185, 185, 185); - margin-top: auto; - width: 100%; - - padding-top: 5vh; - padding-bottom: 5vh; - padding-left: 3vw; - - box-sizing: border-box; - } - -.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 deleted file mode 100644 index e2bf429..0000000 --- a/public/sass_styles/_mainPomodoro.scss +++ /dev/null @@ -1,109 +0,0 @@ -.main-pomodoro { - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - height: 68vh; - - .timer { - - display: flex; - justify-content: center; - - @include bodyFont; - font-weight: bold; - font-size: 130pt; - - color: $second-color; - } - - .style-display { - - display: flex; - align-items: center; - flex-direction: column; - - @include bodyFont; - - h4 { - font-size: 24pt; - - @include normalizeBody; - - color: $second-color; - user-select: none; - - } - - h3 { - font-size: 30pt; - - @include normalizeBody; - - color: $second-color; - - cursor: pointer; - user-select: none; - } - } - - .start-pomodoro { - @include normalizeButton; - @include titleFont; - - margin-top: 6vh; - width: 30vw; - height: 8vh; - - background: $second-color; - border-radius: 24px; - - font-size: 5vh; - color: white; - } -} - - -@media (max-width: 576px) { - - .main-pomodoro { - - height: auto; - - .timer { - font-size: 80pt; - } - - .start-pomodoro { - 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 deleted file mode 100644 index 8f904d2..0000000 --- a/public/sass_styles/_pomodoro-counter.scss +++ /dev/null @@ -1,71 +0,0 @@ -.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; - } - } - } -} - - -@media (max-width: 991.98px) { - - .pomodoro-counter { - - 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/styles.scss b/public/sass_styles/styles.scss deleted file mode 100644 index a9e07e8..0000000 --- a/public/sass_styles/styles.scss +++ /dev/null @@ -1,77 +0,0 @@ - - -@mixin titleFont { - font-family: 'Raleway', sans-serif; - font-weight: 700; -} - -@mixin bodyFont { - font-family: 'Rambla', sans-serif; -} - -@mixin normalizeTitle { - margin: 0; - padding: 0; - user-select: none; -} - -@mixin normalizeBody { - margin: 0; - padding: 0; -} - -@mixin normalizeButton { - background: none; - border: none; - width: 8vw; -} - -@mixin svgStyle { - cursor: pointer; - - path { - fill: rgb(170, 170, 170); - // CREDITS TO https://stackoverflow.com/a/49627345 - } -} - -$background-color: #ffffff; -$border-color: #969696; - -$main-color: #62D2A2; -$second-color: #1FAB89; -$second-color-darker: #15745c; -$light-color: #9DF3C4; -$lightest-color: #D7FBE8; - -$main-color-dark: #303841; -$second-color-dark: #3A4750; -$light-color-dark: #D72323; -$light-color-dark-darker: #7c1414; -$lightest-color-dark: #4c8ad5; -$lightest-color-dark-darker: #eff3f8; - -@import 'header'; -@import 'banner-login'; -@import 'mainPomodoro'; -@import 'styleSelector'; -@import 'goDownArrow'; -@import 'aboutThis'; -@import 'historyButton'; -@import 'pomodoro-counter'; -@import 'identify'; -@import 'dark-mode_toogle-switch'; -@import 'account'; -@import 'goToAccount'; -@import 'clockify-tasks-display'; -@import 'made-with-love'; - -html, body { - margin: 0; - padding: 0; -} - -body { - height: 100%; - background-color: $background-color; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 0474202..55cfc32 100644 --- a/src/App.js +++ b/src/App.js @@ -1,33 +1,24 @@ -import { getAuth, onAuthStateChanged } from 'firebase/auth'; +import './styles.css' + import React, { useState } from 'react'; +import { getAuth, onAuthStateChanged } from 'firebase/auth'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import AboutThis from "./components/AboutThis"; -import Account from "./components/Account"; -import BannerLogin from "./components/BannerLogin"; -import ClockifyTasksDisplay from './components/ClockifyTasksDisplay'; -import Credits from './components/Credits'; -import Footer from './components/Footer'; -import GoDownArrow from "./components/GoDownArrow"; -import Header from "./components/Header"; -import Identify from "./components/Identify"; -import MainPomodoro from "./components/MainPomodoro"; + +//Pages +import ConfigAccount from "./pages/ConfigAccount/ConfigAccount"; +import Identify from "./pages/Identify/Identify"; +import Main from './pages/Main/Main'; +import AboutThis from "./pages/AboutThis/AboutThis"; +import Credits from './pages/Credits/Credits'; + +import Footer from './components/Footer/Footer'; +import Header from "./components/Header/Header"; function App() { - const [timerOn, setTimerOn] = useState(false) - - const [signIn, setSignIn] = useState('') - - const [apiKey, setApiKey] = useState('') - const [taskName, setTaskName] = useState('') - - const [workspaceID, setWorspaceID] = useState(0) - const [projectID, setProjectID] = useState(0) - + const [signedIn, setSignedIn] = useState('') const [darkMode, setDarkmode] = useState(false) - - const [KonamiCodeActive, setKonamiCodeActive] = useState(false) - + const [konamiCodeActive, setKonamiCodeActive] = useState(false) const [notificationPermission, setNotificationPermission] = useState(undefined) const auth = getAuth() @@ -35,9 +26,9 @@ function App() { onAuthStateChanged(auth, (user) => { if (user) { - setSignIn(true) + setSignedIn(true) } else { - setSignIn(false) + setSignedIn(false) } }) @@ -64,105 +55,43 @@ function App() { <>
- - - - - + - - - - - - - - - + /> diff --git a/src/components/Firebase/firebase.js b/src/Firebase/firebase.js similarity index 100% rename from src/components/Firebase/firebase.js rename to src/Firebase/firebase.js diff --git a/src/components/Account Childrens/Message.jsx b/src/components/Account Childrens/Message.jsx deleted file mode 100644 index e50ecbc..0000000 --- a/src/components/Account Childrens/Message.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' - -const Message = (props) => { - - const [message, setMessage] = React.useState('') - - React.useEffect( () => { - switch (props.message) { - case 'API NOT VALID': - setMessage('The API is not valid') - break; - - case 'API NOT UPLOADED': - setMessage(`There's been an error while we upload your API Key. Please try again`) - break; - - case 'API UPLOADED': - setMessage(`API uploaded successfully`) - break; - default: - setMessage('') - break; - } - - }, []) - - return ( -
-

{message}

-
- ) -} - -export default Message diff --git a/src/components/BannerLogin.jsx b/src/components/BannerLogin.jsx deleted file mode 100644 index 64c6585..0000000 --- a/src/components/BannerLogin.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' - -const BannerLogin = (props) => { - - - - return ( - <> - { - !props.signIn ? - -
-

Access to integrate and save your progress with Clockify!

-
- - -
-
- :
- -
- } - - ) -} - -export default BannerLogin diff --git a/src/components/Clockify Tasks Hours Counter/ClockifyTasksHoursCounter.jsx b/src/components/Clockify Tasks Hours Counter/ClockifyTasksHoursCounter.jsx deleted file mode 100644 index 33af9fc..0000000 --- a/src/components/Clockify Tasks Hours Counter/ClockifyTasksHoursCounter.jsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, {useState} from 'react' -import { makeRequest } from '../Clockify/clockify' - -import { getFirestore, doc, getDoc } from 'firebase/firestore' -import { onAuthStateChanged, getAuth } from 'firebase/auth' - -import { firebase } from '../Firebase/firebase' -import { withRouter } from 'react-router-dom' - -const ClockifyTasksHoursCounter = (props) => { - - const auth = getAuth() - - const [userUID, setUserUID] = useState('') - - const [workspacesArray, setWorkspacesArray] = useState([]) - - const [loading, setLoading] = useState(true) - - const getApiKey = async () => { - - try { - - const db = await getFirestore(firebase) - - const reference = await doc(db, 'users', userUID) - - const dataSnap = await getDoc(reference) - const result = await dataSnap.data() - - return result.keyClockify - - - } catch (error) { - - } - } - - const makeRequestWorkspaces = async (apiClockify) => { - - try { - const request = { - method: "GET", - headers: { - 'X-Api-Key': apiClockify, - "content-type": "application/json" - } - } - const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request) - const data = await response.json() - - return await data - - } catch (error) { - - } - } - - const bringData = async () => { - - await makeRequest(props.apiKey) - } - - React.useEffect( () => { - - if (props.signIn) { - - onAuthStateChanged(auth, async (user) => { - - if (user) { - - setUserUID(await user.uid) - - if (userUID) { - - const keyClockify = await getApiKey() - - const workspaces = await makeRequestWorkspaces(keyClockify) - - workspaces.forEach(workspace => { - - let copyWorkspacesArray = workspacesArray - copyWorkspacesArray.push(workspace) - - setWorkspacesArray(copyWorkspacesArray) - }) - - setLoading(false) - } - } else { - - return (<>) - } - - }) - } else { - - props.history.push('/') - } - - }, [props, onAuthStateChanged, setUserUID, userUID]) - - - return ( - <> - { - loading ? -

Loading

- : -
- -
- } - - ) -} - -export default withRouter(ClockifyTasksHoursCounter) diff --git a/src/components/Clockify/clockify.js b/src/components/Clockify/clockify.js deleted file mode 100644 index c4bebdc..0000000 --- a/src/components/Clockify/clockify.js +++ /dev/null @@ -1,19 +0,0 @@ -const makeRequest = async (apiKey) => { - try { - const request = { - method: "GET", - headers: { - 'X-Api-Key': apiKey.trim(), - "content-type": "application/json" - } - } - const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request) - const data = await response.json() - - return await data - - } catch (error) { - } -} - -export {makeRequest} \ No newline at end of file diff --git a/src/components/Clockify/uploadToClockifyTimer.js b/src/components/Clockify/uploadToClockifyTimer.js deleted file mode 100644 index d3db160..0000000 --- a/src/components/Clockify/uploadToClockifyTimer.js +++ /dev/null @@ -1,35 +0,0 @@ -const uploadToClockifyTimer = async (workspaceID, projectID, start, end, apiKey, taskName) => { - - if (!workspaceID && !projectID) { - return - } - - try { - const url = `https://api.clockify.me/api/v1/workspaces/${workspaceID}/time-entries` - - const body = { - start: start, - end: end, - projectId: projectID, - description: taskName - } - - const headers = { - 'X-Api-Key': apiKey, - 'Content-type' : 'application/json; charset=UTF-8' - } - - const request = { - method: 'POST', - body: JSON.stringify(body), - headers - } - - const result = await fetch(url, request) - const data = await result.json() - - } catch (error) { - } -} - -export default uploadToClockifyTimer diff --git a/src/components/ClockifyTasksDisplay.jsx b/src/components/ClockifyTasksDisplay.jsx deleted file mode 100644 index c4a8a74..0000000 --- a/src/components/ClockifyTasksDisplay.jsx +++ /dev/null @@ -1,237 +0,0 @@ -import { getAuth, onAuthStateChanged } from "firebase/auth"; -import { doc, getDoc, getFirestore } from "firebase/firestore"; -import React, { useState } from 'react'; -import { firebase } from './Firebase/firebase'; -import loadingGifDarkTheme from './img/loading-dark-theme.png'; -import loadingGifLightTheme from './img/loading-light-theme.png'; - -const ClockifyTasksDisplay = (props) => { - - const auth = getAuth() - - const [userUID, setUserUID] = useState('') - - const [workspaces, setWorkspaces] = useState([]) - const [workspacesReady, setWorkspacesReady] = useState(false) - - const [projects, setProjects] = useState([]) - const [projectsDone, setProjectsDone] = useState(false) - - const [loading, setLoading] = useState(true) - const [apiAvailable, setApiAvailable] = useState(false) - - const getApiKey = async () => { - - try { - - const db = await getFirestore(firebase) - - const reference = await doc(db, 'users', userUID) - - - const dataSnap = await getDoc(reference) - const result = await dataSnap.data() - - if (result.keyClockify) { - - setApiAvailable(true) - await generateArrayOfWorkspaces(result.keyClockify) - } - - - } catch (error) { - - } - } - - const makeRequestWorkspaces = async (apiClockify) => { - try { - const request = { - method: "GET", - headers: { - 'X-Api-Key': apiClockify, - "content-type": "application/json" - } - } - const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request) - const data = await response.json() - - props.setApiKey(apiClockify) - - return await data - - } catch (error) { - - } - } - - const generateArrayOfWorkspaces = async (key) => { - - const getApiKeyReturn = key - - - const data = await makeRequestWorkspaces(key) - - if (data.code !== 1000) { - let workspacesCopy = [] - - await data.forEach(workspace => { - - workspacesCopy.push(workspace) - - }); - - await setWorkspaces(workspacesCopy) - - setWorkspacesReady(true) - setLoading(false) - - } - - } - - React.useEffect( () => { - - if (props.signIn) { - - onAuthStateChanged(auth, async (user) => { - - if (user) { - - setUserUID(await user.uid) - - if (userUID) { - - await getApiKey() - } - } else { - return (<>) - } - - }) - } - - }, [props, onAuthStateChanged, setUserUID, userUID]) - - const makeRequestProjects = async (e) => { - - try { - const request = { - method: "GET", - headers: { - 'X-Api-Key': props.apiKey, - "content-type": "application/json" - } - } - const response = await fetch(`https://api.clockify.me/api/v1/workspaces/${e}/projects`, request) - const data = await response.json() - - - - return await data - - } catch (error) { - - } - } - - const defineProjects = async (e) => { - - if (e === 0) { - setProjectsDone(false) - setProjects([]) - - } else { - setProjectsDone(true) - } - - props.setWorspaceID(e) - - const data = await makeRequestProjects(e) - - await setProjects(data) - - if (projects) { - - - setProjectsDone(true) - } - - } - - const selectProject = (e) => { - - props.setProjectID(e) - } - - if (loading && userUID) { - - - if (!apiAvailable) { - return (
) - - } else { - - return ( -
- -
- ) - } - - } - - - return ( -
- { - userUID ? -
- - - {props.setTaskName(e.target.value)}} - value={props.taskName} - placeholder="Add task description" - className={props.projectID !== 0 ? null: 'disabled'} - - onKeyPress={event => { - - if (event.key === 'Enter') { - - props.setTimerOn(true) - } - }} - /> -
- : null - } -
- - ) -} - -export default ClockifyTasksDisplay diff --git a/src/components/Footer.jsx b/src/components/Footer/Footer.jsx similarity index 74% rename from src/components/Footer.jsx rename to src/components/Footer/Footer.jsx index 971572f..0763e2a 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,9 +1,11 @@ +import './footer-styles.css' + import React from 'react' const Footer = (props) => { return ( ) } diff --git a/src/components/Footer/footer-styles.css b/src/components/Footer/footer-styles.css new file mode 100644 index 0000000..2345ca0 --- /dev/null +++ b/src/components/Footer/footer-styles.css @@ -0,0 +1,13 @@ +.made-with-love { + margin-top: auto; + width: 100%; + padding-top: 5vh; + padding-bottom: 5vh; + padding-left: 3vw; + box-sizing: border-box; + background-color: var(--main-background-color); + color: rgb(185, 185, 185); +} +.made-with-love a { + color: #ff8787; +}/*# sourceMappingURL=footer-styles.css.map */ \ No newline at end of file diff --git a/src/components/Footer/footer-styles.css.map b/src/components/Footer/footer-styles.css.map new file mode 100644 index 0000000..431f214 --- /dev/null +++ b/src/components/Footer/footer-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["footer-styles.scss","footer-styles.css"],"names":[],"mappings":"AAAA;EAEE,gBAAA;EACA,WAAA;EAEA,gBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,sBAAA;EAEA,8CAAA;EACA,yBAAA;ACHF;ADKE;EACE,cAAA;ACHJ","file":"footer-styles.css"} \ No newline at end of file diff --git a/src/components/Footer/footer-styles.scss b/src/components/Footer/footer-styles.scss new file mode 100644 index 0000000..6f825a1 --- /dev/null +++ b/src/components/Footer/footer-styles.scss @@ -0,0 +1,18 @@ +.made-with-love { + + margin-top: auto; + width: 100%; + + padding-top: 5vh; + padding-bottom: 5vh; + padding-left: 3vw; + + box-sizing: border-box; + + background-color: var(--main-background-color); + color:rgb(185, 185, 185); + + a { + color: #ff8787 + } +} \ No newline at end of file diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow/GoDownArrow.jsx similarity index 89% rename from src/components/GoDownArrow.jsx rename to src/components/GoDownArrow/GoDownArrow.jsx index 2ca21b4..45b5583 100644 --- a/src/components/GoDownArrow.jsx +++ b/src/components/GoDownArrow/GoDownArrow.jsx @@ -1,17 +1,19 @@ +import './go-down-arrow-styles.css' + import React from 'react' import { Link, animateScroll as scroll } from "react-scroll"; const GoDownArrow = (props) => { - const width = window.screen.width + const width = window.screen.width - if (width <= '991.98') { - return ( -
-
-
- ) - } + if (width <= '991.98') { + return ( +
+
+
+ ) + } return (
diff --git a/src/components/GoDownArrow/go-down-arrow-styles.css b/src/components/GoDownArrow/go-down-arrow-styles.css new file mode 100644 index 0000000..adaf6bf --- /dev/null +++ b/src/components/GoDownArrow/go-down-arrow-styles.css @@ -0,0 +1,26 @@ +.go-down { + background-color: var(--main-background-color); + height: 8vh; + display: flex; + justify-content: center; +} +.go-down svg { + height: 6vh; + width: 6vh; + cursor: pointer; +} +.go-down svg path { + fill: rgb(170, 170, 170); +} + +.go-down-separator-line { + width: 100%; + display: flex; + justify-content: center; +} +.go-down-separator-line hr { + height: 1px; + width: 75%; + border: none; + border-top: 1px solid rgb(184, 184, 184); +}/*# sourceMappingURL=go-down-arrow-styles.css.map */ \ No newline at end of file diff --git a/src/components/GoDownArrow/go-down-arrow-styles.css.map b/src/components/GoDownArrow/go-down-arrow-styles.css.map new file mode 100644 index 0000000..8bad1aa --- /dev/null +++ b/src/components/GoDownArrow/go-down-arrow-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["go-down-arrow-styles.scss","go-down-arrow-styles.css"],"names":[],"mappings":"AAAA;EAEI,8CAAA;EACA,WAAA;EAEA,aAAA;EACA,uBAAA;ACDJ;ADGI;EACI,WAAA;EACA,UAAA;EAEA,eAAA;ACFR;ADIQ;EACI,wBAAA;ACFZ;;ADQA;EAEI,WAAA;EAEA,aAAA;EACA,uBAAA;ACPJ;ADSI;EACI,WAAA;EACA,UAAA;EAEA,YAAA;EACA,wCAAA;ACRR","file":"go-down-arrow-styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_goDownArrow.scss b/src/components/GoDownArrow/go-down-arrow-styles.scss similarity index 67% rename from public/sass_styles/_goDownArrow.scss rename to src/components/GoDownArrow/go-down-arrow-styles.scss index 4705883..7724c1a 100644 --- a/public/sass_styles/_goDownArrow.scss +++ b/src/components/GoDownArrow/go-down-arrow-styles.scss @@ -1,9 +1,10 @@ .go-down { + + background-color: var(--main-background-color); height: 8vh; display: flex; justify-content: center; - svg { height: 6vh; @@ -32,18 +33,4 @@ 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/src/components/Header Childrens/DarkMode.jsx b/src/components/Header Childrens/DarkMode.jsx deleted file mode 100644 index cc6e5fc..0000000 --- a/src/components/Header Childrens/DarkMode.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -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') - - 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 ( -
- - -
- ) -} - -export default DarkMode diff --git a/src/components/Header Childrens/GoToAccount.jsx b/src/components/Header Childrens/GoToAccount.jsx deleted file mode 100644 index 5fffd70..0000000 --- a/src/components/Header Childrens/GoToAccount.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -const GoToAccount = (props) => { - return ( - <> - { - props.signIn ? - <> - -
API
- - -
Close session
- - - : null - } - - ) -} - -export default GoToAccount diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index 6ca32da..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' -import DarkMode from './Header Childrens/DarkMode' -import GoToAccount from './Header Childrens/GoToAccount' - -const Header = (props) => { - - const getPermisionDesktopNotification = async () => { - - let permission = await Notification.requestPermission(); - - if (permission === 'granted') { - props.setNotificationPermission(true) - localStorage.setItem("notification-permission", true) - } else { - props.setNotificationPermission(false) - localStorage.setItem("notification-permission", false) - } - } - - return ( - <> -
- -

Clockify Pomodoro Timer

- - - -
- {props.KonamiCodeActive ? 'Konami Code ON' : null} -
-
- { - props.notificationPermission === undefined || process.env.REACT_APP_ENVIROMENT !== "production" ? -
-

Do you want to recibe a notification when a Pomodoro cicle ends?

- - -
- : null - } - - ) -} - -export default React.memo(Header) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 0000000..4728864 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,72 @@ +import './header-styles.css' + +import React from 'react' +import ThemeSwitch from './ThemeSwitch/ThemeSwitch' + +const Header = (props) => { + + const getPermisionDesktopNotification = async () => { + let permission = await Notification.requestPermission(); + + if (permission === 'granted') { + props.setNotificationPermission(true) + localStorage.setItem("notification-permission", true) + } else { + props.setNotificationPermission(false) + localStorage.setItem("notification-permission", false) + } + } + + return ( +
+

Clockify Pomodoro Timer

+
+ { + props.signedIn ? + <> + +
API
+ + +
Close session
+ + + : null + } + +
+
+ {props.KonamiCodeActive ? 'Konami Code ON' : null} +
+ { + props.notificationPermission === undefined || process.env.REACT_APP_ENVIROMENT !== "production" ? +
+

Do you want to recibe a notification when a Pomodoro cicle ends?

+ + +
+ : null + } + { + !props.signedIn ? +
+

Access to integrate and save your progress with Clockify!

+
+ + +
+
+ : null + } +
+ + ) +} + +export default React.memo(Header) diff --git a/src/components/Header/ThemeSwitch/ThemeSwitch.jsx b/src/components/Header/ThemeSwitch/ThemeSwitch.jsx new file mode 100644 index 0000000..f792548 --- /dev/null +++ b/src/components/Header/ThemeSwitch/ThemeSwitch.jsx @@ -0,0 +1,102 @@ +import './theme-switch-styles.css' + +import React from 'react' + +const ThemeSwitch = () => { + + React.useEffect( () => { + + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + changeTheme({theme: "dark"}) + + const darkModeSwitch = document.getElementById('theme-switch_toogle-switch') + darkModeSwitch.checked = true + } + + if (localStorage.getItem('dark-mode') === 'true') { + changeTheme({theme: "dark"}) + + const darkModeSwitch = document.getElementById('theme-switch_toogle-switch') + darkModeSwitch.checked = true + + } else { + changeTheme({theme: "white"}) + } + + }, []) + + function changeTheme(options) { + let data + let theme + + if (options.e) { + theme = options.e.target.checked ? "dark" : "white" + localStorage.setItem('dark-mode', options.e.target.checked ? "true" : "false") + } + + if (options.theme) { + theme = options.theme + localStorage.setItem('dark-mode', options.theme === "dark" ? "true" : "false") + } + + switch (theme) { + case "white": + data = [ + ["--main-text-color", "#1FAB89"], + ["--second-text-color", "#2c2c2c"], + ["--third-text-color", "#8d8d8d"], + ["--pomodoro-counter-text-color", "#8d8d8d"], + + ["--main-background-color", "#fff",], + ["--second-background-color", "#fff"], + + ["--main-color", "#62D2A2"], + ["--second-color", "#1FAB89"], + + ["--light-color", "#9DF3C4"], + ["--light-color-darker", "#3c8f61"], + + ["--lightest-color", "#D7FBE8"], + ["--lightest-color-darker", "#b2e9cb"] + ] + break; + + case "dark": + data = [ + ["--main-text-color", "#fff"], + ["--second-text-color", "#fff"], + ["--third-text-color", "#4c8ad5"], + ["--pomodoro-counter-text-color", "#fff"], + + ['--main-background-color', "#303841"], + ['--second-background-color', "#3A4750"], + + ['--main-color', '#303841'], + ["--second-color", "#3A4750"], + + ["--light-color", "#D72323"], + ["--light-color-darker", "#7c1414"], + + ["--lightest-color", "#4c8ad5"], + ["--lightest-color-darker", "#2f5686"] + ] + break; + + default: + break; + } + + data.forEach((variable) => { + document.body.style.setProperty(variable[0], variable[1]); + }) + } + + return ( +
+ changeTheme({e})}/> + +
+ ) +} + +export default ThemeSwitch diff --git a/src/components/Header/ThemeSwitch/theme-switch-styles.css b/src/components/Header/ThemeSwitch/theme-switch-styles.css new file mode 100644 index 0000000..16e1542 --- /dev/null +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.css @@ -0,0 +1,65 @@ +.theme-switch { + display: flex; +} +.theme-switch #theme-switch_toogle-switch { + width: 0; + height: 0; + visibility: hidden; +} +.theme-switch label { + display: block; + width: 4vw; + height: 4vh; + background-color: var(--lightest-color); + border-radius: 100px; + position: relative; + cursor: pointer; + transition: 0.5s; + box-shadow: 0 0 20px rgba(71, 122, 133, 0.3137254902); +} +.theme-switch label::after { + content: ""; + width: 3.5vh; + height: 3.5vh; + background-color: #b632eb; + position: absolute; + border-radius: 100%; + top: 0.25vh; + left: 0.25vh; + transition: 0.5s; +} +.theme-switch input:checked + label:after { + left: calc(100% - 0.25vh); + transform: translateX(-100%); + background-color: var(--second-text-color); +} +.theme-switch input:checked + label { + background-color: #b632eb; +} + +@media (max-width: 991.98px) { + .dark-mode { + position: initial; + } + .dark-mode label { + width: 50px; + height: 20px; + } + .dark-mode label::after { + width: 15px; + height: 15px; + } +} +@media (max-width: 576px) { + .dark-mode { + margin-bottom: 20px; + } + .dark-mode label { + width: 50px; + height: 20px; + } + .dark-mode label::after { + width: 15px; + height: 15px; + } +}/*# sourceMappingURL=theme-switch-styles.css.map */ \ No newline at end of file diff --git a/src/components/Header/ThemeSwitch/theme-switch-styles.css.map b/src/components/Header/ThemeSwitch/theme-switch-styles.css.map new file mode 100644 index 0000000..e844981 --- /dev/null +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.css.map @@ -0,0 +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"} \ No newline at end of file diff --git a/public/sass_styles/_dark-mode_toogle-switch.scss b/src/components/Header/ThemeSwitch/theme-switch-styles.scss similarity index 84% rename from public/sass_styles/_dark-mode_toogle-switch.scss rename to src/components/Header/ThemeSwitch/theme-switch-styles.scss index 3159915..1e9d33c 100644 --- a/public/sass_styles/_dark-mode_toogle-switch.scss +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.scss @@ -1,11 +1,8 @@ -.dark-mode { +.theme-switch { - position: absolute; - - top: 1.7vh; - left: calc(100% - 5vw); + display: flex; - #dark-mode_toogle-switch { + #theme-switch_toogle-switch { width: 0; height: 0; visibility: hidden; @@ -15,7 +12,7 @@ display: block; width: 4vw; height: 4vh; - background-color: $lightest-color; + background-color: var(--lightest-color); border-radius: 100px; position: relative; cursor: pointer; @@ -39,7 +36,7 @@ left: calc(100% - 0.25vh); transform: translateX(-100%); - background-color: $lightest-color; + background-color: var(--second-text-color); } input:checked + label{ @@ -63,8 +60,7 @@ } } - -@media (max-width: 576px) { +@media (max-width: 576px) { .dark-mode { label { width: 50px; diff --git a/src/components/Header/header-styles.css b/src/components/Header/header-styles.css new file mode 100644 index 0000000..84c791e --- /dev/null +++ b/src/components/Header/header-styles.css @@ -0,0 +1,234 @@ +.header-main-page { + background-color: var(--main-color); + display: flex; + justify-content: space-between; + flex-wrap: wrap; + height: 24vh; + box-sizing: border-box; +} +.header-main-page .title-link { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + color: #ffffff; + font-size: 3.3em; + display: inline; + margin-top: auto; + margin-bottom: auto; + margin-left: 1vw; + display: flex; + align-items: center; + flex-grow: 1; +} +.header-main-page .title-link a { + color: #ffffff; + font-family: var(--title-font); + text-decoration: none; + cursor: pointer; +} +.header-main-page .konami-code { + color: #4c8ad5; +} +.header-main-page .buttons-container { + display: flex; + align-items: center; + margin-top: auto; + margin-bottom: auto; +} +.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; + 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; + -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 { + 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; +} +.notification-select p { + display: inline-block; + align-self: center; + color: #fff; + padding: 0; + margin: 0; + margin-right: 1vw; +} +.notification-select button { + height: 80%; + width: 5%; + margin-right: 0.5vw; + border: none; + border-radius: 2px; + align-self: center; + color: #fff; + font-weight: bold; + cursor: pointer; +} +.notification-select button.yes { + background-color: rgb(76, 175, 80); +} +.notification-select button.no { + background-color: rgb(211, 47, 47); +} + +@media (max-width: 991.98px) { + .header-main-page h1 { + font-size: 26pt; + } + .header-main-page h3 { + font-size: 13pt; + } + + .notification-select { + height: auto; + flex-wrap: wrap; + } + .notification-select p { + width: 100%; + margin-top: 1vh; + margin-bottom: 1vh; + } + .notification-select button { + height: 30px; + 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; + padding: 2vh 2vw; + } + .banner-login p { + width: 33.3%; + } + .banner-login .button-container { + width: 66.6%; + justify-content: space-around; + } + .banner-login .button-container button { + width: 30%; + } +} +@media (max-width: 576px) { + .banner-login p { + width: 50%; + } + .banner-login .button-container { + width: 50%; + flex-direction: column; + } + .banner-login .button-container button { + width: 75%; + margin: 10px; + } +}/*# sourceMappingURL=header-styles.css.map */ \ No newline at end of file diff --git a/src/components/Header/header-styles.css.map b/src/components/Header/header-styles.css.map new file mode 100644 index 0000000..b6fb0a3 --- /dev/null +++ b/src/components/Header/header-styles.css.map @@ -0,0 +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"} \ No newline at end of file diff --git a/src/components/Header/header-styles.scss b/src/components/Header/header-styles.scss new file mode 100644 index 0000000..5050924 --- /dev/null +++ b/src/components/Header/header-styles.scss @@ -0,0 +1,313 @@ + +.header-main-page { + background-color: var(--main-color); + + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + height: calc(100vh - calc(68vh + 8vh)); // 100vh minus .main-pomodoro and .go-to-down-arrow + + box-sizing: border-box; + + .title-link { + width: fit-content; + + color: #ffffff; + + font-size: 3.3em; + + display: inline; + + margin-top: auto; + margin-bottom: auto; + margin-left: 1vw; + + display: flex; + align-items: center; + flex-grow: 1; + + a { + color: #ffffff; + font-family: var(--title-font); + text-decoration: none; + + cursor: pointer; + } + } + + .konami-code { + color: #4c8ad5; + } + + .buttons-container { + display: flex; + align-items: center; + + margin-top: auto; + margin-bottom: auto; + + a, label { + margin-right: 1vw; + } + + a { + text-decoration: none; + } + + .go-to-account { + + width: 3vw; + height: 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; + } + } + + .close-session { + width: 7vw; + height: 3vw; + + background-color: var(--second-color); + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 5%; + + .close-session-text { + font-size: 1vw; + + text-decoration: none; + user-select: none; + + color: #ffffff; + } + } + } +} + + +@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 { + + h1 { + font-size: 26pt; + } + + h3 { + font-size: 13pt; + } + } + + .notification-select { + height: auto; + flex-wrap: wrap; + + p { + width: 100%; + margin-top: 1vh; + margin-bottom: 1vh; + } + + button { + height: 30px; + width: 20%; + 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; + + height: auto; + + padding: 2vh 2vw; + + p { + width: 33.3%; + } + + .button-container { + width: 66.6%; + + justify-content: space-around; + + button { + width: 30%; + } + } + } +} + +@media (max-width: 576px) { + .banner-login { + + p { + width: 50%; + } + + .button-container { + width: 50%; + + flex-direction: column; + + button { + width: 75%; + margin: 10px; + } + } + } +} \ No newline at end of file diff --git a/src/components/Identify Childrens/LoginForm.jsx b/src/components/Identify Childrens/LoginForm.jsx deleted file mode 100644 index 34f7f99..0000000 --- a/src/components/Identify Childrens/LoginForm.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' - -const LoginForm = (props) => { - return ( - <> -
- { - props.setEmail(e.target.value) - }} - /> - - { - props.setPassword(e.target.value) - }} - /> - - - -
- - - - - ) -} - -export default LoginForm diff --git a/src/components/Identify Childrens/RegisterForm.jsx b/src/components/Identify Childrens/RegisterForm.jsx deleted file mode 100644 index d89723c..0000000 --- a/src/components/Identify Childrens/RegisterForm.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' - -const RegisterForm = (props) => { - return ( -
- { - props.setEmail(e.target.value) - }} - /> - - { - props.setPassword(e.target.value) - }} - - /> - - { - props.setConfirmPassword(e.target.value) - }} - /> - - -
- ) -} - -export default RegisterForm diff --git a/src/components/Identify Childrens/ResetPassword.jsx b/src/components/Identify Childrens/ResetPassword.jsx deleted file mode 100644 index 10ca2af..0000000 --- a/src/components/Identify Childrens/ResetPassword.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -const ResetPassword = (props) => { - return ( -
- { - props.setEmail(e.target.value) - }} - /> - - -
- ) -} - -export default ResetPassword diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx deleted file mode 100644 index 17c97f4..0000000 --- a/src/components/Identify.jsx +++ /dev/null @@ -1,311 +0,0 @@ -import { createUserWithEmailAndPassword, getAuth, onAuthStateChanged, sendPasswordResetEmail, signInWithEmailAndPassword, signOut } from 'firebase/auth' -import { doc, getFirestore, setDoc } from 'firebase/firestore' -import React, { useState } from 'react' -import { withRouter } from 'react-router-dom' -import { firebase } from './Firebase/firebase' -import LoginForm from './Identify Childrens/LoginForm' -import RegisterForm from './Identify Childrens/RegisterForm' -import ResetPassword from './Identify Childrens/ResetPassword' -import loadingGifDarkTheme from './img/loading-dark-theme.png' -import loadingGifLightTheme from './img/loading-light-theme.png' - - - - - -const Identify = (props) => { - - const [act, setAct] = useState('') - - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [confirmPassword, setConfirmPassword] = useState('') - - const [message, setMessage] = React.useState('') - const [errorMessage, setErrorMessage] = React.useState(0) - const [successMessage, setSuccessMessage] = React.useState(0) - const [loading, setLoading] = useState(false) - - const auth = getAuth() - - const register = async () => { - - onAuthStateChanged(auth, (user) => { - if (user) { - return - } - }) - - try { - const response = await createUserWithEmailAndPassword(auth, email, password) - - - - const uid = response.user.uid - - addNewUserToFirebase(uid) - props.history.push('/config-account') - setLoading(false) - - - } catch (error) { - - setMessage(error.message) - setLoading(false) - - - } - } - - const addNewUserToFirebase = async (uid) => { - - try { - - const db = getFirestore(firebase) - - await setDoc(doc(db, 'users', uid), { - - keyClockify: '' - }) - - } catch (error) { - setMessage(error) - } - } - - const login = async () => { - - onAuthStateChanged(auth, (user) => { - if (user) { - return - } - }) - - try { - const response = await signInWithEmailAndPassword(auth, email, password) - - props.history.push('/config-account') - await setLoading(false) - - - } catch (error) { - - setErrorMessage('USER OR PASSWORD NOT VALID') - setLoading(false) - - } - } - - const resetPasswordFirestore = async () => { - - try { - - const response = await sendPasswordResetEmail(auth, email) - - setSuccessMessage('Recovery email send') - setLoading(false) - - } catch (error) { - setErrorMessage('There was a problem sending the email.') - setLoading(false) - - } - } - - const defineLogin = () => { - if (act !== 'login') { - setAct('login') - } - } - - const defineRegister = () => { - if (act !== 'register') { - setAct('register') - } - } - - const sendForm = (e) => { - e.preventDefault() - - setLoading(true) - - if (!email.trim()) { - setErrorMessage('EMAIL EMPTY') - setLoading(false) - - return - } - - if (act !== 'i forgor') { - - if (!password.trim()) { - setErrorMessage('PASSWORD EMPTY') - setLoading(false) - - return - } - - if (password.trim().length < 8) { - setErrorMessage('PASSWORD TOO SHORT') - setLoading(false) - - return - } - - } - - if (act === 'register') { - - if (!confirmPassword.trim()) { - setErrorMessage('CONFIRM PASSWORD PLEASE') - setLoading(false) - - return - } - - if (password !== confirmPassword) { - setErrorMessage("PASSWORDS DOESN'T MATCH") - setLoading(false) - - return - } - register() - - e.target.reset() - setEmail('') - setPassword('') - setConfirmPassword('') - setErrorMessage(0) - - return - } - - if (act === 'login') { - - login() - - e.target.reset() - setEmail('') - setPassword('') - - return - } - - if (act === 'i forgor') { - - resetPasswordFirestore() - - e.target.reset() - setEmail('') - setErrorMessage(0) - - return - } - - setErrorMessage('ACTION NOT VALID') - } - - const signOutFromApp = () => { - - signOut(auth) - .then(() => { - - setErrorMessage('YOU CLOSED THE SESSION') - //! 'YOU CLOSE SESSION' MESSAGE CODE - }) - } - - React.useEffect( () => { - const urlInfo = new URLSearchParams(window.location.search) - const action = urlInfo.get('act') - - if (action === 'r') { - setAct('register') - } else { - setAct('login') - } - - if (action === 'clss') { - signOutFromApp() - return - } - - onAuthStateChanged(auth, (user) => { - if (user) { - props.history.push('/') - } - }) - }, []) - - if (loading) { - - return ( -
- -
- ) - } - - return ( -
-
- { - errorMessage ?

{errorMessage}

: null - } -
-
- { - successMessage ?

{successMessage}

: null - } -
-
- - - -
- { - act === 'login' ? : null - } - { - act === 'register' ? : null - } - { - act === 'i forgor' ? : null - } -
-
-
- ) -} - -export default withRouter(Identify) diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx new file mode 100644 index 0000000..4e61a6a --- /dev/null +++ b/src/components/Loading/Loading.jsx @@ -0,0 +1,14 @@ +import React from 'react' +import loadingImage from './img/loading-light-theme.png' + +const Loading = () => { + return ( + <> +
+ loading +
+ + ) +} + +export default Loading \ No newline at end of file diff --git a/src/components/img/loading-dark-theme.png b/src/components/Loading/img/loading-dark-theme.png similarity index 100% rename from src/components/img/loading-dark-theme.png rename to src/components/Loading/img/loading-dark-theme.png diff --git a/src/components/img/loading-light-theme.png b/src/components/Loading/img/loading-light-theme.png similarity index 100% rename from src/components/img/loading-light-theme.png rename to src/components/Loading/img/loading-light-theme.png diff --git a/src/components/Loading/loading-styles.css b/src/components/Loading/loading-styles.css new file mode 100644 index 0000000..a2d1a85 --- /dev/null +++ b/src/components/Loading/loading-styles.css @@ -0,0 +1,5 @@ +.loading-container { + width: 100%; + height: 100%; + background-color: #fff; +}/*# sourceMappingURL=loading-styles.css.map */ \ No newline at end of file diff --git a/src/components/Loading/loading-styles.css.map b/src/components/Loading/loading-styles.css.map new file mode 100644 index 0000000..657fd99 --- /dev/null +++ b/src/components/Loading/loading-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["loading-styles.scss","loading-styles.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;EAEA,sBAAA;ACAJ","file":"loading-styles.css"} \ No newline at end of file diff --git a/src/components/Loading/loading-styles.scss b/src/components/Loading/loading-styles.scss new file mode 100644 index 0000000..2f44f38 --- /dev/null +++ b/src/components/Loading/loading-styles.scss @@ -0,0 +1,6 @@ +.loading-container { + width: 100%; + height: 100%; + + background-color: #fff; +} \ No newline at end of file diff --git a/src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js b/src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js deleted file mode 100644 index 9b0f1ae..0000000 --- a/src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js +++ /dev/null @@ -1,117 +0,0 @@ -const setTimeStyleExternal = (props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime) => { - - if (props.style === 'Can I play, Daddy?') { - const minutes = 10 - const seconds = 0 - - setMinutes(minutes) - setSeconds(seconds) - - setBreakTime( - { - normal: { - minutes: 5, - seconds: 0 - }, - extended: { - minutes: 15, - seconds: 0 - } - } - ) - - setActualStyle(props.style) - - return { - minutes, seconds, breakTime - } - - } - - if (props.style === 'Regular'){ - - const minutes = 25 - const seconds = 0 - - setMinutes(minutes) - setSeconds(seconds) - - setBreakTime( - { - normal: { - minutes: 5, - seconds: 0 - }, - extended: { - minutes: 15, - seconds: 0 - } - } - ) - - setActualStyle(props.style) - - return { - minutes, seconds, breakTime - } - - } - - if (props.style === 'Creative work') { - const minutes = 50 - const seconds = 0 - - setMinutes(minutes) - setSeconds(seconds) - - setBreakTime( - { - normal: { - minutes: 10, - seconds: 0 - }, - extended: { - minutes: 20, - seconds: 0 - } - } - ) - - setActualStyle(props.style) - - return { - minutes, seconds, breakTime - } - - } - - if (props.style === 'Last minute delivery') { - const minutes = 90 - const seconds = 0 - - setMinutes(minutes) - setSeconds(seconds) - - setBreakTime( - { - normal: { - minutes: 15, - seconds: 0 - }, - extended: { - minutes: 30, - seconds: 0 - } - } - ) - - setActualStyle(props.style) - - return { - minutes, seconds, breakTime - } - - } -} - -export default setTimeStyleExternal \ No newline at end of file diff --git a/src/components/Main Pomodoro Childrens/PomodoroCounter.jsx b/src/components/Main Pomodoro Childrens/PomodoroCounter.jsx deleted file mode 100644 index 7da3102..0000000 --- a/src/components/Main Pomodoro Childrens/PomodoroCounter.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -const PomodoroCounter = (props) => { - - return ( -
-
    -
  • - {props.pomodoros} - Pomodoros -
    • -
  • - {props.rests} - Rests -
    • -
  • - {props.longRests} - Long rests -
    • -
-
- ) -} - -export default PomodoroCounter diff --git a/src/components/Main Pomodoro Childrens/Style Selector Children/StyleSelectionChildren.jsx b/src/components/Main Pomodoro Childrens/Style Selector Children/StyleSelectionChildren.jsx deleted file mode 100644 index f148bef..0000000 --- a/src/components/Main Pomodoro Childrens/Style Selector Children/StyleSelectionChildren.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' - -const StyleSelectionChildren = (props) => { - return ( -
{ - props.setStyle(props.title) - }} - > - - - - - - - -
- ) -} - -export default StyleSelectionChildren diff --git a/src/components/Main Pomodoro Childrens/StyleSelector.jsx b/src/components/Main Pomodoro Childrens/StyleSelector.jsx deleted file mode 100644 index d203a56..0000000 --- a/src/components/Main Pomodoro Childrens/StyleSelector.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import StyleSelectionChildren from './Style Selector Children/StyleSelectionChildren' - -const StyleSelector = (props) => { - return ( -
-
-

Select Style

- -
- - - - -
-
-
- ) -} - -export default StyleSelector diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx deleted file mode 100644 index aa0e967..0000000 --- a/src/components/MainPomodoro.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import React, {useState} from 'react' -import MainPomodoroTimer from './Main Pomodoro Childrens/MainPomodoroTimer' -import PomodoroCounter from './Main Pomodoro Childrens/PomodoroCounter' -import StyleSelector from './Main Pomodoro Childrens/StyleSelector' -import uploadToClockifyTimer from './Clockify/uploadToClockifyTimer' - -const MainPomodoro = (props) => { - - const [style, setStyle] = useState('Regular') - const [displayHidden, setDisplayHidden] = useState(true) - - const [pomodoros, setPomodoros] = useState(0) - const [rests, setRests] = useState(0) - const [longRests, setLongRests] = useState(0) - - const [startTime, setStartTime] = useState('') - const [endTime, setEndTime] = useState('') - - const [letsUpload, setLetsUpload] = useState(false) - - - const showStyles = () => { - setDisplayHidden(!displayHidden) - } - - React.useEffect( () => { - if (letsUpload) { - - uploadToClockifyTimer(props.workspaceID, props.projectID, startTime, endTime, props.apiKey, props.taskName) - - setLetsUpload(false) - - setStartTime('') - setEndTime('') - } - }) - - return ( -
-
- - - - -
-

- Style -

-

- {style} -

-
- - -
- - - -
- - - ) -} - -export default MainPomodoro diff --git a/src/components/Message/Message.jsx b/src/components/Message/Message.jsx new file mode 100644 index 0000000..974c6e8 --- /dev/null +++ b/src/components/Message/Message.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +const Message = (props) => { + + return ( +
+

{props.message.text}

+
+ ) +} + +export default Message diff --git a/src/components/AboutThis.jsx b/src/pages/AboutThis/AboutThis.jsx similarity index 88% rename from src/components/AboutThis.jsx rename to src/pages/AboutThis/AboutThis.jsx index ba2e192..1b58aa6 100644 --- a/src/components/AboutThis.jsx +++ b/src/pages/AboutThis/AboutThis.jsx @@ -1,8 +1,11 @@ +import './about-this-styles.css' + import React from 'react' +import GoDownArrow from '../../components/GoDownArrow/GoDownArrow' const AboutThis = (props) => { - return ( + <>

About us this

@@ -56,12 +59,17 @@ const AboutThis = (props) => { You have more projects?

- Yes!, all there are in my personal website. + Yes!, all there are in my personal website.

+ + ) } diff --git a/src/pages/AboutThis/about-this-styles.css b/src/pages/AboutThis/about-this-styles.css new file mode 100644 index 0000000..1013bab --- /dev/null +++ b/src/pages/AboutThis/about-this-styles.css @@ -0,0 +1,50 @@ +#about-this, #credits { + height: 83vh; + background-color: var(--second-background-color); + color: var(--second-text-color); + padding: 0px 3vw; + padding-top: 5vh; + padding-bottom: 5vh; + display: flex; + flex-direction: column; + align-items: stretch; +} +#about-this .titles, #credits .titles { + display: flex; +} +#about-this .titles h3, #credits .titles h3 { + width: 50%; + font-size: 22pt; +} +#about-this .titles h3 .line-through, #credits .titles h3 .line-through { + text-decoration: line-through; + text-decoration-thickness: 3px; +} +#about-this .information, #credits .information { + display: flex; +} +#about-this .information ul, #credits .information ul { + width: 50%; +} +#about-this .information ul li, #credits .information ul li { + margin-top: 3vh; +} +#about-this .information ul li h4, #credits .information ul li h4 { + font-size: 18pt; +} +#about-this .information ul li p, #credits .information ul li p { + font-size: 13pt; + margin-left: 2vw; + margin-top: 1vh; +} + +#credits { + height: 95vh; +} + +@media (max-width: 918px) { + #about-this, #credits { + height: auto; + padding-bottom: 5vh; + } +}/*# sourceMappingURL=about-this-styles.css.map */ \ No newline at end of file diff --git a/src/pages/AboutThis/about-this-styles.css.map b/src/pages/AboutThis/about-this-styles.css.map new file mode 100644 index 0000000..04feadb --- /dev/null +++ b/src/pages/AboutThis/about-this-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["about-this-styles.scss","about-this-styles.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EAEA,gDAAA;EACA,+BAAA;EAEA,gBAAA;EACA,gBAAA;EACA,mBAAA;EAEA,aAAA;EACA,sBAAA;EACA,oBAAA;ACFJ;ADII;EAEI,aAAA;ACHR;ADKQ;EACI,UAAA;EAEA,eAAA;ACJZ;ADMY;EACI,6BAAA;EACA,8BAAA;ACJhB;ADSI;EAEI,aAAA;ACRR;ADUQ;EACI,UAAA;ACRZ;ADUY;EAEI,eAAA;ACThB;ADWgB;EACI,eAAA;ACTpB;ADYgB;EACI,eAAA;EACA,gBAAA;EACA,eAAA;ACVpB;;ADiBA;EACI,YAAA;ACdJ;;ADiBA;EACI;IACI,YAAA;IAEA,mBAAA;ECfN;AACF","file":"about-this-styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_aboutThis.scss b/src/pages/AboutThis/about-this-styles.scss similarity index 61% rename from public/sass_styles/_aboutThis.scss rename to src/pages/AboutThis/about-this-styles.scss index 056be5b..568dc28 100644 --- a/public/sass_styles/_aboutThis.scss +++ b/src/pages/AboutThis/about-this-styles.scss @@ -1,6 +1,9 @@ #about-this, #credits { height: 83vh; + background-color: var(--second-background-color); + color: var(--second-text-color); + padding: 0px 3vw; padding-top: 5vh; padding-bottom: 5vh; @@ -16,9 +19,6 @@ h3 { width: 50%; - @include titleFont; - @include normalizeTitle; - font-size: 22pt; .line-through { @@ -40,14 +40,10 @@ margin-top: 3vh; h4 { - @include normalizeTitle; - @include bodyFont; font-size: 18pt; } p { - @include normalizeBody; - @include bodyFont; font-size: 13pt; margin-left: 2vw; margin-top: 1vh; @@ -67,29 +63,4 @@ 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; - } - } - } - } - } -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/Account.jsx b/src/pages/ConfigAccount/ConfigAccount.jsx similarity index 80% rename from src/components/Account.jsx rename to src/pages/ConfigAccount/ConfigAccount.jsx index 7e2ec08..39ba834 100644 --- a/src/components/Account.jsx +++ b/src/pages/ConfigAccount/ConfigAccount.jsx @@ -1,14 +1,16 @@ +import './config-account-styles.css' + +import React, { useState } from 'react'; import { getAuth, onAuthStateChanged } from 'firebase/auth'; import { doc, getDoc, getFirestore, updateDoc } from "firebase/firestore"; -import React, { useState } from 'react'; -import Message from './Account Childrens/Message'; -import { firebase } from './Firebase/firebase'; -import loadingGifDarkTheme from './img/loading-dark-theme.png'; -import loadingGifLightTheme from './img/loading-light-theme.png'; -const Account = (props) => { +import Loading from '../../components/Loading/Loading'; +import Message from '../../components/Message/Message'; +import { firebase } from '../../Firebase/firebase'; - const [signIn, setSignIn] = useState('false') +const ConfigAccount = (props) => { + + const [signedIn, setSignedIn] = useState('false') const [apiKey, setApiKey] = useState('') const [fristThreeApiKey, setFristThreeApiKey] = useState('') @@ -21,14 +23,13 @@ const Account = (props) => { let userUID onAuthStateChanged(auth, (user) => { - if (user) { - setSignIn(true) + setSignedIn(true) userUID = user.uid } else { - setSignIn(false) + setSignedIn(false) + setLoading(false) } - }) React.useEffect( () => { @@ -44,24 +45,31 @@ const Account = (props) => { const data = await makeRequest() if (await validateRequest(data)) { - - setActualState('API VALID') if (await uploadApiKey()) { - setActualState('API UPLOADED') + setActualState({ + text: "API uploaded successfully", + success: true + }) setFristThreeApiKey(apiKey[0] + apiKey[1] + apiKey[2]) setProcessing(false) } else { - setActualState('API NOT UPLOADED') + setActualState({ + text: "There's been an error while we upload your API Key. Please try again", + success: false + }) setProcessing(false) } } else { - setActualState('API NOT VALID') + setActualState({ + text: 'The API is not valid', + sucess: false + }) setProcessing(false) } @@ -135,7 +143,10 @@ const Account = (props) => { const applyApiState = (data) => { if (data.keyClockify !== '') { - setActualState('API UPLOADED') + setActualState({ + text: "API uploaded successfully", + success: true + }) setApiKey(data.keyClockify) setFristThreeApiKey(apiKey[0] + apiKey[1] + apiKey[2]) } @@ -159,27 +170,26 @@ const Account = (props) => { setApiKey('aa') setApiKey('') } - - if (loading) { - return ( -
- -
- ) - } return ( + <> + { + loading ? + + :
{ - actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? : null + actualState !== '' ? + + : null } { - signIn ? + signedIn ?
-
+

One more step...

-

Insert your Clockify API here

+

Insert your Clockify API Key here

{
{ - actualState === 'API UPLOADED' ? + actualState.success === true ?
@@ -233,11 +243,14 @@ const Account = (props) => {
: null } -
: +
+ :

Sign in before access to this page...

}
+ } + ) } -export default Account +export default ConfigAccount \ No newline at end of file diff --git a/src/pages/ConfigAccount/config-account-styles.css b/src/pages/ConfigAccount/config-account-styles.css new file mode 100644 index 0000000..c6cb970 --- /dev/null +++ b/src/pages/ConfigAccount/config-account-styles.css @@ -0,0 +1,105 @@ +.account-container #message { + padding-left: 5vw; + background-color: #ff6a6a; +} +.account-container #message h1 { + color: #ffffff; + padding: 2vh 0px; +} +.account-container .successfully { + background-color: #75b7ff !important; +} +.account-container .successfully h1 { + color: #3a3a3a !important; +} +.account-container .next-step { + display: flex; + align-items: center; + background-color: var(--second-background-color); +} +.account-container .next-step .disabled { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; +} +.account-container .next-step .next-step-title { + padding-left: 5vw; + padding-top: 5vh; + background-color: --light-color; +} +.account-container .next-step .next-step-title h1, .account-container .next-step .next-step-title h2 { + color: --second-color; + padding-bottom: 3vh; +} +.account-container .next-step form { + width: 50vw; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 1vh; +} +.account-container .next-step form input { + height: 4vh; + width: 60%; + margin-bottom: 1vh; + border: none; + border-bottom: 1px solid var(--border-color); + outline: none; +} +.account-container .next-step form input[type=submit] { + width: 50%; + border: var(--border-color) solid 1px; +} +.account-container .next-step form .disabled { + opacity: 0%; +} +.account-container .next-step .flex-container-change-api-container { + padding-left: 5vw; +} +.account-container .next-step .flex-container-change-api-container .change-api-container { + color: var(--second-text-color); + background-color: var(--main-background-color); + display: flex; + flex-direction: column; + padding: 1vh 3vw; + border-radius: 5px; +} +.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .api-preview { + font-weight: bold; +} +.account-container .next-step .flex-container-change-api-container .change-api-container #change-API-button { + height: 4vh; + width: 20vw; + margin: 1vh 0px; + border: none; + outline: none; + background-color: var(--lightest-color); + border: var(--border-color) solid 1px; +} + +.loading-container { + width: 100%; + height: 83vh; + display: flex; + justify-content: center; + 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; + } +}/*# sourceMappingURL=config-account-styles.css.map */ \ No newline at end of file diff --git a/src/pages/ConfigAccount/config-account-styles.css.map b/src/pages/ConfigAccount/config-account-styles.css.map new file mode 100644 index 0000000..e4fbe6e --- /dev/null +++ b/src/pages/ConfigAccount/config-account-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["config-account-styles.scss","config-account-styles.css"],"names":[],"mappings":"AAEI;EACI,iBAAA;EAEA,yBAAA;ACFR;ADIQ;EACI,cAAA;EACA,gBAAA;ACFZ;ADMI;EACI,oCAAA;ACJR;ADMQ;EAAI,yBAAA;ACHZ;ADMI;EAEI,aAAA;EACA,mBAAA;EAEA,gDAAA;ACNR;ADQQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACNZ;ADSQ;EACI,iBAAA;EAEA,gBAAA;EAEA,+BAAA;ACTZ;ADWY;EACI,qBAAA;EAEA,mBAAA;ACVhB;ADcQ;EACI,WAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EAEA,gBAAA;ACdZ;ADiBY;EACI,WAAA;EACA,UAAA;EAEA,kBAAA;EAEA,YAAA;EACA,4CAAA;EACA,aAAA;ACjBhB;ADoBY;EACI,UAAA;EACA,qCAAA;AClBhB;ADsBQ;EACI,WAAA;ACpBZ;ADuBQ;EACI,iBAAA;ACrBZ;ADuBY;EACI,+BAAA;EACA,8CAAA;EAEA,aAAA;EACA,sBAAA;EAEA,gBAAA;EAEA,kBAAA;ACxBhB;AD4BoB;EACI,iBAAA;AC1BxB;AD8BgB;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,YAAA;EACA,aAAA;EAEA,uCAAA;EACA,qCAAA;AC/BpB;;ADsCA;EACI,WAAA;EACA,YAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;ACpCJ;;ADwCA;EAIQ;IAEI,aAAA;ECzCV;ED8Cc;IACI,eAAA;EC5ClB;ED+Cc;IACI,eAAA;EC7ClB;EDkDc;IACI,WAAA;EChDlB;AACF","file":"config-account-styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_account.scss b/src/pages/ConfigAccount/config-account-styles.scss similarity index 58% rename from public/sass_styles/_account.scss rename to src/pages/ConfigAccount/config-account-styles.scss index 526d602..94b80a1 100644 --- a/public/sass_styles/_account.scss +++ b/src/pages/ConfigAccount/config-account-styles.scss @@ -1,20 +1,11 @@ -html, body { - height: 100%; -} - .account-container { - height: 69vh; //xd - #message { padding-left: 5vw; background-color: #ff6a6a; h1 { - @include titleFont(); - @include normalizeTitle(); - color: #ffffff; padding: 2vh 0px; } @@ -28,6 +19,11 @@ html, body { .next-step { + display: flex; + align-items: center; + + background-color: var(--second-background-color); + .disabled { user-select: none; cursor: initial; @@ -40,14 +36,10 @@ html, body { padding-top: 5vh; - background-color: $light-color; + background-color: --light-color; h1, h2 { - - @include normalizeTitle(); - @include titleFont(); - - color: $second-color; + color: --second-color; padding-bottom: 3vh; } @@ -70,14 +62,13 @@ html, body { margin-bottom: 1vh; border: none; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color); outline: none; - } input[type=submit] { width: 50%; - border: $border-color solid 1px; + border: var(--border-color) solid 1px; } } @@ -89,26 +80,18 @@ html, body { padding-left: 5vw; .change-api-container { - width: 50vw; - background-color: $lightest-color; + color: var(--second-text-color); + background-color: var(--main-background-color); display: flex; flex-direction: column; - padding-top: 1vh; + padding: 1vh 3vw; - border-radius: 2px; - - padding-left: 1vw; + border-radius: 5px; .api-preview-container { - - .title { - @include normalizeTitle(); - @include titleFont(); - } - .api-preview { font-weight: bold; } @@ -118,12 +101,13 @@ html, body { height: 4vh; width: 20vw; - margin-bottom: 1vh; + margin: 1vh 0px; border: none; outline: none; - border: $border-color solid 1px; + background-color: var(--lightest-color); + border: var(--border-color) solid 1px; } } } @@ -167,47 +151,4 @@ html, body { } } } -} - -.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/src/components/Credits.jsx b/src/pages/Credits/Credits.jsx similarity index 99% rename from src/components/Credits.jsx rename to src/pages/Credits/Credits.jsx index 6489a49..1aea3ce 100644 --- a/src/components/Credits.jsx +++ b/src/pages/Credits/Credits.jsx @@ -66,9 +66,6 @@ const Credits = (props) => {

- - -

  • diff --git a/src/pages/Identify/Identify.jsx b/src/pages/Identify/Identify.jsx new file mode 100644 index 0000000..72fb3d1 --- /dev/null +++ b/src/pages/Identify/Identify.jsx @@ -0,0 +1,349 @@ +import './identify-styles.css' + +import React, { useState } from 'react' +import { doc, getFirestore, setDoc } from 'firebase/firestore' +import { createUserWithEmailAndPassword, getAuth, onAuthStateChanged, sendPasswordResetEmail, signInWithEmailAndPassword, signOut } from 'firebase/auth' +import { withRouter } from 'react-router-dom' + +import { firebase } from '../../Firebase/firebase' +import Loading from '../../components/Loading/Loading' + +const Identify = (props) => { + + const [act, setAct] = useState('') + + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [confirmPassword, setConfirmPassword] = useState('') + + const [message, setMessage] = React.useState('') + const [errorMessage, setErrorMessage] = React.useState(0) + const [successMessage, setSuccessMessage] = React.useState(0) + const [loading, setLoading] = useState(false) + + const auth = getAuth() + + const register = async () => { + + onAuthStateChanged(auth, (user) => { + if (user) { + return + } + }) + + try { + const response = await createUserWithEmailAndPassword(auth, email, password) + + + + const uid = response.user.uid + + addNewUserToFirebase(uid) + props.history.push('/config-account') + setLoading(false) + + + } catch (error) { + + setMessage(error.message) + setLoading(false) + + + } + } + + const addNewUserToFirebase = async (uid) => { + try { + const db = getFirestore(firebase) + await setDoc(doc(db, 'users', uid), { + keyClockify: '' + }) + } catch (error) { + setMessage(error) + } + } + + const login = async () => { + onAuthStateChanged(auth, (user) => { + if (user) { + return + } + }) + + try { + await signInWithEmailAndPassword(auth, email, password) + + props.history.push('/config-account') + + } catch (error) { + setErrorMessage('USER OR PASSWORD NOT VALID') + } + + setLoading(false) + } + + const resetPasswordFirestore = async () => { + + try { + + await sendPasswordResetEmail(auth, email) + + setSuccessMessage('Recovery email send') + setLoading(false) + + } catch (error) { + setErrorMessage('There was a problem sending the email.') + setLoading(false) + } + } + + const defineLogin = () => { + if (act !== 'login') { + setAct('login') + } + } + + const defineRegister = () => { + if (act !== 'register') { + setAct('register') + } + } + + const sendForm = (e) => { + e.preventDefault() + + setLoading(true) + + if (!email.trim()) { + setErrorMessage('EMAIL EMPTY') + setLoading(false) + + return + } + + if (act !== 'i forgor') { + + if (!password.trim()) { + setErrorMessage('PASSWORD EMPTY') + setLoading(false) + + return + } + + if (password.trim().length < 8) { + setErrorMessage('PASSWORD TOO SHORT') + setLoading(false) + + return + } + + } + + if (act === 'register') { + + if (!confirmPassword.trim()) { + setErrorMessage('CONFIRM PASSWORD PLEASE') + setLoading(false) + + return + } + + if (password !== confirmPassword) { + setErrorMessage("PASSWORDS DOESN'T MATCH") + setLoading(false) + + return + } + + register() + + e.target.reset() + setEmail('') + setPassword('') + setConfirmPassword('') + setErrorMessage(0) + + return + } + + if (act === 'login') { + + login() + + e.target.reset() + setEmail('') + setPassword('') + + return + } + + if (act === 'i forgor') { + + resetPasswordFirestore() + + e.target.reset() + setEmail('') + setErrorMessage(0) + + return + } + + setErrorMessage('ACTION NOT VALID') + } + + const signOutFromApp = () => { + + signOut(auth) + .then(() => { + + setErrorMessage('YOU CLOSED THE SESSION') + //! 'YOU CLOSE SESSION' MESSAGE CODE + }) + } + + React.useEffect( () => { + const urlInfo = new URLSearchParams(window.location.search) + const action = urlInfo.get('act') + + if (action === 'r') { + setAct('register') + } else { + setAct('login') + } + + if (action === 'clss') { + signOutFromApp() + return + } + + onAuthStateChanged(auth, (user) => { + if (user) { + props.history.push('/') + } + }) + }, []) + + return ( + <> + + { + loading ? + + : +
    +
    + { + errorMessage ?

    {errorMessage}

    : null + } +
    +
    + { + successMessage ?

    {successMessage}

    : null + } +
    +
    + + +
    + { + act === 'login' ? + + { + setEmail(e.target.value) + }} + /> + + { + setPassword(e.target.value) + }} + /> + + + + + : null + } + { + act === 'register' ? +
    + { + setEmail(e.target.value) + }} + /> + + { + setPassword(e.target.value) + }} + + /> + + { + setConfirmPassword(e.target.value) + }} + /> + + +
    + : null + } + { + act === 'i forgor' ? +
    + { + setEmail(e.target.value) + }} + /> + + +
    + : null + } +
    +
    +
    + } + + ) +} + +export default withRouter(Identify) \ No newline at end of file diff --git a/src/pages/Identify/identify-styles.css b/src/pages/Identify/identify-styles.css new file mode 100644 index 0000000..aad3169 --- /dev/null +++ b/src/pages/Identify/identify-styles.css @@ -0,0 +1,98 @@ +.identify-container { + display: flex; + flex-direction: column; + align-items: center; + flex-grow: 1; +} +.identify-container:has { + height: 100%; +} +.identify-container .error-message-container, .identify-container .success-message-container { + width: 70vw; + background-color: #D17262; + display: flex; + justify-content: center; + align-items: center; +} +.identify-container .error-message-container p, .identify-container .success-message-container p { + margin: 2vw; + color: #ffffff; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 22pt; +} +.identify-container .success-message-container { + background-color: var(--lightest-color); +} +.identify-container .success-message-container p { + color: #464646; +} +.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: var(--second-color); + cursor: pointer; + transition: 0.4s ease-in-out; + filter: brightness(80%); +} +.identify-container .identify .options-container .option h2 { + color: #ffffff; +} +.identify-container .identify .options-container .active-option { + cursor: initial; + filter: brightness(100%); +} +.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 var(--border-color); + outline: none; + background-color: var(--main-background-color); + color: var(--second-text-color); +} +.identify-container .identify .form-container form input.login { + background-color: var(--second-background-color); + color: var(--second-text-color); +} +.identify-container .identify .form-container form input.register { + background-color: var(--second-background-color); +} +.identify-container .identify .form-container form input[type=submit] { + width: 50%; + border: var(--border-color) solid 1px; +} + +.reset-password { + height: 4vh; + width: 60%; + margin-bottom: 1vh; + border: none; + border-bottom: 1px solid var(--border-color); + outline: none; + width: 50%; + border: var(--border-color) solid 1px; + background-color: var(--lightest-color-darker); +}/*# sourceMappingURL=identify-styles.css.map */ \ No newline at end of file diff --git a/src/pages/Identify/identify-styles.css.map b/src/pages/Identify/identify-styles.css.map new file mode 100644 index 0000000..c0c7eb2 --- /dev/null +++ b/src/pages/Identify/identify-styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["identify-styles.scss","identify-styles.css"],"names":[],"mappings":"AAAA;EAMI,aAAA;EACA,sBAAA;EACA,mBAAA;EAEA,YAAA;ACLJ;ADHI;EACI,YAAA;ACKR;ADII;EACI,WAAA;EAEA,yBAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;ACJR;ADMQ;EACI,WAAA;EACA,cAAA;EAEA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,eAAA;ACNZ;ADYI;EAEI,uCAAA;ACXR;ADaQ;EAEI,cAAA;ACZZ;ADgBI;EACI,WAAA;ACdR;ADgBQ;EACI,aAAA;ACdZ;ADgBY;EACI,WAAA;EAEA,aAAA;EACA,6BAAA;EAEA,gBAAA;EACA,qCAAA;EAEA,eAAA;EAEA,4BAAA;EAEA,uBAAA;ACnBhB;ADqBgB;EACI,cAAA;ACnBpB;ADuBY;EACI,eAAA;EACA,wBAAA;ACrBhB;ADyBQ;EAEI,aAAA;EACA,uBAAA;ACxBZ;AD0BY;EACI,WAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EAEA,gBAAA;AC1BhB;AD6BgB;EACI,WAAA;EACA,UAAA;EAEA,kBAAA;EAEA,YAAA;EACA,4CAAA;EACA,aAAA;EAEA,8CAAA;EACA,+BAAA;AC9BpB;ADgCoB;EACI,gDAAA;EACA,+BAAA;AC9BxB;ADiCoB;EACI,gDAAA;AC/BxB;ADmCgB;EACI,UAAA;EACA,qCAAA;ACjCpB;;ADwCA;EACI,WAAA;EACA,UAAA;EAEA,kBAAA;EAEA,YAAA;EACA,4CAAA;EACA,aAAA;EAEA,UAAA;EACA,qCAAA;EACA,8CAAA;ACxCJ","file":"identify-styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_identify.scss b/src/pages/Identify/identify-styles.scss similarity index 58% rename from public/sass_styles/_identify.scss rename to src/pages/Identify/identify-styles.scss index 7273719..fffe558 100644 --- a/public/sass_styles/_identify.scss +++ b/src/pages/Identify/identify-styles.scss @@ -1,12 +1,9 @@ -html, body { - height: 100%; -} - .identify-container { &:has { height: 100%; } + display: flex; flex-direction: column; align-items: center; @@ -26,11 +23,9 @@ html, body { margin: 2vw; color: #ffffff; - @include titleFont(); user-select: none; font-size: 22pt; - } @@ -38,7 +33,7 @@ html, body { .success-message-container { - background-color: $lightest-color; + background-color: var(--lightest-color); p { @@ -59,23 +54,22 @@ html, body { justify-content: space-around; padding: 5vh 0px; - background-color: $second-color; + background-color: var(--second-color); cursor: pointer; transition: 0.4s ease-in-out; + + filter: brightness(80%); h2 { - @include titleFont(); - @include normalizeTitle(); - color: #ffffff; } } .active-option { cursor: initial; - background-color: $second-color-darker; + filter: brightness(100%); } } @@ -101,33 +95,29 @@ html, body { margin-bottom: 1vh; border: none; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color); outline: none; + background-color: var(--main-background-color); + color: var(--second-text-color); + + &.login { + background-color: var(--second-background-color); + color: var(--second-text-color); + } + + &.register { + background-color: var(--second-background-color); + } } input[type=submit] { width: 50%; - border: $border-color solid 1px; + border: var(--border-color) solid 1px; } } } } - - -} - -.loading-container { - width: 100%; - height: 83vh; - - display: flex; - justify-content: center; - align-items: center; - - &.dark-mode-component { - background-color:$main-color-dark ; - } } .reset-password { @@ -137,48 +127,10 @@ html, body { margin-bottom: 1vh; border: none; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color); outline: none; width: 50%; - border: $border-color solid 1px; - background-color: $main-color; - -} - -.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; - } - } - } -} + border: var(--border-color) solid 1px; + background-color: var(--lightest-color-darker); } \ No newline at end of file diff --git a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx new file mode 100644 index 0000000..cf6b49c --- /dev/null +++ b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx @@ -0,0 +1,206 @@ +import './clockify-task-form.css' + +import React, { useState } from 'react'; +import { getAuth, onAuthStateChanged } from "firebase/auth"; +import { doc, getDoc, getFirestore } from "firebase/firestore"; + +import { firebase } from '../../../Firebase/firebase'; +import Loading from "../../../components/Loading/Loading"; + +const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, taskName, setTaskName, workspaceID, setWorkspaceID, projectID, setProjectID, darkMode}) => { + + const auth = getAuth() + + const [userUID, setUserUID] = useState('') + + const [workspaces, setWorkspaces] = useState([]) + const [workspacesReady, setWorkspacesReady] = useState(false) + + const [projects, setProjects] = useState([]) + const [projectsDone, setProjectsDone] = useState(false) + + const [loading, setLoading] = useState(true) + + async function getApiKey() { + + try { + + const db = getFirestore(firebase) + + const reference = doc(db, 'users', userUID) + + const dataSnap = await getDoc(reference) + const result = dataSnap.data() + + if (result.keyClockify) { + + await generateArrayOfWorkspaces(result.keyClockify) + } + + + } catch (error) { + } + + setLoading(false) + } + + React.useEffect(() => { + + if (signedIn) { + + onAuthStateChanged(auth, async (user) => { + + if (user) { + + setUserUID(user.uid) + + if (user.uid) { + await getApiKey() + setLoading(false) + } + } else { + return (<>) + } + + }) + } else { + setLoading(false) + } + + }, [signedIn, getApiKey]) + + async function makeRequestWorkspaces(apiClockify) { + try { + const request = { + method: "GET", + headers: { + 'X-Api-Key': apiClockify, + "content-type": "application/json" + } + } + const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request) + const data = await response.json() + + setApiKey(apiClockify) + + return await data + + } catch (error) { + + } + } + + async function generateArrayOfWorkspaces(key) { + + const data = await makeRequestWorkspaces(key) + + if (data.code !== 1000) { + let workspacesCopy = [] + + await data.forEach(workspace => { + workspacesCopy.push(workspace) + }); + + setWorkspaces(workspacesCopy) + + setWorkspacesReady(true) + setLoading(false) + } + } + + async function requestProjects(e) { + + try { + const request = { + method: "GET", + headers: { + 'X-Api-Key': apiKey, + "content-type": "application/json" + } + } + const response = await fetch(`https://api.clockify.me/api/v1/workspaces/${e}/projects`, request) + const data = response.json() + + return data + + } catch (error) { + console.log(error); + } + } + + const defineProjects = async (e) => { + + if (e === 0) { + setProjectsDone(false) + setProjects([]) + + } + setWorkspaceID(e) + + const data = await requestProjects(e) + setProjects(data) + setProjectsDone(true) + } + + const selectProject = (e) => { + + setProjectID(e) + } + + return ( + <> + { + loading ? + + : +
    + { + userUID ? +
    + + + {setTaskName(e.target.value)}} + value={taskName} + placeholder="Add task description" + className={projectID !== 0 ? null: 'disabled'} + + onKeyPress={event => { + + if (event.key === 'Enter') { + + setTimerOn(true) + } + }} + /> +
    + : null + } +
    + } + + ) +} + +export default ClockifyTaskForm diff --git a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css new file mode 100644 index 0000000..467cc6b --- /dev/null +++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css @@ -0,0 +1,91 @@ +.clockify-task-form { + width: 20vw; + position: absolute; + top: 60vh; + left: 2.5vw; +} +.clockify-task-form.loading-container { + width: 20vw; + height: auto; + background: none; +} +.clockify-task-form.disabled { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; +} +.clockify-task-form .workspace-selector, .clockify-task-form .project-selector { + width: 15vw; + height: 3vw; +} +.clockify-task-form .workspace-selector.disabled, .clockify-task-form .project-selector.disabled { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; +} +.clockify-task-form select { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.clockify-task-form input[type=text] { + width: 15vw; + height: 3vw; + font-size: 12pt; + outline: none; + padding: 1px 2px; + box-sizing: border-box; +} +.clockify-task-form input[type=text].disabled { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; +} + +@media (max-width: 991.98px) { + .clockify-tasks-display { + position: initial; + width: auto; + display: flex; + justify-content: space-around; + padding: 3vh 5vw; + } + .clockify-tasks-display.loading-container { + width: 90%; + height: auto; + } + .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { + width: 20vw; + height: 5vw; + } +} +@media (max-width: 576px) { + .clockify-tasks-display { + position: initial; + width: auto; + display: flex; + flex-direction: column; + align-items: center; + } + .clockify-tasks-display.loading-container { + width: 90%; + height: auto; + } + .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { + width: 70%; + height: 4vh; + margin-top: 1vh; + } +}/*# sourceMappingURL=clockify-task-form.css.map */ \ No newline at end of file diff --git a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map new file mode 100644 index 0000000..ece60ba --- /dev/null +++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EAEI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACDJ;ADGI;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACDR;ADII;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACFR;ADKI;EACI,WAAA;EACA,WAAA;ACHR;ADKQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACHZ;ADOI;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACLR;ADQI;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACTR;ADWQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACTZ;;ADcA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECdN;EDgBM;IACI,UAAA;IACA,YAAA;ECdV;EDiBM;IACI,WAAA;IACA,WAAA;ECfV;AACF;ADoBA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;ECpBN;EDsBM;IACI,UAAA;IACA,YAAA;ECpBV;EDuBM;IACI,UAAA;IACA,WAAA;IACA,eAAA;ECrBV;AACF","file":"clockify-task-form.css"} \ No newline at end of file diff --git a/public/sass_styles/_clockify-tasks-display.scss b/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss similarity index 91% rename from public/sass_styles/_clockify-tasks-display.scss rename to src/pages/Main/ClockifyTaskForm/clockify-task-form.scss index 6992b20..a33d5db 100644 --- a/public/sass_styles/_clockify-tasks-display.scss +++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss @@ -1,4 +1,4 @@ -.clockify-tasks-display { +.clockify-task-form { width: 20vw; position: absolute; @@ -40,8 +40,6 @@ input[type=text] { width: 15vw; height: 3vw; - - @include bodyFont(); font-size: 12pt; @@ -104,11 +102,4 @@ margin-top: 1vh; } } -} - -.clockify-tasks-display-container.dark-mode-container { - - background-color: $second-color-dark; - - } \ No newline at end of file diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx new file mode 100644 index 0000000..b14b203 --- /dev/null +++ b/src/pages/Main/Main.jsx @@ -0,0 +1,69 @@ +import React, { useState } from 'react' +import GoDownArrow from '../../components/GoDownArrow/GoDownArrow' +import ClockifyTaskForm from './ClockifyTaskForm/ClockifyTaskForm' +import Pomodoro from './Pomodoro/Pomodoro' + +const Main = ({signedIn, darkMode, setKonamiCodeActive, KonamiCodeActive, notificationPermission}) => { + + const [timerOn, setTimerOn] = useState(false) + const [apiKey, setApiKey] = useState('') + const [taskName, setTaskName] = useState('') + + const [workspaceID, setWorkspaceID] = useState(0) + const [projectID, setProjectID] = useState(0) + + return ( + <> + + + + + ) +} + +export default Main \ No newline at end of file diff --git a/src/pages/Main/Pomodoro/Pomodoro.jsx b/src/pages/Main/Pomodoro/Pomodoro.jsx new file mode 100644 index 0000000..b503ec2 --- /dev/null +++ b/src/pages/Main/Pomodoro/Pomodoro.jsx @@ -0,0 +1,152 @@ +import './pomodoro-styles.css' + +import React, {useState} from 'react' + +import PomodoroTimer from './PomodoroTimer/PomodoroTimer' +import StyleSelector from './StyleSelector/StyleSelector' + +const Pomodoro = (props) => { + + const [style, setStyle] = useState({title: "Regular", times: [25, 5, 15]}) //Regular time set + const [displayHidden, setDisplayHidden] = useState(true) + + const [stats, setStats] = useState({pomodoros: 0, rests: 0, longRests: 0}) + + const [startTime, setStartTime] = useState('') + const [endTime, setEndTime] = useState('') + + const [letsUpload, setLetsUpload] = useState(false) + + + const showStyles = () => { + setDisplayHidden(!displayHidden) + } + + React.useEffect( () => { + if (letsUpload) { + + async function uploadToClockifyTimer() { + + if (!props.workspaceID && !props.projectID) { + return + } + + try { + const url = `https://api.clockify.me/api/v1/workspaces/${props.workspaceID}/time-entries` + + const body = { + start: startTime, + end: endTime, + projectId: props.projectID, + description: props.taskName + } + + const headers = { + 'X-Api-Key': props.apiKey, + 'Content-type' : 'application/json; charset=UTF-8' + } + + const request = { + method: 'POST', + body: JSON.stringify(body), + headers + } + + await fetch(url, request) + + } catch (error) { + } + } + + uploadToClockifyTimer() + + setLetsUpload(false) + + setStartTime('') + setEndTime('') + } + }) + + return ( +
    +
    + + + + +
    +

    + Style +

    +

    + {style.title} +

    +
    + + +
    + + + +
    +
      + { + Object.keys(stats).map(stat => { + //camelCase to Natural Case + const text = stat.replace(/([A-Z])/g, " $1") + const result = text.charAt(0).toUpperCase() + text.slice(1); + //Credits: https://stackoverflow.com/a/7225450/18740899 + + return ( +
    • + {stats[stat]} - {result} +
      • + ) + }) + } +
    +
    +
    + ) +} + +export default Pomodoro diff --git a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx b/src/pages/Main/Pomodoro/PomodoroTimer/PomodoroTimer.jsx similarity index 79% rename from src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx rename to src/pages/Main/Pomodoro/PomodoroTimer/PomodoroTimer.jsx index 18723f4..d5e831d 100644 --- a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx +++ b/src/pages/Main/Pomodoro/PomodoroTimer/PomodoroTimer.jsx @@ -1,15 +1,13 @@ import React, {useState} from 'react' -import uploadToClockifyTimer from '../Clockify/uploadToClockifyTimer' -import getAndFormatCurrentTime from '../Clockify/getAndFormatCurrentTime' -import randomText from '../Misc/randomText' -import detectKeys from '../Misc/detectKeys' +import getAndFormatCurrentTime from './getAndFormatCurrentTime' +import randomText from './randomText' +import detectKeys from './detectKeys' -import bell_x2 from '../sounds/bell-x2.mp3' -import bell_x3 from '../sounds/bell-x3.mp3' -import setTimeStyleExternal from './MainPomodoroTimer Children/setTimeStyle' +import bell_x2 from '../../../../sounds/bell-x2.mp3' +import bell_x3 from '../../../../sounds/bell-x3.mp3' -const MainPomodoroTimer = (props) => { +const PomodoroTimer = (props) => { const [minutes, setMinutes] = useState(25) const [seconds, setSeconds] = useState(0) @@ -21,7 +19,7 @@ const MainPomodoroTimer = (props) => { const [timerActivity, setTimerActivity] = useState(false) - const [actualStyle, setActualStyle] = useState('') + const [actualStyle, setActualStyle] = useState({title: "", times: []}) const [alreadyCountingStart, setAlreadyCountingStart] = useState(false) /* TOO MUCH FUCKING STATES https://pbs.twimg.com/media/EoM2rXuW8AMRxZh?format=png&name=large*/ const [alreadyCountingEnd, setAlreadyCountingEnd] = useState(false) @@ -30,13 +28,29 @@ const MainPomodoroTimer = (props) => { const [velocity, setVelocity] = useState(1) - const setTimeStyle = () => setTimeStyleExternal(props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime) + function setPomodoroTime() { + setMinutes(props.style.times[0]) + setSeconds(0) - React.useEffect (() => { + setBreakTime( + { + normal: { + minutes: props.style.times[1], + seconds: 0 + }, + extended: { + minutes: props.style.times[2], + seconds: 0 + } + } + ) - if (actualStyle !== props.style) { - setTimeStyle() + setActualStyle(props.style) + } + React.useEffect(() => { + if (actualStyle.title !== props.style.title) { + setPomodoroTime() } if (controlKonamiCode) { @@ -45,7 +59,7 @@ const MainPomodoroTimer = (props) => { setControlKonamiCode(false) } - }) + }, [props.style]) const startTimer = () => { @@ -101,44 +115,20 @@ const MainPomodoroTimer = (props) => { if (!counter) { console.error('NOT PARAMETER PASSED') } - - if (counter === "Pomodoros") { - props.setPomodoros(props.pomodoros + 1) - return - } - if (counter === "Rest") { - props.setRests(props.rests + 1) - return - } - - if (counter === "Long Rest") { - props.setLongRests(props.longRests + 1) - return - } - - if (counter) { - console.error('PARAMETER NOT VALID'); - } + //Get propiertys of stats obj + Object.keys(props.stats).forEach(stat => { + if (counter === stat) { + const statsCopy = {...props.stats} + statsCopy[stat] = props.stats[stat] + 1 + + props.setStats(statsCopy) + } + }) } - /*React.useEffect( () => { - - if (props.timerOn) { - getAndFormatCurrentTime() - } - - if (!props.timerOn){ - getAndFormatCurrentTime() - //uploadToClockifyTimer( props.workspaceID, props.projectID, '2021-10-02T13:00:14Z', '2021-10-02T15:00:14Z', props.apiKey) - } - - })*/ - const getFavicon = () => { - return document.getElementById('favicon') - } React.useEffect ( () => { @@ -175,23 +165,21 @@ const MainPomodoroTimer = (props) => { if (restCounter !== 3){ - setPomodoroCounter('Pomodoros') + setPomodoroCounter('pomodoros') setRestCounter((restCounter + 1)) setBreak(1, 0) setWeAreInBreakTime(true) - - } if (restCounter === 3) { - setPomodoroCounter('Pomodoros') + setPomodoroCounter('pomodoros') setRestCounter((restCounter + 1)) setBreak(0, 1) - setWeAreInBreakTime(true) + setWeAreInBreakTime(true) } if (!alreadyCountingEnd) { @@ -208,7 +196,6 @@ const MainPomodoroTimer = (props) => { } if (minutes >= 0 || seconds > 0) { - idTimeOut = startTimer() } } @@ -231,18 +218,17 @@ const MainPomodoroTimer = (props) => { } if (restCounter === 4) { - setPomodoroCounter('Long Rest') + setPomodoroCounter('longRests') setRestCounter(0) } else { - setPomodoroCounter('Rest') + setPomodoroCounter('rests') } setWeAreInBreakTime(false) props.setTimerOn(false) - setTimeStyle() - + setPomodoroTime() }, 1000) } @@ -253,25 +239,18 @@ const MainPomodoroTimer = (props) => { } } - return () => { - clearInterval(idTimeOut) - } - + return () => { clearInterval(idTimeOut) } } if (!props.timerOn) { - document.title = 'Clockify Pomodoro Timer' - getFavicon().href = './img/favicon.ico' if ( timerActivity === true) { - if (!weAreInBreakTime) { - if (restCounter !== 3){ - setPomodoroCounter('Pomodoros') + setPomodoroCounter('pomodoros') setRestCounter((restCounter + 1)) if (!alreadyCountingEnd) { @@ -288,12 +267,11 @@ const MainPomodoroTimer = (props) => { setWeAreInBreakTime(true) }, 10) } - if (restCounter === 3) { setTimeout(() => { - setPomodoroCounter('Pomodoros') + setPomodoroCounter('pomodoros') setRestCounter((restCounter + 1)) setBreak(0, 1) @@ -319,21 +297,19 @@ const MainPomodoroTimer = (props) => { if (weAreInBreakTime) { if (restCounter === 4) { - - setPomodoroCounter('Long Rest') + setPomodoroCounter('longRests') setRestCounter(0) - } else { - setPomodoroCounter('Rest') + setPomodoroCounter('rests') } setWeAreInBreakTime(false) } setTimerActivity(false) - setTimeStyle() + setPomodoroTime() } setAlreadyCountingStart(false) @@ -346,7 +322,7 @@ const MainPomodoroTimer = (props) => { if (minutes < 10) { return '0' + minutes - } + } else { return minutes } @@ -356,7 +332,7 @@ const MainPomodoroTimer = (props) => { if (seconds < 10) { return '0' + seconds - } + } else { return seconds } @@ -394,4 +370,4 @@ const MainPomodoroTimer = (props) => { ) } -export default MainPomodoroTimer +export default PomodoroTimer diff --git a/src/components/Misc/detectKeys.js b/src/pages/Main/Pomodoro/PomodoroTimer/detectKeys.js similarity index 100% rename from src/components/Misc/detectKeys.js rename to src/pages/Main/Pomodoro/PomodoroTimer/detectKeys.js diff --git a/src/components/Clockify/getAndFormatCurrentTime.js b/src/pages/Main/Pomodoro/PomodoroTimer/getAndFormatCurrentTime.js similarity index 100% rename from src/components/Clockify/getAndFormatCurrentTime.js rename to src/pages/Main/Pomodoro/PomodoroTimer/getAndFormatCurrentTime.js diff --git a/src/components/Misc/randomText.js b/src/pages/Main/Pomodoro/PomodoroTimer/randomText.js similarity index 100% rename from src/components/Misc/randomText.js rename to src/pages/Main/Pomodoro/PomodoroTimer/randomText.js diff --git a/src/components/Main Pomodoro Childrens/timer.js b/src/pages/Main/Pomodoro/PomodoroTimer/timerLogic.js similarity index 100% rename from src/components/Main Pomodoro Childrens/timer.js rename to src/pages/Main/Pomodoro/PomodoroTimer/timerLogic.js diff --git a/src/pages/Main/Pomodoro/StyleSelector/StyleSelector.jsx b/src/pages/Main/Pomodoro/StyleSelector/StyleSelector.jsx new file mode 100644 index 0000000..eeaf126 --- /dev/null +++ b/src/pages/Main/Pomodoro/StyleSelector/StyleSelector.jsx @@ -0,0 +1,75 @@ +import './style-selector.css' + +import React from 'react' + +const StyleSelector = (props) => { + + const data = [ + { + title: "Can I play, Daddy?", + times: [10, 5, 15] + }, + { + title: "Regular", + times: [25, 5, 15] + }, + { + title: "Creative work", + times: [50, 10, 20] + }, + { + title: "Last minute delivery", + times: [90, 15, 30] + } + ] + + return ( +
    +
    +

    Select Style

    + +
    + { + data.map((obj, index) => ( +
    + { + props.setStyle(obj) + }} + > + + + + +
    + )) + } +
    +
    +
    + ) +} + +export default StyleSelector diff --git a/src/pages/Main/Pomodoro/StyleSelector/style-selector.css b/src/pages/Main/Pomodoro/StyleSelector/style-selector.css new file mode 100644 index 0000000..eca1e11 --- /dev/null +++ b/src/pages/Main/Pomodoro/StyleSelector/style-selector.css @@ -0,0 +1,112 @@ +.style-selector { + width: calc(20vw - 1px); + padding-left: 3vw; + padding-bottom: 12vh; + position: absolute; + top: 29vh; + left: 75vw; + box-shadow: 1px 6px 15px rgba(0, 0, 0, 0.1254901961); + z-index: 50; + transition: 0.2s ease-in-out; +} +.style-selector h2 { + color: var(--main-text-color); + font-size: 30pt; + text-align: center; + margin-left: -3vw; + margin-top: 1vh; + margin-bottom: 3vh; +} +.style-selector .style-selection-container .style-container { + display: flex; + height: 10vh; + align-items: center; +} +.style-selector .style-selection-container .style-container label { + display: flex; + flex-direction: column; + justify-content: center; + color: var(--second-text-color); +} +.style-selector .style-selection-container .style-container label .title { + font-size: 13pt; +} +.style-selector .style-selection-container .style-container label .times { + color: var(--third-text-color); + font-size: 13pt; +} +.style-selector .style-selection-container input { + width: 65px; + opacity: 0; +} +.style-selector .style-selection-container .checkbox__input { + display: grid; + grid-template-areas: "checkbox"; +} +.style-selector .style-selection-container .checkbox__input > * { + grid-area: checkbox; +} +.style-selector .style-selection-container .checkbox_control { + display: inline-grid; + width: 45px; + height: 45px; + border: 3px solid var(--main-text-color); + border-radius: 0.25em; + border-radius: 100%; + transition: ease-in-out 0.2s; +} +.style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control { + background-color: var(--lightest-color); +} + +.style-selector-show { + opacity: 100%; + pointer-events: auto; +} + +.style-selector-hidden { + opacity: 0%; + pointer-events: none; +} + +@media (max-width: 991.98px) { + .style-selector { + position: initial; + margin: 0 0 5% 0; + width: 100%; + padding: 0; + padding: 0px 5vw; + box-sizing: border-box; + } + .style-selector h2 { + text-align: start; + margin-left: 0; + } + .style-selector .style-selection-container { + display: flex; + flex-wrap: wrap; + width: 100%; + } + .style-selector .style-selection-container .style-container { + height: 100%; + width: 30%; + margin: 1% 10%; + } +} +@media (max-width: 918px) { + .style-selector { + margin-bottom: 5vh; + } + .style-selector .style-selection-container { + flex-wrap: nowrap; + flex-direction: column; + } + .style-selector .style-selection-container .style-container { + width: 60%; + } +} +@media (max-width: 462px) { + .style-selector .style-selection-container .style-container { + width: 100%; + } +}/*# sourceMappingURL=style-selector.css.map */ \ No newline at end of file diff --git a/src/pages/Main/Pomodoro/StyleSelector/style-selector.css.map b/src/pages/Main/Pomodoro/StyleSelector/style-selector.css.map new file mode 100644 index 0000000..eb05100 --- /dev/null +++ b/src/pages/Main/Pomodoro/StyleSelector/style-selector.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style-selector.scss","style-selector.css"],"names":[],"mappings":"AAAA;EAEI,uBAAA;EAEA,iBAAA;EACA,oBAAA;EAEA,kBAAA;EAEA,SAAA;EACA,UAAA;EAEA,oDAAA;EAEA,WAAA;EAyEA,4BAAA;AC7EJ;ADMI;EACI,6BAAA;EACA,eAAA;EACA,kBAAA;EAEA,iBAAA;EACA,eAAA;EACA,kBAAA;ACLR;ADSQ;EACI,aAAA;EACA,YAAA;EAEA,mBAAA;ACRZ;ADUY;EACI,aAAA;EACA,sBAAA;EACA,uBAAA;EAEA,+BAAA;ACThB;ADWgB;EACI,eAAA;ACTpB;ADYgB;EACI,8BAAA;EACA,eAAA;ACVpB;ADeQ;EACI,WAAA;EACA,UAAA;ACbZ;ADgBQ;EACI,aAAA;EACA,+BAAA;ACdZ;ADgBY;EACI,mBAAA;ACdhB;ADmBQ;EACI,oBAAA;EAEA,WAAA;EACA,YAAA;EAEA,wCAAA;EACA,qBAAA;EACA,mBAAA;EAEA,4BAAA;ACpBZ;ADuBQ;EAEI,uCAAA;ACtBZ;;AD+BA;EACI,aAAA;EACA,oBAAA;AC5BJ;;AD+BA;EACI,WAAA;EACA,oBAAA;AC5BJ;;AD+BA;EACI;IACI,iBAAA;IAEA,gBAAA;IAEA,WAAA;IAEA,UAAA;IACA,gBAAA;IAEA,sBAAA;EChCN;EDkCM;IACI,iBAAA;IAEA,cAAA;ECjCV;EDqCM;IAEI,aAAA;IAEA,eAAA;IAEA,WAAA;ECtCV;EDwCU;IACI,YAAA;IACA,UAAA;IAEA,cAAA;ECvCd;AACF;AD4CA;EAEI;IAWI,kBAAA;ECrDN;ED4CM;IACI,iBAAA;IAEA,sBAAA;EC3CV;ED6CU;IACI,UAAA;EC3Cd;AACF;ADkDA;EAMY;IACI,WAAA;ECrDd;AACF","file":"style-selector.css"} \ No newline at end of file diff --git a/public/sass_styles/_styleSelector.scss b/src/pages/Main/Pomodoro/StyleSelector/style-selector.scss similarity index 71% rename from public/sass_styles/_styleSelector.scss rename to src/pages/Main/Pomodoro/StyleSelector/style-selector.scss index 17f8d85..8c708aa 100644 --- a/public/sass_styles/_styleSelector.scss +++ b/src/pages/Main/Pomodoro/StyleSelector/style-selector.scss @@ -15,22 +15,16 @@ z-index: 50; h2 { - @include bodyFont; - color: $second-color; + color: var(--main-text-color); font-size: 30pt; text-align: center; margin-left: -3vw; - - - margin-top: 1vh; margin-bottom: 3vh; } .style-selection-container { - - .style-container{ display: flex; height: 10vh; @@ -42,16 +36,15 @@ flex-direction: column; justify-content: center; + color: var(--second-text-color); + .title { - @include bodyFont; font-size: 13pt; } .times { - @include bodyFont; - color: $second-color; + color: var(--third-text-color); font-size: 13pt; - } } } @@ -77,7 +70,7 @@ width: 45px; height: 45px; - border: 3px solid $main-color; + border: 3px solid var(--main-text-color); border-radius: 0.25em; border-radius: 100%; @@ -86,7 +79,7 @@ .checkbox__input input:checked + .checkbox_control { - background-color: $light-color; + background-color: var(--lightest-color); } // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/ @@ -173,43 +166,4 @@ } } -} - -.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/src/pages/Main/Pomodoro/pomodoro-styles.css b/src/pages/Main/Pomodoro/pomodoro-styles.css new file mode 100644 index 0000000..4d35bdb --- /dev/null +++ b/src/pages/Main/Pomodoro/pomodoro-styles.css @@ -0,0 +1,101 @@ +.main-pomodoro { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 68vh; + background-color: var(--main-background-color); +} +.main-pomodoro .timer { + display: flex; + justify-content: center; + font-weight: bold; + font-size: 130pt; + color: var(--main-text-color); +} +.main-pomodoro .style-display { + display: flex; + align-items: center; + flex-direction: column; +} +.main-pomodoro .style-display h4 { + font-size: 24pt; + color: var(--main-text-color); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.main-pomodoro .style-display h3 { + font-size: 30pt; + color: var(--main-text-color); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.main-pomodoro .start-pomodoro { + margin-top: 6vh; + width: 30vw; + height: 8vh; + font-family: var(--title-font); + font-weight: 700; + background: var(--second-color); + border-radius: 24px; + font-size: 5vh; + color: white; +} + +.pomodoro-counter { + position: absolute; + top: 29vh; + color: var(--pomodoro-counter-text-color); +} +.pomodoro-counter ul li { + display: flex; + list-style-type: none; + margin-top: 2vh; + font-size: 15pt; +} +.pomodoro-counter ul li .separator { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin: 0px 0.5vw; +} +.pomodoro-counter ul li .quantity { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--lightest-color); + height: 30px; + width: 30px; + border-radius: 100%; + font-family: var(--title-font); + font-weight: 700; + color: var(--main-text-color); +} + +@media (max-width: 991.98px) { + .pomodoro-counter { + position: initial; + padding-bottom: 5vh; + } +} +@media (max-width: 576px) { + .main-pomodoro { + height: auto; + } + .main-pomodoro .timer { + font-size: 80pt; + } + .main-pomodoro .start-pomodoro { + font-size: 13pt; + } +}/*# sourceMappingURL=pomodoro-styles.css.map */ \ No newline at end of file diff --git a/src/pages/Main/Pomodoro/pomodoro-styles.css.map b/src/pages/Main/Pomodoro/pomodoro-styles.css.map new file mode 100644 index 0000000..d96c5f7 --- /dev/null +++ b/src/pages/Main/Pomodoro/pomodoro-styles.css.map @@ -0,0 +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"} \ No newline at end of file diff --git a/src/pages/Main/Pomodoro/pomodoro-styles.scss b/src/pages/Main/Pomodoro/pomodoro-styles.scss new file mode 100644 index 0000000..4eca6c3 --- /dev/null +++ b/src/pages/Main/Pomodoro/pomodoro-styles.scss @@ -0,0 +1,127 @@ +.main-pomodoro { + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + height: 68vh; + + background-color: var(--main-background-color); + + .timer { + + display: flex; + justify-content: center; + + font-weight: bold; + font-size: 130pt; + + color: var(--main-text-color); + } + + .style-display { + + display: flex; + align-items: center; + flex-direction: column; + + h4 { + font-size: 24pt; + + color: var(--main-text-color); + user-select: none; + } + + h3 { + font-size: 30pt; + + color: var(--main-text-color); + + cursor: pointer; + user-select: none; + } + } + + .start-pomodoro { + margin-top: 6vh; + width: 30vw; + height: 8vh; + + font-family: var(--title-font); + font-weight: 700; + + background: var(--second-color); + border-radius: 24px; + + font-size: 5vh; + color: white; + } +} + +.pomodoro-counter { + position: absolute; + top: 29vh; + color: var(--pomodoro-counter-text-color); + + ul { + li { + display: flex; + + list-style-type: none; + margin-top: 2vh; + + font-size: 15pt; + + .separator { + user-select: none; + margin: 0px 0.5vw; + } + + .quantity { + + user-select: none; + + display: flex; + justify-content: center; + align-items: center; + + background-color: var(--lightest-color); + + height: 30px; + width: 30px; + + border-radius: 100%; + + font-family: var(--title-font); + font-weight: 700; + color: var(--main-text-color); + } + } + } +} + +@media (max-width: 991.98px) { + + .pomodoro-counter { + + position: initial; + padding-bottom: 5vh; + } +} + +@media (max-width: 576px) { + + .main-pomodoro { + + height: auto; + + .timer { + font-size: 80pt; + } + + .start-pomodoro { + font-size: 13pt; + } + } +} \ No newline at end of file diff --git a/src/components/sounds/bell-x2.mp3 b/src/sounds/bell-x2.mp3 similarity index 100% rename from src/components/sounds/bell-x2.mp3 rename to src/sounds/bell-x2.mp3 diff --git a/src/components/sounds/bell-x3.mp3 b/src/sounds/bell-x3.mp3 similarity index 100% rename from src/components/sounds/bell-x3.mp3 rename to src/sounds/bell-x3.mp3 diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..4c52229 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,51 @@ +body { + --main-text-color: #1FAB89; + --second-text-color: #272727; + --third-text-color: #fff; + --pomodoro-counter-text-color: #8d8d8d; + --main-background-color: #fff; + --second-background-color: #fff; + --main-color: #62D2A2; + --second-color: #1FAB89; + --light-color: #9DF3C4; + --light-color-darker: #3c8f61; + --lightest-color: #D7FBE8; + --lightest-color-darker: #b2e9cb; + --body-font: "Rambla", sans-serif; + --title-font: "Raleway", sans-serif; + --border-color: #969696; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + height: 100%; + background-color: var(--main-background-color); +} + +button { + background: none; + border: none; + width: 8vw; +} + +h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; +} + +* { + font-family: "Rambla", sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Raleway", sans-serif; + font-weight: 700; +} + +a { + color: rgb(85, 185, 252); +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/src/styles.css.map b/src/styles.css.map new file mode 100644 index 0000000..19012b1 --- /dev/null +++ b/src/styles.css.map @@ -0,0 +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"} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..55a7bb1 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,57 @@ +body { + + --main-text-color: #1FAB89; + --second-text-color: #272727; + --third-text-color: #fff; + --pomodoro-counter-text-color: #8d8d8d; + + --main-background-color: #fff; + --second-background-color: #fff; + + --main-color: #62D2A2; + --second-color: #1FAB89; + + --light-color: #9DF3C4; + --light-color-darker: #3c8f61; + + --lightest-color: #D7FBE8; + --lightest-color-darker: #b2e9cb; + + --body-font: 'Rambla', sans-serif; + --title-font: 'Raleway', sans-serif; + --border-color: #969696; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + height: 100%; + background-color: var(--main-background-color); +} + +button { + background: none; + border: none; + width: 8vw; +} + +h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; +} + +* { + font-family: 'Rambla', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; + font-weight: 700; +} + +a { + color: rgb(85, 185, 252); +} \ No newline at end of file