From 2214baa50a4515ec18b25ffeff292b4a808c1a18 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 13 Dec 2024 22:56:42 +0100 Subject: [PATCH 1/5] updated button styles for pushed state --- .../CookieAcception/CookieMod.module.css | 11 ++++------ .../Header/Navbar/Buttons.module.css | 8 +++----- .../components/MiniComponents/StarForLike.jsx | 20 ++++++++++++++----- FrontEnd/src/global.css | 7 +++++-- .../pages/Authorization/LoginPage.module.css | 6 +++++- FrontEnd/src/pages/Contact/Contact.module.css | 6 +++++- .../LandingPage/Banner/Banner.module.css | 13 +++++++----- .../LandingPage/JoinUs/JoinUs.module.css | 8 ++++++-- .../ProfileDetail/TitelInfo/TitleInfo.jsx | 4 ++-- .../TitelInfo/TitleInfo.module.css | 17 ++++++++++++---- .../FormComponents/ChangePassword.module.css | 18 ++++++++++------- .../DeleteProfileModal.module.css | 4 ++++ .../DeleteProfilePage.module.css | 12 ++++++++--- .../WarnUnsavedDataModal.module.css | 11 +++++++++- .../ProfileFormButton.module.css | 6 +++++- .../ForgotPasswordCompletionPage.module.css | 6 +++++- .../RestorePasswordFailedPage.module.css | 6 +++++- .../Pages/RestorePasswordPage.module.css | 6 +++++- .../RestorePasswordSuccessPage.module.css | 6 +++++- .../SendEmailForgotPasswordPage.module.css | 6 +++++- .../SignUp/ActivateProfilePage.module.css | 6 +++++- .../SignUp/ResendActivationPage.module.css | 10 +++++++++- .../SignUp/SignUpCompletionPage.module.css | 6 +++++- .../src/pages/SignUp/SignUpForm.module.css | 6 +++++- 24 files changed, 154 insertions(+), 55 deletions(-) diff --git a/FrontEnd/src/components/CookieAcception/CookieMod.module.css b/FrontEnd/src/components/CookieAcception/CookieMod.module.css index addafbe0d..a7b3aeb36 100644 --- a/FrontEnd/src/components/CookieAcception/CookieMod.module.css +++ b/FrontEnd/src/components/CookieAcception/CookieMod.module.css @@ -81,10 +81,8 @@ transition: all 0.3s ease; } -.allow-all-btn:hover { - background: transparent; - color: var(--cookie-black-color); - border: 1px solid var(--cookie-black-color); +.allow-all-btn:active { + background: var(--pressed-button-color); } .deny-btn { @@ -103,9 +101,8 @@ transition: all 0.3s ease; } -.deny-btn:hover { - background: var(--cookie-black-color); - color: var(--cookie-light-color); +.deny-btn:active { + background: var(--pressed-secondary-button-color); } @media (max-width: 768px) { diff --git a/FrontEnd/src/components/Header/Navbar/Buttons.module.css b/FrontEnd/src/components/Header/Navbar/Buttons.module.css index 9e32b41f1..cab023e2c 100644 --- a/FrontEnd/src/components/Header/Navbar/Buttons.module.css +++ b/FrontEnd/src/components/Header/Navbar/Buttons.module.css @@ -29,11 +29,10 @@ .header-register__button { display: flex; - padding: 5px 15px; + padding: 10px 16px; justify-content: center; align-items: center; gap: 10px; - transition: background-color 0.3s ease, color 0.3s ease; border-radius: 4px; background: var(--main-button-color); @@ -56,7 +55,6 @@ color: var(--light-button-color); } -.header-register__button:hover { - background: var(--light-button-color); - color: var(--main-button-color); +.header-register__button:active { + background: var(--pressed-button-color); } diff --git a/FrontEnd/src/components/MiniComponents/StarForLike.jsx b/FrontEnd/src/components/MiniComponents/StarForLike.jsx index 51d6ad278..8d3397cfc 100644 --- a/FrontEnd/src/components/MiniComponents/StarForLike.jsx +++ b/FrontEnd/src/components/MiniComponents/StarForLike.jsx @@ -10,6 +10,7 @@ export default function StarForLike({ handleClick, styleFilled, styleOutlined, + location, }) { const filledStar = ( ); - return isAuthorized && !ownProfile - ? isSaved - ? filledStar - : outlinedStar - : null; + + const getStar = (isAuthorized, ownProfile, isSaved, location) => { + if (isAuthorized && !ownProfile) { + if (isSaved) { + return location !== 'profilePage' ? filledStar : outlinedStar; + } else { + return outlinedStar; + } + } + return null; + }; + + return getStar(isAuthorized, ownProfile, isSaved, location); } StarForLike.propTypes = { + location: PropTypes.string, isSaved: PropTypes.bool, isAuthorized: PropTypes.bool, ownProfile: PropTypes.bool, diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 7c91798b9..9ee26c282 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -64,6 +64,8 @@ --light-button-color: #FFFFFF; --dark-border-button: #232424; --disabled-link: #8D959C; + --pressed-button-color: #80B31E; + --pressed-secondary-button-color: #EEF5E1; /* fonts */ --font-main: 'Geologica', sans-serif; @@ -107,10 +109,10 @@ --banner-main-font-color: #000; --banner-main-dark-color: #1F9A7C; /* main pages JoinUs block*/ - --join-us-batton-color: black; + --join-us-button-color: black; --join-us-main-color: #B4D27A; --join-us-font-color: black; - --join-us-batton-text-color: white; + --join-us-button-text-color: white; /* CompanyCard */ --companies-card-text-color: #232424; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -131,6 +133,7 @@ --profile-detail-title-color-company-region: #000000; --profile-detail-title-color-company-button: #232424; --profile-detail-title-color-company-button-saved: #fff; + --profile-detail-title-color-company-button-not-saved: #EEF5E1; --profile-detail-data-contacts-backround: #F9F5EC; --profile-detail-data-contacts-color-text: #292E32; --profile-detail-info-color-text: #000; diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css index 5f8242a0a..338ded120 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.module.css +++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css @@ -210,7 +210,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); cursor: pointer; color: var(--light-button-text-color); @@ -232,6 +232,10 @@ cursor: default; } +.login-footer-buttons__signin:active { + background: var(--pressed-button-color); +} + .error-message { align-self: stretch; color: var(--error-text-color); diff --git a/FrontEnd/src/pages/Contact/Contact.module.css b/FrontEnd/src/pages/Contact/Contact.module.css index 8c9b99eb8..eaddf68dc 100644 --- a/FrontEnd/src/pages/Contact/Contact.module.css +++ b/FrontEnd/src/pages/Contact/Contact.module.css @@ -2,7 +2,7 @@ min-width: 114px; padding: 9px 16px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -16,3 +16,7 @@ cursor: pointer; } + +.contact__button_send:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css index 868aa2061..4249d4c3b 100644 --- a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css +++ b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css @@ -32,16 +32,19 @@ .main-banner-link__container { display: flex; + box-sizing: border-box; max-width: 194px; - max-height: 46px; + height: 46px; justify-content: center; align-items: center; border-radius: 4px; - border: 1px solid black; - padding: 13px 16px 13px 16px; + padding: 9px 16px; margin-top: 30px; - background: #000000; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04); + background: var(--main-button-color); +} + +.main-banner-link__container:active { + background: var(--pressed-button-color); } .main-baner-text__explanation { diff --git a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css index e3d426c37..efeaf7b43 100644 --- a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css @@ -36,7 +36,7 @@ display: flex; justify-content: center; align-items: center; - color: var(--join-us-batton-text-color, white); + color: var(--join-us-button-text-color, white); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; @@ -48,10 +48,14 @@ text-align: center; width: 170px; height: 46px; - background: var(--join-us-batton-color, black); + background: var(--main-button-color); border-radius: 4px; } +.join-us__button-text:active { + background: var(--pressed-button-color); +} + @media only screen and (min-width: 768px) { .join-us__content { width: 694px; diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx index f8d234218..93d5b6559 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx @@ -111,11 +111,11 @@ function TitleInfo({ isAuthorized, data }) { {!isSaved ? 'Додати в збережені' : 'Додано в збережені'} )} diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index 8e007438b..031e25360 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css @@ -96,10 +96,6 @@ height: 22px; } -.added_to_saved__button { - background: var(--profile-detail-title-color-company-button); -} - .title-block__button-block { display: flex; justify-content: center; @@ -120,6 +116,19 @@ box-sizing: border-box; } +.title-block__button:active { + background: var(--profile-detail-title-color-company-button-not-saved); +} + +.added_to_saved__button { + background: var(--profile-detail-title-color-company-button); +} + +.added_to_saved__button:active { + background: var(--pressed-button-color); + border: 1px solid var(--pressed-button-color); +} + .title-block__button--text { display: flex; color: var(--profile-detail-title-color-company-button); diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css index a718e2476..9c219faec 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css @@ -46,9 +46,13 @@ cursor: pointer; } +.submit-button:active { + background: var(--pressed-button-color); +} + @media only screen and (min-width: 768px) { .form__container { - width: 474px; + width: 474px; } .form__head { @@ -61,7 +65,7 @@ align-items: center; padding-left: 24px; } - + .divider { width: 100%; height: 1px; @@ -71,13 +75,13 @@ .submit-button__conteiner { padding: 11px 24px; -} - + } + } @media only screen and (min-width: 1200px) { .form__container { - width: 636px; - margin-left: 180px; + width: 636px; + margin-left: 180px; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css index 869f3ec36..0c5f03c65 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css @@ -42,6 +42,10 @@ color: #25292C; } +.button__cancel:active { + background: var(--pressed-secondary-button-color); +} + .button__delete { display: flex; padding: 5px 15px; diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css index 786eb5a0e..6f8b138b8 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css @@ -1,5 +1,5 @@ .button__delete-main { - padding: 10px; + padding: 10px; } .button__delete { @@ -14,6 +14,10 @@ cursor: pointer; } +.button__delete:active { + background: var(--pressed-button-color); +} + .button__delete-head { display: none; } @@ -27,6 +31,7 @@ height: 112px; border-radius: 6px; } + .button__delete-head { font-family: var(--font-main); font-size: 16px; @@ -37,12 +42,13 @@ align-items: center; padding-left: 24px; } - + .divider { width: 100%; height: 1px; background-color: var(--light-seashell-background); } + .button__delete { margin-left: 14px; } @@ -53,4 +59,4 @@ width: 636px; margin-left: 180px; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css index b00c52de1..a99d72d5a 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css @@ -102,12 +102,21 @@ } +.modal-footer--button-cancel:active { + background: var(--pressed-secondary-button-color); +} + .modal-footer--button-continue { border: 1px solid var(--main-button-color, #000000); background: var(--main-button-color, #000000); color: var(--main-white, #FFF); } +.modal-footer--button-continue:active { + background: var(--pressed-button-color); + border: 1px solid var(--pressed-button-color); +} + @media only screen and (min-width: 768px) { .modal { width: 572px; @@ -116,4 +125,4 @@ .modal-content { height: 53px; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css index 085756895..2b6db7b5a 100644 --- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css +++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css @@ -17,8 +17,12 @@ cursor: pointer; } +.submit-button:active { + background: var(--pressed-button-color); +} + @media only screen and (min-width: 768px) { .submit-button__conteiner { padding: 11px 24px; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css index 1e493f7b7..1c8f9463a 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css @@ -14,7 +14,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -28,3 +28,7 @@ cursor: pointer; } + +.login-page__button:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordFailedPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordFailedPage.module.css index 3704a3410..d86d8f2bc 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordFailedPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordFailedPage.module.css @@ -14,7 +14,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -28,3 +28,7 @@ cursor: pointer; } + +.login-page__button:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css index 7a04467c6..2f7be3a7b 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css @@ -5,7 +5,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -20,6 +20,10 @@ cursor: pointer; } +.save-password__button:active { + background: var(--pressed-button-color); +} + .save-password__button__disabled { border: 1px solid #BFC6CF; background: #EEEFF1; diff --git a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css index 3704a3410..d86d8f2bc 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css @@ -14,7 +14,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -28,3 +28,7 @@ cursor: pointer; } + +.login-page__button:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css index 28b790b9a..37619314d 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css @@ -15,7 +15,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -30,6 +30,10 @@ cursor: pointer; } +.send-email__button { + background: var(--pressed-button-color); +} + .send-email__button__disabled { border: 1px solid #BFC6CF; background: #EEEFF1; diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css index 61bba3980..9ed43a631 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css @@ -12,7 +12,7 @@ display: flex; padding: 9px 16px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -25,3 +25,7 @@ text-decoration: none; cursor: pointer; } + +.signup-page__button:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css b/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css index 382bdeac8..607e24b50 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css @@ -27,6 +27,10 @@ cursor: pointer; } +.cancel__button { + background: var(--pressed-secondary-button-color); +} + .resend-activation__button, .resend-activation__button__disabled { padding: 9px 16px; @@ -34,7 +38,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -49,6 +53,10 @@ cursor: pointer; } +.resend-activation__button:active { + background: var(--pressed-button-color); +} + .resend-activation__button__disabled { border: 1px solid #BFC6CF; background: #EEEFF1; diff --git a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css index 0ab49fcae..bd8e2ecef 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css @@ -42,7 +42,7 @@ display: flex; padding: 9px 16px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -55,3 +55,7 @@ text-decoration: none; cursor: pointer; } + +.signup-page__button:active { + background: var(--pressed-button-color); +} diff --git a/FrontEnd/src/pages/SignUp/SignUpForm.module.css b/FrontEnd/src/pages/SignUp/SignUpForm.module.css index 576147620..efa2915d4 100644 --- a/FrontEnd/src/pages/SignUp/SignUpForm.module.css +++ b/FrontEnd/src/pages/SignUp/SignUpForm.module.css @@ -45,7 +45,7 @@ align-items: center; gap: 4px; border-radius: 4px; - background: #000000; + background: var(--main-button-color); color: var(--light-button-text-color); text-align: center; @@ -60,6 +60,10 @@ cursor: pointer; } +.sign-up__button:active { + background: var(--pressed-button-color); +} + .sign-up__button__disabled { border: 1px solid #BFC6CF; background: #EEEFF1; From 89e8a738d8f08d18bfe9822f1ca91000d95cb1be Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Thu, 19 Dec 2024 23:23:58 +0100 Subject: [PATCH 2/5] updated buttons according to the latest design --- .../CookieAcception/CookieMod.module.css | 26 ++++++------ .../src/components/Header/Navbar/Buttons.jsx | 4 +- .../Header/Navbar/Buttons.module.css | 41 +++++++++++++------ .../src/components/Header/Navbar/Menu.jsx | 10 ----- FrontEnd/src/global.css | 32 +++++++++++---- .../pages/Authorization/LoginPage.module.css | 13 +++--- FrontEnd/src/pages/Contact/Contact.module.css | 8 ++-- .../LandingPage/Banner/Banner.module.css | 4 +- .../LandingPage/JoinUs/JoinUs.module.css | 6 +-- .../DataContactsPhoneEmail.module.css | 6 ++- .../TitelInfo/TitleInfo.module.css | 14 +++---- .../FormComponents/ChangePassword.module.css | 6 +-- .../DeleteProfileModal.module.css | 39 ++++++------------ .../DeleteProfilePage.module.css | 6 +-- .../WarnUnsavedDataModal.module.css | 23 +++++------ .../ProfileFormButton.module.css | 6 +-- .../ForgotPasswordCompletionPage.module.css | 9 ++-- .../Pages/RestorePasswordPage.module.css | 14 +++---- .../RestorePasswordSuccessPage.module.css | 9 ++-- .../SendEmailForgotPasswordPage.module.css | 14 +++---- .../src/pages/SignUp/SignUpForm.module.css | 14 +++---- 21 files changed, 158 insertions(+), 146 deletions(-) diff --git a/FrontEnd/src/components/CookieAcception/CookieMod.module.css b/FrontEnd/src/components/CookieAcception/CookieMod.module.css index a7b3aeb36..a59758db7 100644 --- a/FrontEnd/src/components/CookieAcception/CookieMod.module.css +++ b/FrontEnd/src/components/CookieAcception/CookieMod.module.css @@ -31,7 +31,7 @@ } .cookie-title { - font-family: 'Geologica', sans-serif; + font-family: var(--font-main); font-size: 30px; font-weight: 600; line-height: 30px; @@ -42,7 +42,7 @@ } .cookie-text { - font-family: 'Geologica', sans-serif; + font-family: var(--font-main); font-size: 14px; font-weight: 600; line-height: 20px; @@ -67,10 +67,10 @@ } .allow-all-btn { - font-family: 'Geologica', sans-serif; + font-family: var(--font-main); line-height: 20px; - background: var(--cookie-black-color); - color: var(--cookie-light-color); + background: var(--main-button-color); + color: var(--main-button-text-color); width: 144px; height: 40px; padding: 10px 16px; @@ -81,28 +81,28 @@ transition: all 0.3s ease; } -.allow-all-btn:active { - background: var(--pressed-button-color); +.allow-all-btn:hover { + background: var(--main-button-hover-color); } .deny-btn { - font-family: 'Geologica', sans-serif; + font-family: var(--font-main); line-height: 20px; - background: var(--cookie-light-color); - color: var(--cookie-black-color); + background: var(--light-button-color); + color: var(--light-button-text-color); width: 144px; height: 40px; padding: 10px 16px; border-radius: 4px; - border: 1px solid var(--cookie-black-color); + border: 1px solid var(--light-button-border-color); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } -.deny-btn:active { - background: var(--pressed-secondary-button-color); +.deny-btn:hover { + background: var(--light-button-hover-color); } @media (max-width: 768px) { diff --git a/FrontEnd/src/components/Header/Navbar/Buttons.jsx b/FrontEnd/src/components/Header/Navbar/Buttons.jsx index 86abcab12..40dc83877 100644 --- a/FrontEnd/src/components/Header/Navbar/Buttons.jsx +++ b/FrontEnd/src/components/Header/Navbar/Buttons.jsx @@ -4,7 +4,9 @@ import { Link } from 'react-router-dom'; function Buttons({adminPage}) { return (
- Увійти +
+ Увійти +
{!adminPage && Зареєструватися}
); diff --git a/FrontEnd/src/components/Header/Navbar/Buttons.module.css b/FrontEnd/src/components/Header/Navbar/Buttons.module.css index cab023e2c..44f7ae8b0 100644 --- a/FrontEnd/src/components/Header/Navbar/Buttons.module.css +++ b/FrontEnd/src/components/Header/Navbar/Buttons.module.css @@ -3,19 +3,22 @@ gap: 12px; } -.header-login__button { +.header-login-element { display: flex; padding: 5px 15px; + align-items: center; +} + +.header-login__button { + position: relative; + display: flex; justify-content: center; align-items: center; - gap: 10px; - transition: background-color 0.3s ease, color 0.3s ease; border-radius: 4px; - background: var(--light-button-color); /* Button Text */ - color: var(--main-button-color); + color: var(--login-button-text-color); text-align: center; font-feature-settings: 'calt' off; text-decoration: none; @@ -23,8 +26,23 @@ font-size: 16px; font-style: normal; font-weight: 500; - line-height: 20px; - letter-spacing: -0.16px; + line-height: 19.2px; + letter-spacing: 0.16px; +} + +.header-login__button::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + left: 0; + bottom: -5px; + background-color: var(--login-button-underline-color); + transition: width 0.3s ease; +} + +.header-login__button:hover::after { + width: 100%; } .header-register__button { @@ -38,7 +56,7 @@ background: var(--main-button-color); /* Button Text */ - color: var(--light-button-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: 'calt' off; text-decoration: none; @@ -51,10 +69,9 @@ } .header-login__button:hover { - background: var(--main-button-color); - color: var(--light-button-color); + color: var(--light-button-login-hover-text-color); } -.header-register__button:active { - background: var(--pressed-button-color); +.header-register__button:hover { + background: var(--main-button-hover-color); } diff --git a/FrontEnd/src/components/Header/Navbar/Menu.jsx b/FrontEnd/src/components/Header/Navbar/Menu.jsx index 2e3a1c505..6afb97175 100644 --- a/FrontEnd/src/components/Header/Navbar/Menu.jsx +++ b/FrontEnd/src/components/Header/Navbar/Menu.jsx @@ -1,6 +1,5 @@ import { Link } from 'react-router-dom'; import css from './Menu.module.css'; -import { HashLink } from 'react-router-hash-link'; const MENU_LINKS = [ { @@ -18,21 +17,12 @@ function Menu() {
{MENU_LINKS.map((element) => (
- {element.link.startsWith('/#') ? ( - - {element.title} - - ) : ( {element.title} - )}
))}
diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 9ee26c282..49b2d6e49 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -45,7 +45,6 @@ --main-text-color: #292E32; --header-bunner-text-color: #000000; --light-text-color: #FFFFFF; - --light-button-text-color: #FFFFFF; --delete-text-color: #F15831; --notification-text-color: #F34444; --footer-dark-text-color: #A0ABC0; @@ -55,17 +54,33 @@ --placeholder-text-color: #ADB3B9; --edit-page-head-color: #000000D9; --input-text-color: #000000D9; + --secondary-button-text-color: #232424; /* button color*/ --main-button-color: #000000; - --button-color-hover: #0b6c61; - --light-button-color: #FFFFFF; - --dark-border-button: #232424; + --main-button-text-color: #FFFFFF; + --main-button-hover-color: #292929; + --main-button-disabled-color: #E5E5E5; + --main-button-disabled-text-color: #A1A1A1; + --main-button-border-color: #000000; + --main-button-hover-border-color: #333333; + + --light-button-color: transparent; + --light-button-hover-color: #F1E7D280; + --light-button-text-color: #232424; + --light-button-border-color: #232424; + + --warn-button-color: #E14E29; + --warn-button-text-color: #FFFFFF; + --warn-button-hover-color: #F15831; + + --login-button-text-color: #000000; + --login-button-underline-color: #000000; + --disabled-link: #8D959C; - --pressed-button-color: #80B31E; - --pressed-secondary-button-color: #EEF5E1; + /* fonts */ --font-main: 'Geologica', sans-serif; @@ -112,7 +127,6 @@ --join-us-button-color: black; --join-us-main-color: #B4D27A; --join-us-font-color: black; - --join-us-button-text-color: white; /* CompanyCard */ --companies-card-text-color: #232424; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -132,8 +146,8 @@ --profile-detail-title-color-company-name: #232424; --profile-detail-title-color-company-region: #000000; --profile-detail-title-color-company-button: #232424; - --profile-detail-title-color-company-button-saved: #fff; - --profile-detail-title-color-company-button-not-saved: #EEF5E1; + --profile-detail-title-color-company-button-saved: #FFFFFF; + --profile-detail-title-color-company-button-not-saved: #FFFFFF; --profile-detail-data-contacts-backround: #F9F5EC; --profile-detail-data-contacts-color-text: #292E32; --profile-detail-info-color-text: #000; diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css index 338ded120..fefc92a85 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.module.css +++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css @@ -205,7 +205,7 @@ .login-footer-buttons__signin, .login-footer-buttons__signin__disabled { display: flex; - padding: 9px 16px; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; @@ -213,7 +213,7 @@ background: var(--main-button-color); cursor: pointer; - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; font-family: var(--font-main); @@ -226,14 +226,13 @@ } .login-footer-buttons__signin__disabled { - border: 1px solid #BFC6CF; - background: #EEEFF1; - color: #A3AAB0; + background: var(--main-button-disabled-color); + color: var(--main-button-disabled-text-color); cursor: default; } -.login-footer-buttons__signin:active { - background: var(--pressed-button-color); +.login-footer-buttons__signin:hover { + background: var(--main-button-hover-color); } .error-message { diff --git a/FrontEnd/src/pages/Contact/Contact.module.css b/FrontEnd/src/pages/Contact/Contact.module.css index eaddf68dc..38afc6961 100644 --- a/FrontEnd/src/pages/Contact/Contact.module.css +++ b/FrontEnd/src/pages/Contact/Contact.module.css @@ -1,10 +1,10 @@ .contact__button_send { min-width: 114px; - padding: 9px 16px; + padding: 10px 16px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -17,6 +17,6 @@ cursor: pointer; } -.contact__button_send:active { - background: var(--pressed-button-color); +.contact__button_send:hover { + background: var(--main-button-hover-color); } diff --git a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css index 4249d4c3b..58d6f089c 100644 --- a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css +++ b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css @@ -43,8 +43,8 @@ background: var(--main-button-color); } -.main-banner-link__container:active { - background: var(--pressed-button-color); +.main-banner-link__container:hover { + background: var(--main-button-hover-color); } .main-baner-text__explanation { diff --git a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css index efeaf7b43..b2538edd5 100644 --- a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css @@ -36,7 +36,7 @@ display: flex; justify-content: center; align-items: center; - color: var(--join-us-button-text-color, white); + color: var(--main-button-text-color); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; @@ -52,8 +52,8 @@ border-radius: 4px; } -.join-us__button-text:active { - background: var(--pressed-button-color); +.join-us__button-text:hover { + background: var(--main-button-hover-color); } @media only screen and (min-width: 768px) { diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css index f21fcc946..d276c152c 100644 --- a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css +++ b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css @@ -24,10 +24,14 @@ align-items: center; gap: 4px; border-radius: 4px; - border: 1px solid var(--profile-detail-data-contacts-color-text); + border: 1px solid var(--light-button-border-color); cursor: pointer; } +.data-block__field button:hover { + background: var(--light-button-hover-color); +} + .data-block__field--show--contacts, .data-block__field--contacts { text-align: center; diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index 031e25360..1ea9b40bf 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css @@ -110,23 +110,23 @@ align-items: center; gap: 4px; border-radius: 4px; - border: 1px solid var(--profile-detail-title-color-company-button); + border: 1px solid var(--light-button-border-color); cursor: pointer; padding: 7px 16px; box-sizing: border-box; } -.title-block__button:active { - background: var(--profile-detail-title-color-company-button-not-saved); +.title-block__button:hover { + background: var(--light-button-hover-color); } .added_to_saved__button { - background: var(--profile-detail-title-color-company-button); + background: var(--main-button-color); } -.added_to_saved__button:active { - background: var(--pressed-button-color); - border: 1px solid var(--pressed-button-color); +.added_to_saved__button:hover { + background: var(--main-button-hover-color); + border: 1px solid var(--main-button-hover-border-color); } .title-block__button--text { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css index 9c219faec..aed5986be 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css @@ -37,7 +37,7 @@ .submit-button { border-radius: 4px; background: var(--main-button-color); - color: var(--main-white); + color: var(--main-button-text-color); padding: 10px 16px; font-family: var(--font-main); font-size: 16px; @@ -46,8 +46,8 @@ cursor: pointer; } -.submit-button:active { - background: var(--pressed-button-color); +.submit-button:hover { + background: var(--main-button-hover-color); } @media only screen and (min-width: 768px) { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css index 0c5f03c65..59e5c0564 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css @@ -1,6 +1,6 @@ .delete__description { text-align: left; - color: #292E32; + color: var(--main-text-color); font-family: var(--font-main); font-size: 14px; font-weight: 400; @@ -25,13 +25,13 @@ .button__cancel { display: flex; - padding: 5px 15px; + padding: 9px 14px; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; - background: white; - border: 1px solid #A3AAB0; + background: var(--light-button-color); + border: 1px solid var(--light-button-border-color); cursor: pointer; font-family: var(--font-main); font-size: 16px; @@ -39,23 +39,22 @@ line-height: 20px; letter-spacing: -0.01em; text-align: center; - color: #25292C; + color: var(--light-button-text-color); } -.button__cancel:active { - background: var(--pressed-secondary-button-color); +.button__cancel:hover { + background: var(--light-button-hover-color); } .button__delete { display: flex; - padding: 5px 15px; + padding: 10px 17px; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; - background: #F15831; - border: 1px solid #F15831; - color: white; + background: var(--warn-button-color); + color: var(--warn-button-text-color); font-family: var(--font-main); font-size: 16px; font-weight: 600; @@ -65,22 +64,8 @@ cursor: pointer; } -.button__delete__disabled { - display: flex; - padding: 5px 15px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - background: white; - border: 1px solid #F15831; - color: #F15831; - font-family: var(--font-main); - font-size: 16px; - font-weight: 600; - line-height: 20px; - letter-spacing: -0.01em; - text-align: center; +.button__delete:hover { + background: var(--warn-button-hover-color); } .delete-header { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css index 6f8b138b8..33ed6d98a 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css @@ -5,7 +5,7 @@ .button__delete { border-radius: 4px; background: var(--main-button-color); - color: var(--main-white); + color: var(--main-button-text-color); padding: 10px 15px; font-family: var(--font-main); font-size: 16px; @@ -14,8 +14,8 @@ cursor: pointer; } -.button__delete:active { - background: var(--pressed-button-color); +.button__delete:hover { + background: var(--main-button-hover-color); } .button__delete-head { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css index a99d72d5a..638044821 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css @@ -78,8 +78,7 @@ .modal-footer--button { display: flex; - height: 32px; - padding: 5px 15px; + padding: 9px 16px; justify-content: center; align-items: center; gap: 4px; @@ -96,25 +95,25 @@ } .modal-footer--button-cancel { - border: 1px solid var(--Main-Grey-40, #A3AAB0); - background: var(--main-white, #FFF); - color: var(--main-grey-90, #25292C); + border: 1px solid var(--light-button-border-color); + background: var(--light-button-color); + color: var(--light-button-text-color); } -.modal-footer--button-cancel:active { - background: var(--pressed-secondary-button-color); +.modal-footer--button-cancel:hover { + background: var(--light-button-hover-color); } .modal-footer--button-continue { - border: 1px solid var(--main-button-color, #000000); + border: 1px solid var(--main-button-border-color); background: var(--main-button-color, #000000); - color: var(--main-white, #FFF); + color: var(--main-button-text-color); } -.modal-footer--button-continue:active { - background: var(--pressed-button-color); - border: 1px solid var(--pressed-button-color); +.modal-footer--button-continue:hover { + background: var(--main-button-hover-color); + border: 1px solid var(--main-button-hover-border-color); } @media only screen and (min-width: 768px) { diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css index 2b6db7b5a..d9183dac0 100644 --- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css +++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css @@ -8,7 +8,7 @@ .submit-button { border-radius: 4px; background: var(--main-button-color); - color: var(--main-white); + color: var(--main-button-text-color); padding: 10px 16px; font-family: var(--font-main); font-size: 16px; @@ -17,8 +17,8 @@ cursor: pointer; } -.submit-button:active { - background: var(--pressed-button-color); +.submit-button:hover { + background: var(--main-button-hover-color); } @media only screen and (min-width: 768px) { diff --git a/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css index 1c8f9463a..d85086d05 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/ForgotPasswordCompletionPage.module.css @@ -9,14 +9,15 @@ } .login-page__button { - padding: 9px 16px; + display: flex; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -29,6 +30,6 @@ cursor: pointer; } -.login-page__button:active { - background: var(--pressed-button-color); +.login-page__button:hover { + background: var(--main-button-hover-color); } diff --git a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css index 2f7be3a7b..a3ea3ba14 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordPage.module.css @@ -1,13 +1,14 @@ .save-password__button, .save-password__button__disabled { - padding: 9px 16px; + display: flex; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -20,14 +21,13 @@ cursor: pointer; } -.save-password__button:active { - background: var(--pressed-button-color); +.save-password__button:hover { + background: var(--main-button-hover-color); } .save-password__button__disabled { - border: 1px solid #BFC6CF; - background: #EEEFF1; - color: #A3AAB0; + background: var(--main-button-disabled-color); + color: var(--main-button-disabled-text-color); } .sign-in-line { diff --git a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css index d86d8f2bc..505fbcf18 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/RestorePasswordSuccessPage.module.css @@ -9,14 +9,15 @@ } .login-page__button { - padding: 9px 16px; + display: flex; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -29,6 +30,6 @@ cursor: pointer; } -.login-page__button:active { - background: var(--pressed-button-color); +.login-page__button:hover { + background: var(--main-button-hover-color); } diff --git a/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css b/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css index 37619314d..c535fd6b8 100644 --- a/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css +++ b/FrontEnd/src/pages/RestorePassword/Pages/SendEmailForgotPasswordPage.module.css @@ -10,14 +10,15 @@ .send-email__button, .send-email__button__disabled { - padding: 9px 16px; + display: flex; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -30,14 +31,13 @@ cursor: pointer; } -.send-email__button { - background: var(--pressed-button-color); +.send-email__button:hover { + background: var(--main-button-hover-color); } .send-email__button__disabled { - border: 1px solid #BFC6CF; - background: #EEEFF1; - color: #A3AAB0; + background: var(--main-button-disabled-color); + color: var(--main-button-disabled-text-color); } .sign-in-line { diff --git a/FrontEnd/src/pages/SignUp/SignUpForm.module.css b/FrontEnd/src/pages/SignUp/SignUpForm.module.css index efa2915d4..560412db9 100644 --- a/FrontEnd/src/pages/SignUp/SignUpForm.module.css +++ b/FrontEnd/src/pages/SignUp/SignUpForm.module.css @@ -40,14 +40,15 @@ .sign-up__button, .sign-up__button__disabled { - padding: 9px 16px; + display: flex; + padding: 10px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: var(--main-button-color); - color: var(--light-button-text-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: "calt" off; @@ -60,14 +61,13 @@ cursor: pointer; } -.sign-up__button:active { - background: var(--pressed-button-color); +.sign-up__button:hover { + background: var(--main-button-hover-color); } .sign-up__button__disabled { - border: 1px solid #BFC6CF; - background: #EEEFF1; - color: #A3AAB0; + background: var(--main-button-disabled-color); + color: var(--main-button-disabled-text-color); } @media only screen and (min-width: 768px) { From eaacb85b3c9f76673465b8a5b2f6d568942b7583 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Thu, 19 Dec 2024 23:45:02 +0100 Subject: [PATCH 3/5] global vars replaced for buttons in profile detail page --- FrontEnd/src/global.css | 3 --- .../DataContacts/DataContactsPhoneEmail.module.css | 2 +- .../src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css | 4 ++-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 49b2d6e49..eb9b5d786 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -145,9 +145,6 @@ --profile-detail-title-color-activity: #707070; --profile-detail-title-color-company-name: #232424; --profile-detail-title-color-company-region: #000000; - --profile-detail-title-color-company-button: #232424; - --profile-detail-title-color-company-button-saved: #FFFFFF; - --profile-detail-title-color-company-button-not-saved: #FFFFFF; --profile-detail-data-contacts-backround: #F9F5EC; --profile-detail-data-contacts-color-text: #292E32; --profile-detail-info-color-text: #000; diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css index d276c152c..5b68a2dcf 100644 --- a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css +++ b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css @@ -54,7 +54,7 @@ .data-block__field--show--contacts { flex: 1 0 0; - color: var(--profile-detail-data-contacts-color-text); + color: var(--light-button-text-color); } .contact-container { diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index 1ea9b40bf..3f31e432a 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css @@ -131,7 +131,7 @@ .title-block__button--text { display: flex; - color: var(--profile-detail-title-color-company-button); + color: var(--light-button-text-color); text-align: center; font-feature-settings: 'calt' off; font-family: var(--font-main); @@ -144,7 +144,7 @@ } .added_to_saved__button--text { - color: var(--profile-detail-title-color-company-button-saved); + color: var(--main-button-text-color); } @media only screen and (min-width: 768px) { From cef54a1c51b6bf06053ec45a067d24a15a9808d3 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 20 Dec 2024 12:58:47 +0100 Subject: [PATCH 4/5] fixed profile list button styles --- FrontEnd/src/global.css | 4 ++++ FrontEnd/src/pages/ProfileList/ProfileListPage.module.css | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index eb9b5d786..28da4cdca 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -79,6 +79,10 @@ --login-button-text-color: #000000; --login-button-underline-color: #000000; + --list-button-border-color: #231C09; + --list-button-active-color: #231C09; + --list-button-active-text-color: #FFFFFF; + --disabled-link: #8D959C; diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css index 803f4480b..bacee63c6 100644 --- a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css +++ b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css @@ -98,7 +98,7 @@ .company-list__btns--element--active { border-radius: 4px; padding: 8px; - border: 1px solid #231C09; + border: 1px solid var(--list-button-border-color); font-family: var(--font-main); font-size: 16px; @@ -108,8 +108,8 @@ } .company-list__btns--element--active { - color: var(--light-button-text-color); - background: #231C09; + color: var(--list-button-active-text-color); + background: var(--list-button-active-color); } .company-list__content--items { From 012d54c62e6959ddc775ad36facf7c9f1a9eed49 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Sat, 21 Dec 2024 16:37:31 +0100 Subject: [PATCH 5/5] added prop types in header buttons component --- FrontEnd/src/components/Header/Navbar/Buttons.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/FrontEnd/src/components/Header/Navbar/Buttons.jsx b/FrontEnd/src/components/Header/Navbar/Buttons.jsx index 40dc83877..a66cba73a 100644 --- a/FrontEnd/src/components/Header/Navbar/Buttons.jsx +++ b/FrontEnd/src/components/Header/Navbar/Buttons.jsx @@ -1,7 +1,8 @@ -import css from './Buttons.module.css'; import { Link } from 'react-router-dom'; +import {PropTypes} from 'prop-types'; +import css from './Buttons.module.css'; -function Buttons({adminPage}) { +function Buttons({ adminPage }) { return (
@@ -12,4 +13,8 @@ function Buttons({adminPage}) { ); } +Buttons.propTypes = { + adminPage: PropTypes.bool.isRequired, + }; + export default Buttons;