From e2329e5342796657b1e31d856721deb0c0469079 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Tue, 24 May 2022 14:45:44 -0300 Subject: [PATCH] Redesigned the responsive design --- src/components/Header/Header.jsx | 15 +- .../ThemeSwitch/theme-switch-styles.css | 9 + .../ThemeSwitch/theme-switch-styles.css.map | 2 +- .../ThemeSwitch/theme-switch-styles.scss | 11 + src/components/Header/header-styles.css | 168 ++++------ src/components/Header/header-styles.css.map | 2 +- src/components/Header/header-styles.scss | 312 ++++++++---------- .../ClockifyTaskForm/ClockifyTaskForm.jsx | 3 +- .../ClockifyTaskForm/clockify-task-form.css | 45 ++- .../clockify-task-form.css.map | 2 +- .../ClockifyTaskForm/clockify-task-form.scss | 76 +++-- .../Pomodoro/StyleSelector/style-selector.css | 2 +- .../StyleSelector/style-selector.scss | 2 +- src/pages/Main/Pomodoro/pomodoro-styles.css | 1 + .../Main/Pomodoro/pomodoro-styles.css.map | 2 +- src/pages/Main/Pomodoro/pomodoro-styles.scss | 2 + src/styles.css | 10 +- src/styles.css.map | 2 +- src/styles.scss | 10 +- 19 files changed, 322 insertions(+), 354 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 4728864..c908a44 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,6 +2,7 @@ import './header-styles.css' import React from 'react' import ThemeSwitch from './ThemeSwitch/ThemeSwitch' +import { Link } from 'react-router-dom' const Header = (props) => { @@ -19,17 +20,17 @@ const Header = (props) => { return (
-

Clockify Pomodoro Timer

+

Clockify Pomodoro Timer

{ props.signedIn ? <> - -
API
- - -
Close session
- + + + + + + : null } diff --git a/src/components/Header/ThemeSwitch/theme-switch-styles.css b/src/components/Header/ThemeSwitch/theme-switch-styles.css index 16e1542..47f0d18 100644 --- a/src/components/Header/ThemeSwitch/theme-switch-styles.css +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.css @@ -9,6 +9,7 @@ .theme-switch label { display: block; width: 4vw; + min-width: 80px; height: 4vh; background-color: var(--lightest-color); border-radius: 100px; @@ -17,6 +18,14 @@ transition: 0.5s; box-shadow: 0 0 20px rgba(71, 122, 133, 0.3137254902); } +.theme-switch label:hover { + filter: brightness(90%); + transition: none; +} +.theme-switch label:active { + filter: brightness(105%); + transition: none; +} .theme-switch label::after { content: ""; width: 3.5vh; diff --git a/src/components/Header/ThemeSwitch/theme-switch-styles.css.map b/src/components/Header/ThemeSwitch/theme-switch-styles.css.map index e844981..c211f7c 100644 --- a/src/components/Header/ThemeSwitch/theme-switch-styles.css.map +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["theme-switch-styles.scss","theme-switch-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;ACAJ;ADEI;EACI,QAAA;EACA,SAAA;EACA,kBAAA;ACAR;ADGI;EACI,cAAA;EACA,UAAA;EACA,WAAA;EACA,uCAAA;EACA,oBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,qDAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACFR;ADKI;EACI,yBAAA;EACA,4BAAA;EAEA,0CAAA;ACJR;ADOI;EACI,yBAAA;ACLR;;ADSA;EAEI;IACI,iBAAA;ECPN;EDQM;IACI,WAAA;IACA,YAAA;ECNV;EDSM;IACI,WAAA;IACA,YAAA;ECPV;AACF;ADWA;EACI;IAWI,mBAAA;ECnBN;EDSM;IACI,WAAA;IACA,YAAA;ECPV;EDUM;IACI,WAAA;IACA,YAAA;ECRV;AACF","file":"theme-switch-styles.css"} \ No newline at end of file +{"version":3,"sources":["theme-switch-styles.scss","theme-switch-styles.css"],"names":[],"mappings":"AAAA;EAEI,aAAA;ACAJ;ADEI;EACI,QAAA;EACA,SAAA;EACA,kBAAA;ACAR;ADGI;EACI,cAAA;EACA,UAAA;EACA,eAAA;EACA,WAAA;EACA,uCAAA;EACA,oBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,qDAAA;ACDR;ADII;EACI,uBAAA;EACA,gBAAA;ACFR;ADKI;EACI,wBAAA;EACA,gBAAA;ACHR;ADMI;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACJR;ADOI;EACI,yBAAA;EACA,4BAAA;EAEA,0CAAA;ACNR;ADSI;EACI,yBAAA;ACPR;;ADWA;EAEI;IACI,iBAAA;ECTN;EDUM;IACI,WAAA;IACA,YAAA;ECRV;EDWM;IACI,WAAA;IACA,YAAA;ECTV;AACF;ADaA;EACI;IAWI,mBAAA;ECrBN;EDWM;IACI,WAAA;IACA,YAAA;ECTV;EDYM;IACI,WAAA;IACA,YAAA;ECVV;AACF","file":"theme-switch-styles.css"} \ No newline at end of file diff --git a/src/components/Header/ThemeSwitch/theme-switch-styles.scss b/src/components/Header/ThemeSwitch/theme-switch-styles.scss index 1e9d33c..e796404 100644 --- a/src/components/Header/ThemeSwitch/theme-switch-styles.scss +++ b/src/components/Header/ThemeSwitch/theme-switch-styles.scss @@ -11,6 +11,7 @@ label { display: block; width: 4vw; + min-width: 80px; height: 4vh; background-color: var(--lightest-color); border-radius: 100px; @@ -20,6 +21,16 @@ box-shadow: 0 0 20px #477a8550; } + label:hover { + filter: brightness(90%); + transition: none; + } + + label:active { + filter: brightness(105%); + transition: none; + } + label::after { content: ""; width: 3.5vh; diff --git a/src/components/Header/header-styles.css b/src/components/Header/header-styles.css index 84c791e..cd5cedf 100644 --- a/src/components/Header/header-styles.css +++ b/src/components/Header/header-styles.css @@ -38,78 +38,19 @@ .header-main-page .buttons-container a, .header-main-page .buttons-container label { margin-right: 1vw; } -.header-main-page .buttons-container a { - text-decoration: none; -} -.header-main-page .buttons-container .go-to-account { - width: 3vw; - height: 3vw; +.header-main-page .buttons-container button { + padding: 2vh 3vw; background-color: var(--second-color); - display: flex; - justify-content: center; - align-items: center; - border-radius: 100%; -} -.header-main-page .buttons-container .go-to-account .go-to-account-text { - font-size: 1vw; - text-decoration: none; + font-size: 1.1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #ffffff; -} -.header-main-page .buttons-container .close-session { - width: 7vw; - height: 3vw; - background-color: var(--second-color); - display: flex; - justify-content: center; - align-items: center; border-radius: 5%; } -.header-main-page .buttons-container .close-session .close-session-text { - font-size: 1vw; - text-decoration: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - color: #ffffff; -} - -@media (max-width: 991.98px) { - .go-to-account, .close-session { - position: initial; - padding: 1vw; - } - - .go-to-account { - margin-top: 10px; - margin-bottom: 10px; - } - .go-to-account .go-to-account-text { - font-size: 9pt; - } - - .close-session .close-session-text { - font-size: 9pt; - } -} -@media (max-width: 576px) { - .go-to-account, .close-session { - width: auto; - height: auto; - } - - .go-to-account-text, .close-session-text { - position: initial; - margin: 10px 10px; - } -} -.notification-select { +.header-main-page .notification-select { width: 100%; - height: 3vh; background-color: var(--second-color); display: flex; align-items: flex-end; @@ -117,17 +58,17 @@ margin-top: auto; box-sizing: border-box; } -.notification-select p { +.header-main-page .notification-select p { display: inline-block; align-self: center; color: #fff; padding: 0; margin: 0; + margin-top: 1vh; margin-right: 1vw; } -.notification-select button { - height: 80%; - width: 5%; +.header-main-page .notification-select button { + margin-top: 0.5vh; margin-right: 0.5vw; border: none; border-radius: 2px; @@ -136,14 +77,52 @@ font-weight: bold; cursor: pointer; } -.notification-select button.yes { +.header-main-page .notification-select button.yes { background-color: rgb(76, 175, 80); } -.notification-select button.no { +.header-main-page .notification-select button.no { background-color: rgb(211, 47, 47); } +.header-main-page .banner-login { + width: 100%; + background-color: #D17262; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5vw; +} +.header-main-page .banner-login p { + color: #fff; +} +.header-main-page .banner-login .button-container { + width: 20vw; + display: flex; + justify-content: space-around; +} +.header-main-page .banner-login .button-container button { + font-size: 12pt; + font-weight: bold; + color: #ffffff; + height: 6vh; + cursor: pointer; +} +.header-main-page .banner-login .button-container .register { + border: solid 1px #ffffff; + border-radius: 24px; +} +.header-main-page .banner-login .button-container .login { + background-color: rgba(0, 0, 0, 0.3411764706); + border-radius: 24px; +} +.header-main-page .banner-login.blank { + opacity: 0%; +} @media (max-width: 991.98px) { + .header-main-page { + height: auto; + row-gap: 1vh; + } .header-main-page h1 { font-size: 26pt; } @@ -165,44 +144,7 @@ width: 20%; margin-bottom: 1vh; } -} -.banner-login { - width: 100%; - background-color: #D17262; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0px 5vw; -} -.banner-login p { - color: #fff; -} -.banner-login .button-container { - width: 20vw; - display: flex; - justify-content: space-around; -} -.banner-login .button-container button { - font-size: 12pt; - font-weight: bold; - color: #ffffff; - height: 6vh; - cursor: pointer; -} -.banner-login .button-container .register { - border: solid 1px #ffffff; - border-radius: 24px; -} -.banner-login .button-container .login { - background-color: rgba(0, 0, 0, 0.3411764706); - border-radius: 24px; -} -.banner-login.blank { - opacity: 0%; -} - -@media (max-width: 918px) { .banner-login { justify-content: initial; height: auto; @@ -220,14 +162,22 @@ } } @media (max-width: 576px) { - .banner-login p { + .header-main-page .notification-select { + -moz-column-gap: 1vw; + column-gap: 1vw; + padding: 0px 1vw; + } + .header-main-page .notification-select button { + flex-grow: 1; + } + .header-main-page .banner-login p { width: 50%; } - .banner-login .button-container { + .header-main-page .banner-login .button-container { width: 50%; flex-direction: column; } - .banner-login .button-container button { + .header-main-page .banner-login .button-container button { width: 75%; margin: 10px; } diff --git a/src/components/Header/header-styles.css.map b/src/components/Header/header-styles.css.map index b6fb0a3..a647864 100644 --- a/src/components/Header/header-styles.css.map +++ b/src/components/Header/header-styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["header-styles.scss","header-styles.css"],"names":[],"mappings":"AACA;EACI,mCAAA;EAEA,aAAA;EACA,8BAAA;EACA,eAAA;EAEA,YAAA;EAEA,sBAAA;ACHJ;ADKI;EACI,0BAAA;EAAA,uBAAA;EAAA,kBAAA;EAEA,cAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,gBAAA;EACA,mBAAA;EACA,gBAAA;EAEA,aAAA;EACA,mBAAA;EACA,YAAA;ACRR;ADUQ;EACI,cAAA;EACA,8BAAA;EACA,qBAAA;EAEA,eAAA;ACTZ;ADaI;EACI,cAAA;ACXR;ADcI;EACI,aAAA;EACA,mBAAA;EAEA,gBAAA;EACA,mBAAA;ACbR;ADeQ;EACI,iBAAA;ACbZ;ADgBQ;EACI,qBAAA;ACdZ;ADiBQ;EAEI,UAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,mBAAA;ACnBZ;ADqBY;EACI,cAAA;EACA,qBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;ACpBhB;ADwBQ;EACI,UAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,iBAAA;ACzBZ;AD2BY;EACI,cAAA;EAEA,qBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;AC3BhB;;ADkCA;EAEI;IACG,iBAAA;IACA,YAAA;EChCL;;EDmCE;IAKI,gBAAA;IACA,mBAAA;ECpCN;ED+BM;IACI,cAAA;EC7BV;;EDqCM;IACI,cAAA;EClCV;AACF;ADsCA;EACI;IACI,WAAA;IACA,YAAA;ECpCN;;EDuCE;IACI,iBAAA;IACA,iBAAA;ECpCN;AACF;ADuCA;EAEI,WAAA;EACA,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,qBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,sBAAA;AC1CJ;AD4CI;EACI,qBAAA;EAEA,kBAAA;EAEA,WAAA;EAEA,UAAA;EAEA,SAAA;EACA,iBAAA;AC9CR;ADiDI;EACI,WAAA;EACA,SAAA;EAEA,mBAAA;EAEA,YAAA;EACA,kBAAA;EAEA,kBAAA;EAEA,WAAA;EACA,iBAAA;EAEA,eAAA;ACpDR;ADuDI;EACI,kCAAA;ACrDR;ADwDI;EACI,kCAAA;ACtDR;;AD0DA;EAGQ;IACI,eAAA;ECzDV;ED4DM;IACI,eAAA;EC1DV;;ED8DE;IACI,YAAA;IACA,eAAA;EC3DN;ED6DM;IACI,WAAA;IACA,eAAA;IACA,kBAAA;EC3DV;ED8DM;IACI,YAAA;IACA,UAAA;IACA,kBAAA;EC5DV;AACF;AD+DA;EAEI,WAAA;EAEA,yBAAA;EAMA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,gBAAA;ACrEJ;AD6DI;EACI,WAAA;AC3DR;ADoEI;EAEI,WAAA;EAEA,aAAA;EACA,6BAAA;ACpER;ADsEQ;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EAEA,WAAA;EACA,eAAA;ACrEZ;ADwEQ;EACI,yBAAA;EACA,mBAAA;ACtEZ;ADyEQ;EACI,6CAAA;EACA,mBAAA;ACvEZ;;AD4EA;EACI,WAAA;ACzEJ;;AD4EA;EACI;IACI,wBAAA;IAEA,YAAA;IAEA,gBAAA;EC3EN;ED6EM;IACI,YAAA;EC3EV;ED8EM;IACI,YAAA;IAEA,6BAAA;EC7EV;ED+EU;IACI,UAAA;EC7Ed;AACF;ADkFA;EAGQ;IACI,UAAA;EClFV;EDqFM;IACI,UAAA;IAEA,sBAAA;ECpFV;EDsFU;IACI,UAAA;IACA,YAAA;ECpFd;AACF","file":"header-styles.css"} \ No newline at end of file +{"version":3,"sources":["header-styles.scss","header-styles.css"],"names":[],"mappings":"AACA;EACI,mCAAA;EAEA,aAAA;EACA,8BAAA;EACA,eAAA;EAEA,YAAA;EAEA,sBAAA;ACHJ;ADKI;EACI,0BAAA;EAAA,uBAAA;EAAA,kBAAA;EAEA,cAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,gBAAA;EACA,mBAAA;EACA,gBAAA;EAEA,aAAA;EACA,mBAAA;EACA,YAAA;ACRR;ADUQ;EACI,cAAA;EACA,8BAAA;EACA,qBAAA;EAEA,eAAA;ACTZ;ADaI;EACI,cAAA;ACXR;ADcI;EACI,aAAA;EACA,mBAAA;EAEA,gBAAA;EACA,mBAAA;ACbR;ADeQ;EACI,iBAAA;ACbZ;ADgBQ;EACI,gBAAA;EAEA,qCAAA;EAEA,gBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,cAAA;EAEA,iBAAA;AClBZ;ADsBI;EAEI,WAAA;EAEA,qCAAA;EAEA,aAAA;EACA,qBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,sBAAA;ACzBR;AD2BQ;EACI,qBAAA;EAEA,kBAAA;EAEA,WAAA;EAEA,UAAA;EAEA,SAAA;EACA,eAAA;EACA,iBAAA;AC7BZ;ADgCQ;EACI,iBAAA;EACA,mBAAA;EAEA,YAAA;EACA,kBAAA;EAEA,kBAAA;EAEA,WAAA;EACA,iBAAA;EAEA,eAAA;AClCZ;ADqCQ;EACI,kCAAA;ACnCZ;ADsCQ;EACI,kCAAA;ACpCZ;ADwCI;EAEI,WAAA;EAEA,yBAAA;EAMA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,gBAAA;AC9CR;ADsCQ;EACI,WAAA;ACpCZ;AD6CQ;EAEI,WAAA;EAEA,aAAA;EACA,6BAAA;AC7CZ;AD+CY;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EAEA,WAAA;EACA,eAAA;AC9ChB;ADiDY;EACI,yBAAA;EACA,mBAAA;AC/ChB;ADkDY;EACI,6CAAA;EACA,mBAAA;AChDhB;ADqDI;EACI,WAAA;ACnDR;;ADwDA;EAGI;IAEI,YAAA;IACA,YAAA;ECxDN;ED0DM;IACI,eAAA;ECxDV;ED2DM;IACI,eAAA;ECzDV;;ED6DE;IACI,YAAA;IACA,eAAA;EC1DN;ED4DM;IACI,WAAA;IACA,eAAA;IACA,kBAAA;EC1DV;ED6DM;IACI,YAAA;IACA,UAAA;IACA,kBAAA;EC3DV;;EDgEE;IACI,wBAAA;IAEA,YAAA;IAEA,gBAAA;EC/DN;EDiEM;IACI,YAAA;EC/DV;EDkEM;IACI,YAAA;IAEA,6BAAA;ECjEV;EDmEU;IACI,UAAA;ECjEd;AACF;ADsEA;EAIQ;IACI,oBAAA;SAAA,eAAA;IAEA,gBAAA;ECxEV;EDyEU;IACI,YAAA;ECvEd;ED6EU;IACI,UAAA;EC3Ed;ED8EU;IACI,UAAA;IAEA,sBAAA;EC7Ed;ED+Ec;IACI,UAAA;IACA,YAAA;EC7ElB;AACF","file":"header-styles.css"} \ No newline at end of file diff --git a/src/components/Header/header-styles.scss b/src/components/Header/header-styles.scss index 5050924..97997be 100644 --- a/src/components/Header/header-styles.scss +++ b/src/components/Header/header-styles.scss @@ -50,150 +50,131 @@ a, label { margin-right: 1vw; } - - a { - text-decoration: none; - } - - .go-to-account { - - width: 3vw; - height: 3vw; - + + button { + padding: 2vh 3vw; + background-color: var(--second-color); - - display: flex; - justify-content: center; - align-items: center; - - border-radius: 100%; - - .go-to-account-text { - font-size: 1vw; - text-decoration: none; - user-select: none; - - color: #ffffff; - } + + font-size: 1.1em; + user-select: none; + + color: #ffffff; + + border-radius: 5%; + } + } + + .notification-select { + + width: 100%; + + background-color: var(--second-color); + + display: flex; + align-items: flex-end; + + padding-left: 1vw; + margin-top: auto; + + box-sizing: border-box; + + p { + display: inline-block; + + align-self: center; + + color: #fff; + + padding: 0; + + margin: 0; + margin-top: 1vh; + margin-right: 1vw; } - .close-session { - width: 7vw; - height: 3vw; + button { + margin-top: 0.5vh; + margin-right: 0.5vw; + + border: none; + border-radius: 2px; + + align-self: center; + + color: #fff; + font-weight: bold; + + cursor: pointer; + } + + button.yes { + background-color: rgb(76, 175, 80); + } + + button.no { + background-color: rgb(211, 47, 47); + } + } + + .banner-login { + + width: 100%; - background-color: var(--second-color); + background-color: #D17262; + + p { + color: #fff; + } + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0px 5vw; + + .button-container { + + width: 20vw; display: flex; - justify-content: center; - align-items: center; - - border-radius: 5%; - - .close-session-text { - font-size: 1vw; - - text-decoration: none; - user-select: none; - + justify-content: space-around; + + button { + font-size: 12pt; + font-weight: bold; color: #ffffff; + + height: 6vh; + cursor: pointer; + } + + .register { + border: solid 1px #ffffff; + border-radius: 24px; + } + + .login { + background-color: #00000057; + border-radius: 24px; } } } + + .banner-login.blank { + opacity: 0%; + } } @media (max-width: 991.98px) { //! I fucking hate make the responsive design - .go-to-account, .close-session { - position: initial; - padding: 1vw; - } - .go-to-account { - .go-to-account-text { - font-size: 9pt; - } - - margin-top: 10px; - margin-bottom: 10px; - } - - .close-session { - .close-session-text { - font-size: 9pt; - } - } -} - -@media (max-width: 576px) { - .go-to-account, .close-session { - width: auto; - height: auto; - } - - .go-to-account-text, .close-session-text { - position: initial; - margin:10px 10px; - - } -} -.notification-select { - - width: 100%; - height: 3vh; - - background-color: var(--second-color); - - display: flex; - align-items: flex-end; - - padding-left: 1vw; - margin-top: auto; - - box-sizing: border-box; - - p { - display: inline-block; - - align-self: center; - - color: #fff; - - padding: 0; - - margin: 0; - margin-right: 1vw; - } - - button { - height: 80%; - width: 5%; - - margin-right: 0.5vw; - - border: none; - border-radius: 2px; - - align-self: center; - - color: #fff; - font-weight: bold; - - cursor: pointer; - } - - button.yes { - background-color: rgb(76, 175, 80); - } - - button.no { - background-color: rgb(211, 47, 47); - } -} - -@media (max-width: 991.98px) { .header-main-page { + height: auto; + row-gap: 1vh; + h1 { font-size: 26pt; } @@ -219,56 +200,8 @@ margin-bottom: 1vh; } } -} -.banner-login { - width: 100%; - background-color: #D17262; - - p { - color: #fff; - } - - display: flex; - align-items: center; - justify-content: space-between; - - padding: 0px 5vw; - - .button-container { - - width: 20vw; - - display: flex; - justify-content: space-around; - - button { - font-size: 12pt; - font-weight: bold; - color: #ffffff; - - height: 6vh; - cursor: pointer; - } - - .register { - border: solid 1px #ffffff; - border-radius: 24px; - } - - .login { - background-color: #00000057; - border-radius: 24px; - } - } -} - -.banner-login.blank { - opacity: 0%; -} - -@media (max-width: 918px) { .banner-login { justify-content: initial; @@ -293,20 +226,33 @@ } @media (max-width: 576px) { - .banner-login { - p { - width: 50%; + .header-main-page { + + .notification-select { + column-gap: 1vw; + + padding: 0px 1vw; + button { + flex-grow: 1; + } } - .button-container { - width: 50%; + .banner-login { - flex-direction: column; + p { + width: 50%; + } - button { - width: 75%; - margin: 10px; + .button-container { + width: 50%; + + flex-direction: column; + + button { + width: 75%; + margin: 10px; + } } } } diff --git a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx index 29c7d63..0039a5b 100644 --- a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx +++ b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx @@ -263,7 +263,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas }