From 7ba4e66bfdc021e46d300c275a0ff1a24a5bc93f Mon Sep 17 00:00:00 2001
From: Yan Zhylavy <yanzhylavy@gmail.com>
Date: Fri, 1 Nov 2024 12:39:13 +0200
Subject: [PATCH] Add link to all companies to the NewCompanies, css
 adjustments

---
 .../CompanyCard/CompanyCard.module.css        | 17 +++++----
 .../pages/LandingPage/Companies/Companies.jsx | 23 +++++++++++-
 .../Companies/Companies.module.css            | 36 ++++++++++++-------
 3 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
index 907c0d1c..2ad86d8a 100644
--- a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
+++ b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -7,6 +7,7 @@
   border-radius: 11px;
   transition: transform 0.2s ease;
   position: relative;
+  margin: auto;
 }
 
 .company-card:hover {
@@ -50,11 +51,10 @@
 .company-card__text-block {
   width: 302px;
   height: 177px;
-  padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 16px;
+  justify-content: space-between;
   border-radius: 0 0 12px 12px;
   background: var(--company-card-color);
 }
@@ -69,24 +69,26 @@
 .company-card__category-text {
   color: var(--companies-card-lover-text);
   text-align: center;
-  font-family: var(--font-main);
+  font-family: var(--font-logo);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%;
   text-align: left;
+  padding-left: 16px;
 }
 
 .company-card__name-text {
   height: 48px;
   color: var(--companies-card-text-color);
-  font-family: var(--font-main);
+  font-family: var(--font-logo);
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%;
   text-transform: uppercase;
   text-align: left;
+  padding-left: 16px;
 }
 
 .company-card__name-text_link {
@@ -102,13 +104,14 @@
   height: 20px;
   color: var(--companies-card-address);
   font-feature-settings: 'calt' off;
-  font-family: var(--font-main);
+  font-family: var(--font-logo);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: -0.14px;
   text-align: left;
+  padding-left: 16px;
 }
 
 .company-card__footer_content {
@@ -116,10 +119,12 @@
   flex-direction: row;
   justify-content: space-between;
   width: 302px;
+  padding-left: 13px;
+  padding-bottom: 2px;
 }
 
 .company-card__badges_block {
-  height: 24px;
+  height: 25px;
   display: inline-block;
   overflow: hidden;
 }
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
index 5d980907..437c4756 100644
--- a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
+++ b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import styles from './Companies.module.css';
 import CompanyCard from '../../../components/CompanyCard/CompanyCard';
 import PropTypes from 'prop-types';
@@ -10,6 +11,17 @@ const MainCompanies = ({ isAuthorized }) => {
   const baseUrl = process.env.REACT_APP_BASE_API_URL;
   const [searchResults, setSearchResults] = useState([]);
   const [newMembers, setNewMembers] = useState(true);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   const fetcher = async (url) => {
     const data = await axios.get(url);
@@ -38,6 +50,7 @@ const MainCompanies = ({ isAuthorized }) => {
     }
   }, [newMembers, companylist, searchResults]);
   const companyDataList = searchResults;
+  const linkText = windowWidth>500 ? 'Всі підприємства' : 'Всі';
 
   return (
     <div className={styles['new-companies-main']}>
@@ -45,9 +58,17 @@ const MainCompanies = ({ isAuthorized }) => {
         <h2 className={styles['new-companies-main__title']}>
           Нові учасники
         </h2>
+        <div className={styles['new-companies-link-to-all']}>
+          <Link to="profiles/companies">
+            <p>{linkText}<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0.768024 7.90895L12.5223 7.90895L5.487 14.0161C5.3745 14.1145 5.4428 14.2973 5.59146 14.2973L7.36936 14.2973C7.44771 14.2973 7.52204 14.2692 7.5803 14.219L15.172 7.63172C15.2416 7.57145 15.2973 7.49694 15.3356 7.41323C15.3738 7.32953 15.3936 7.23858 15.3936 7.14657C15.3936 7.05455 15.3738 6.96361 15.3356 6.8799C15.2973 6.79619 15.2416 6.72168 15.172 6.66141L7.53611 0.0339549C7.50597 0.00783851 7.46981 -0.00622437 7.43164 -0.00622437L5.59347 -0.00622454C5.44481 -0.00622455 5.37651 0.178598 5.48901 0.275025L12.5223 6.38217L0.768024 6.38217C0.679632 6.38217 0.60731 6.45449 0.60731 6.54288L0.60731 7.74824C0.60731 7.83663 0.679632 7.90895 0.768024 7.90895Z" fill="black" fillOpacity="0.85" />
+            </svg>
+            </p>
+          </Link>
+        </div>
       </div>
       <div className={styles['new-companies-block']}>
-      <Row gutter={[16, 16]}>
+        <Row justify={'center'} gutter={[16, 16]}>
           {companyDataList.map((result, resultIndex) => (
             <Col key={resultIndex} xs={24} sm={12} lg={6}>
               <CompanyCard
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css b/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
index c978dcf7..5ab85dfe 100644
--- a/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
+++ b/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
@@ -4,29 +4,41 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 24px;
   background: #f1fff7;
 }
 
 .new-companies-main__header {
-  width: var(--main-block-size);
+  position: relative;
+  width: 100%;
   display: flex;
+  margin-top: 50px;
 }
 
 .new-companies-main__title {
-  width: 444px;
-  height: 24px;
-  gap: 800px;
-  color: #292e32;
-  text-transform: uppercase;
-  font-family: var(--font-main);
-  font-size: 20px;
+  color: #232424;
+  font-family: var(--font-logo);
+  font-size: 40px;
   font-style: normal;
   font-weight: 700;
-  line-height: 120%;
-  margin-left: 104px;
-  margin-top: 80px;
+  padding-left: 125px;
 }
+ .new-companies-link-to-all {
+  position: absolute;
+  right: 0px;
+  top: 29px
+ }
+
+ .new-companies-link-to-all a {
+  font-family: var(--font-logo);
+  color: #232424;
+  font-weight: 600;
+  font-size: 16px;
+ }
+
+ .new-companies-link-to-all svg {
+  position: absolute;
+  top: 4px;
+ }
 
 .new-companies-block {
   display: flex;