diff --git a/FrontEnd/src/components/CookieAcception/CookieMod.module.css b/FrontEnd/src/components/CookieAcception/CookieMod.module.css index addafbe0d..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; @@ -82,21 +82,19 @@ } .allow-all-btn:hover { - background: transparent; - color: var(--cookie-black-color); - border: 1px solid var(--cookie-black-color); + 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; @@ -104,8 +102,7 @@ } .deny-btn:hover { - background: var(--cookie-black-color); - color: var(--cookie-light-color); + 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..a66cba73a 100644 --- a/FrontEnd/src/components/Header/Navbar/Buttons.jsx +++ b/FrontEnd/src/components/Header/Navbar/Buttons.jsx @@ -1,13 +1,20 @@ -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 (
- Увійти +
+ Увійти +
{!adminPage && Зареєструватися}
); } +Buttons.propTypes = { + adminPage: PropTypes.bool.isRequired, + }; + export default Buttons; diff --git a/FrontEnd/src/components/Header/Navbar/Buttons.module.css b/FrontEnd/src/components/Header/Navbar/Buttons.module.css index 9e32b41f1..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,23 +26,37 @@ 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 { 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); /* Button Text */ - color: var(--light-button-color); + color: var(--main-button-text-color); text-align: center; font-feature-settings: 'calt' off; text-decoration: none; @@ -52,11 +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:hover { - background: var(--light-button-color); - color: var(--main-button-color); + 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/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 e2f4be0ba..a728954ab 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,16 +54,38 @@ --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; + + --list-button-border-color: #231C09; + --list-button-active-color: #231C09; + --list-button-active-text-color: #FFFFFF; + --disabled-link: #8D959C; + /* fonts */ --font-main: 'Geologica', sans-serif; --font-messages: 'Roboto', sans-serif; @@ -107,10 +128,9 @@ --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; /* CompanyCard */ --companies-card-text-color: #232424; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -129,8 +149,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: #fff; --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..fefc92a85 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.module.css +++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css @@ -205,15 +205,15 @@ .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; border-radius: 4px; - background: #000000; + 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,12 +226,15 @@ } .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:hover { + background: var(--main-button-hover-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..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: #000000; + 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; @@ -16,3 +16,7 @@ cursor: pointer; } + +.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 868aa2061..58d6f089c 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: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 e3d426c37..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-batton-text-color, white); + color: var(--main-button-text-color); 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:hover { + background: var(--main-button-hover-color); +} + @media only screen and (min-width: 768px) { .join-us__content { width: 694px; diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContactsPhoneEmail.module.css index f21fcc946..5b68a2dcf 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; @@ -50,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.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..3f31e432a 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; @@ -114,15 +110,28 @@ 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:hover { + background: var(--light-button-hover-color); +} + +.added_to_saved__button { + background: var(--main-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 { 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); @@ -135,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) { 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 { diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css index a718e2476..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,9 +46,13 @@ cursor: pointer; } +.submit-button:hover { + background: var(--main-button-hover-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..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,19 +39,22 @@ line-height: 20px; letter-spacing: -0.01em; text-align: center; - color: #25292C; + color: var(--light-button-text-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; @@ -61,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 786eb5a0e..33ed6d98a 100644 --- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css +++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css @@ -1,11 +1,11 @@ .button__delete-main { - padding: 10px; + padding: 10px; } .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,6 +14,10 @@ cursor: pointer; } +.button__delete:hover { + background: var(--main-button-hover-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..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,16 +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: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:hover { + background: var(--main-button-hover-color); + border: 1px solid var(--main-button-hover-border-color); } @media only screen and (min-width: 768px) { @@ -116,4 +124,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..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,12 @@ cursor: pointer; } +.submit-button:hover { + background: var(--main-button-hover-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..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: #000000; + 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; @@ -28,3 +29,7 @@ cursor: pointer; } + +.login-page__button:hover { + background: var(--main-button-hover-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..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: #000000; + 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,10 +21,13 @@ cursor: pointer; } +.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 3704a3410..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: #000000; + 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; @@ -28,3 +29,7 @@ cursor: pointer; } + +.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 28b790b9a..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: #000000; + 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,10 +31,13 @@ cursor: pointer; } +.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/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..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: #000000; + 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,10 +61,13 @@ cursor: pointer; } +.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) {