ita-social-projects · romanmyko · Aug 30, 2024 · Aug 21, 2024 · Aug 21, 2024 · Aug 26, 2024
diff --git a/...nts/HeaderFooter/header/navbar/Avatar.png → FrontEnd/public/img/Avatar.png b/...nts/HeaderFooter/header/navbar/Avatar.png → FrontEnd/public/img/Avatar.png
diff --git a/...derFooter/footer/bottom/opentech_logo.svg → FrontEnd/public/img/opentech_logo.svg b/...derFooter/footer/bottom/opentech_logo.svg → FrontEnd/public/img/opentech_logo.svg
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.jsx b/FrontEnd/src/components/CompanyCard/CompanyCard.jsx
@@ -61,12 +61,16 @@ export default function CompanyCard({
                 src={profile.banner?.path}
                 alt="Company Banner"
                 className={styles['company-card__image']}
+                title="Company Banner"
+                loading="lazy"
               />
             ) : (
               <img
                 className={styles['company-card__empty-image']}
                 src={`${process.env.REACT_APP_PUBLIC_URL}/svg/profile-view-image-empty.svg`}
                 alt={profile.name}
+                title={profile.name}
+                loading="lazy"
               />
             )}
           </div>
@@ -76,27 +80,27 @@ export default function CompanyCard({
               placement="bottom"
               pointAtCenter={true}
             >
-              <div className={styles['company-card__category-text']}>
+              <p className={styles['company-card__category-text']}>
                 {activitiesSliceString}
-              </div>
+              </p>
             </Tooltip>
             <div className={styles['company-card__text-block__header']}>
-              <div className={styles['company-card__name-text']}>
+              <h3 className={styles['company-card__name-text']}>
                 {profile.name}
-              </div>
+              </h3>
             </div>
             <Tooltip
               title={profile.regions_ukr_display}
               placement="bottom"
               pointAtCenter={true}
             >
-              <div className={styles['company-card__region-text']}>
+              <p className={styles['company-card__region-text']}>
                 {profile.regions_ukr_display
                   ? profile.regions_ukr_display.length < lengthOfRegion
                     ? profile.regions_ukr_display
                     : `${profile.regions_ukr_display.substring(0, 35)}...`
                   : ''}
-              </div>
+              </p>
             </Tooltip>
             <div className={styles['company-card__footer_content']}>
               <Tooltip

diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -1,5 +1,3 @@
-@import 'variables.css';
-
 .company-card {
   width: 360px;
   min-height: 415px;
@@ -81,7 +79,7 @@
 .company-card__name-text {
   width: 328px;
   height: 48px;
-  color: var(--text-color);
+  color: var(--companies-card-text-color);
   font-family: var(--font-main);
   font-size: 20px;
   font-style: normal;
@@ -93,11 +91,11 @@
 
 .company-card__name-text_link {
   text-decoration: none;
-  color: var(--text-color);
+  color: var(--companies-card-text-color);
 }
 
 .company-card__name-text_link:visited {
-  color: var(--text-color);
+  color: var(--companies-card-text-color);
 }
 
 .company-card__region-text {

diff --git a/FrontEnd/src/components/CompanyCard/variables.css b/FrontEnd/src/components/CompanyCard/variables.css
diff --git a/FrontEnd/src/components/HeaderFooter/footer/Footer.module.css b/FrontEnd/src/components/HeaderFooter/footer/Footer.module.css
@@ -1,3 +1,4 @@
 .footer-content {
     margin-top: auto;
-}
+    width: var(--main-block-size);
+}
diff --git a/FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.jsx b/FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.jsx
@@ -1,11 +1,17 @@
 import css from './FooterBottom.module.css';
-import logo from './opentech_logo.svg';
 
 function FooterBottom() {
     return (
         <div className={css['footer-bottom']}>
-            <div className={css['footer-bottom__text']}>Copyright 2023 Forum. All rights reserved.</div>
-            <img className={css['footer-bottom-logo__svg']} src={logo} alt=""/>
+            <p className={css['footer-bottom__text']}>
+                Copyright 2023 Forum. All rights reserved.
+            </p>
+            <img
+                className={css['footer-bottom-logo__svg']}
+                src={`${process.env.REACT_APP_PUBLIC_URL}/img/opentech_logo.svg`}
+                alt="Opentech logo"
+                title="Opentech logo"
+            />
         </div>
     );
 }

diff --git a/FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.module.css b/FrontEnd/src/components/HeaderFooter/footer/bottom/FooterBottom.module.css
@@ -1,17 +1,15 @@
 .footer-bottom {
     display: flex;
-    width: 1304px;
-    padding: 6px 104px;
-    align-items: flex-start;
-    gap: 864px;
-
-    background: var(--gray-1, #333);
+    width: var(--main-block-size);
+    height: 33px;
+    justify-content: flex-start;
+    background: var(--footer-bottom-backround);
 }
 
 .footer-bottom__text {
-    color: var(--wf-base-white, #FFF);
+    color: var(--footer-font-color);
     font-feature-settings: 'calt' off;
-
+    padding: 6px 0px 0px 104px;
     font-family: var(--font-main);
     font-size: 14px;
     font-style: normal;
@@ -23,4 +21,5 @@
 .footer-bottom-logo__svg {
     width: 165px;
     height: 20px;
+    padding-left: 55%;
 }
diff --git a/FrontEnd/src/components/HeaderFooter/footer/short/ShortFooter.module.css b/FrontEnd/src/components/HeaderFooter/footer/short/ShortFooter.module.css
@@ -70,4 +70,4 @@
     font-weight: 400;
     line-height: 150%;
     letter-spacing: -0.14px;
-}
+}
diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterNavigation.module.css b/FrontEnd/src/components/HeaderFooter/footer/top/FooterNavigation.module.css
@@ -12,10 +12,9 @@
 }
 
 .navigation-content-section__text {
-    color: var(--main-white, #FFF);
+    color: var(--footer-font-color);
     font-feature-settings: 'calt' off;
     text-decoration: none;
-
     font-family: var(--font-main);
     font-size: 14px;
     font-style: normal;
@@ -25,10 +24,9 @@
 }
 
 .navigation-content-section-service__text {
-    color: var(--main-white, #FFF);
+    color: var(--footer-font-color);
     font-feature-settings: 'calt' off;
     text-decoration: none;
-
     font-family: var(--font-main);
     font-size: 14px;
     font-style: normal;

diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.jsx b/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.jsx
@@ -23,12 +23,11 @@ function FooterPolicy() {
     return (
         <div className={css['policy-content']}>
             <img
-                className={css['main-logo']}
+                className={css['policy-content__main-logo']}
                 src={`${process.env.REACT_APP_PUBLIC_URL}/craftMerge-logo-white.svg`}
-                alt="craft-merge-logo"
-                width="199"
-                height="24"
-            ></img>
+                alt="craft merge logo"
+                title="CraftMerge logo">
+            </img>
             <div className={css['policy-content-links']}>
                 {POLICY_LINKS.map((element) => (
                     <Link

diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.module.css b/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.module.css
@@ -5,34 +5,27 @@
     gap: 79px;
 }
 
-.policy-content-logo {
-    color: var(--main-white, #FFF);
-    font-feature-settings: 'calt' off;
-    font-family: var(--font-logo);
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    letter-spacing: -0.32px;
-}
-
 .policy-content-links {
     display: flex;
     align-items: flex-start;
     gap: 32px;
 }
 
 .policy-content-links__text {
-    color: var(--wf-base-500, #A0ABC0);
+    color: var(--footer-links-font-color);
     text-align: center;
     font-feature-settings: 'calt' off;
     text-decoration: none;
-
     font-family: var(--font-main);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     letter-spacing: -0.14px;
     white-space: nowrap;
-}
+}
+
+.policy-content__main_logo {
+    width: 199px;
+    height: 24px;
+}
diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterTop.module.css b/FrontEnd/src/components/HeaderFooter/footer/top/FooterTop.module.css
@@ -1,17 +1,16 @@
 .footer-top {
     display: flex;
-    width: 1304px;
-    padding: 24px 104px;
+    width: var(--main-block-size);
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: 32px;
-
-    background: var(--main-black-80, #3C4044);
+    background: var(--footer-backround);
 }
 
 .footer-top-content {
     display: flex;
     align-items: flex-start;
     gap: 180px;
+    padding: 24px 104px;
 }
diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/Navbar.jsx b/FrontEnd/src/components/HeaderFooter/header/navbar/Navbar.jsx
@@ -13,14 +13,14 @@
             <img
                 className={css['main-logo']}
                 src={`${process.env.REACT_APP_PUBLIC_URL}/craftMerge-logo.svg`}
-                alt="craft-merge-logo"
+                alt="craft merge logo"
                 width="199"
                 height="24"
             ></img>
        </Link>
      </div>
        <div className={css['navbar-utility-bar']}>
            {props.page === 'login' || props.page === 'registration' ? null : (
                <>
                    <Menu/>
                    <SearchBox></SearchBox>

diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/Profile.jsx b/FrontEnd/src/components/HeaderFooter/header/navbar/Profile.jsx
@@ -4,7 +4,6 @@ import { useAuth } from '../../../../hooks';
 
 import DropdownMenu from './DropdownMenu';
 import css from './Profile.module.css';
-import avatar_image from './Avatar.png';
 
 
 function Profile() {
@@ -30,8 +29,8 @@ function Profile() {
     <div className={css['header-profile-section']}>
       <img
         className={css['header-profile__avatar']}
-        src={avatar_image}
-        alt=""
+        src={`${process.env.REACT_APP_PUBLIC_URL}/img/Avatar.png`}
+        alt="avatar"
         onClick={navigateToProfile}
       />
       <DropdownMenu toggleText="Профіль">

diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/Profile.module.css b/FrontEnd/src/components/HeaderFooter/header/navbar/Profile.module.css
@@ -5,6 +5,8 @@
 }
 
 .header-profile__avatar {
+  width: 27px;
+  height: 27px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ProductsServices.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ProductsServices.jsx
@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect, useContext} from 'react';
 import { PropTypes } from 'prop-types';
-import { useEffect } from 'react';
-import { useContext } from 'react';
 import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './ProductsServices.module.css';
 import ReadMore from './ReadMore';
@@ -28,14 +26,14 @@ function ProductsServices ({ data }) {
             <div id="products-services" className={classes['products-services']}>
                 <div className={classes['products-services__title']}>
                     <div className={classes['products-services__title--block']}>
-                        <p className={classes['products-services__title--text']}>Товари / послуги</p>
+                        <h3 className={classes['products-services__title--text']}>Товари / послуги</h3>
                     </div>
                     <div className={classes['products-services__title--divider']}></div>
                 </div>
                 <div className={classes['products-services__content']}>
                     {profile.products &&
                     <div className={classes['products-services__content--block']}>
-                        <p className={classes['products-services__content--title']}>Товари</p>
+                        <h4 className={classes['products-services__content--title']}>Товари</h4>
                         <div className={classes['products-services__content--description']}>
                             <ReadMore>
                                 {profile.products}
@@ -44,7 +42,7 @@ function ProductsServices ({ data }) {
                     </div>}
                     {profile.services &&
                     <div className={classes['products-services__content--block']}>
-                        <p className={classes['products-services__content--title']}>Послуги</p>
+                        <h4 className={classes['products-services__content--title']}>Послуги</h4>
                         <div className={classes['products-services__content--description']}>
                             <ReadMore>
                                 {profile.services}

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx
@@ -21,7 +21,7 @@ const ReadMore = ({ children }) => {
 
   const ellipsisSymbol = ellipsis ? (
     <span className={classes['read-more-symbol']} onClick={toggleReadMore}>
-    {ELLIPSIS_PARAMETERS.symbol}
+      {ELLIPSIS_PARAMETERS.symbol}
     </span>
   ) : null;
 
@@ -35,7 +35,9 @@ const ReadMore = ({ children }) => {
           : false
       }
     >
-      {text}
+      <p className={classes['read-more__text']}>
+        {text}
+      </p>
     </Paragraph>
   );
 };

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css
@@ -10,7 +10,9 @@
     cursor: pointer;
 }
 
+.read-more__text,
 .read-more {
+    font-family: var(--font-main);
     color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;
     font-family: var(--font-main);

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Startup.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Startup.jsx
@@ -56,7 +56,7 @@ function Startup ({ data }) {
                 <div className={classes['startup']}>
                     <div className={classes['startup__title']}>
                         <div className={classes['startup__title--block']}>
-                            <p className={classes['startup__title--text']}>Стартап</p>
+                            <h2 className={classes['startup__title--text']}>Стартап</h2>
                         </div>
                         <div className={classes['startup__title--divider']}></div>
                     </div>

diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.jsx b/FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.jsx
@@ -58,7 +58,7 @@ function ProfileDetailNavBar({ data }) {
   }, [navigate, hash.pathname]);
 
   return (
-    <div>
+    <div className={classes['navbar-menu__main']}>
       <div className={classes['navbar-menu']}>
         {Object.entries(companyType()).map(
           ([link, label]) =>