Merge pull request #1030 from ita-social-projects/#1016-RedesignAdjus…

…tButtonStylesToMatchFigma #1016 [Redesign] Adjust Button styles to match the Figma
ita-social-projects · Dec 22, 2024 · c5da45a · c5da45a
2 parents cfb63a8 + 012d54c
commit c5da45a
Show file tree

Hide file tree

Showing 28 changed files with 276 additions and 159 deletions.
diff --git 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,30 +82,27 @@
 }
 
 .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;
   transition: all 0.3s ease;
 }
 
 .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
@@ -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 (
         <div className={css['header-buttons-section']}>
-            <Link className={css['header-login__button']} to="/login">Увійти</Link>
+            <div className={css['header-login-element']}>
+                <Link className={css['header-login__button']} to="/login">Увійти</Link>
+            </div>
             {!adminPage && <Link className={css['header-register__button']} to="/sign-up">Зареєструватися</Link>}
         </div>
     );
 }
 
+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
@@ -3,43 +3,60 @@
     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;
     font-family: var(--font-main);
     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
@@ -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() {
     <div className={css['header-menu-section']}>
       {MENU_LINKS.map((element) => (
         <div className={css['header-menu-element']} key={element.link}>
-          {element.link.startsWith('/#') ? (
-            <HashLink
-              className={css['header-menu-element__text']}
-              to={element.link}
-            >
-              {element.title}
-            </HashLink>
-          ) : (
             <Link
               className={css['header-menu-element__text']}
               to={element.link}
             >
               {element.title}
             </Link>
-          )}
         </div>
       ))}
     </div>

diff --git 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 = (
     <StarFilled
@@ -27,14 +28,23 @@ export default function StarForLike({
       style={styleOutlined}
     />
   );
-  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
@@ -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
@@ -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
@@ -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
@@ -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 {