Add link to all companies to the NewCompanies, css adjustments

ita-social-projects · Nov 1, 2024 · 7ba4e66 · 7ba4e66
1 parent 4d19d6d
commit 7ba4e66
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git 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,24 +104,27 @@
   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 {
   display: flex;
   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
@@ -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,16 +50,25 @@ const MainCompanies = ({ isAuthorized }) => {
     }
   }, [newMembers, companylist, searchResults]);
   const companyDataList = searchResults;
+  const linkText = windowWidth>500 ? 'Всі підприємства' : 'Всі';
 
   return (
     <div className={styles['new-companies-main']}>
       <div className={styles['new-companies-main__header']}>
         <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
@@ -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;