diff --git a/FrontEnd/src/constants/constants.js b/FrontEnd/src/constants/constants.js
index 01bd45b12..cf55d6aef 100644
--- a/FrontEnd/src/constants/constants.js
+++ b/FrontEnd/src/constants/constants.js
@@ -3,3 +3,14 @@ export const PASSWORD_PATTERN = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8
export const NAME_SURNAME_PATTERN = /^(?=.{2,50}$)[a-zA-Zа-щюяьА-ЩЮЯЬїЇіІєЄґҐ']+(\s[a-zA-Zа-щюяьА-ЩЮЯЬїЇіІєЄґҐ']+)*$/;
export const COMPANY_NAME_PATTERN = /^.{2,100}$/;
export const MESSAGE_PATTERN = /^.{10,}$/;
+export const SCREEN_WIDTH = {
+ tablet: 768,
+ smallDesktop: 1200,
+ desktop: 1512,
+};
+export const PAGE_SIZE = {
+ mobile: 4,
+ tablet: 10,
+ smallDesktop: 12,
+ desktop: 16,
+};
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
index a94ed20b5..a02362d11 100644
--- a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
+++ b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
@@ -1,13 +1,16 @@
-import axios from 'axios';
import { useState } from 'react';
-import useWindowWidth from '../../../hooks/useWindowWidth';
import { Link } from 'react-router-dom';
-import styles from './Companies.module.css';
-import Loader from '../../../components/Loader/Loader';
-import CompanyCard from '../../../components/CompanyCard/CompanyCard';
import PropTypes from 'prop-types';
-import useSWR from 'swr';
import { Col, Row } from 'antd';
+import useSWR from 'swr';
+import axios from 'axios';
+
+import useWindowWidth from '../../../hooks/useWindowWidth';
+import { SCREEN_WIDTH } from '../../../constants/constants';
+import Loader from '../../../components/Loader/Loader';
+import CompanyCard from '../../../components/CompanyCard/CompanyCard';
+
+import styles from './Companies.module.css';
const MainCompanies = ({ isAuthorized }) => {
const baseUrl = process.env.REACT_APP_BASE_API_URL;
@@ -35,9 +38,9 @@ const MainCompanies = ({ isAuthorized }) => {
setSearchResults(newCompanies);
};
- const linkText = windowWidth >= 768 ? 'Всі підприємства' : 'Всі';
- const antdGutter = windowWidth >= 1200 ? [24, 24] : [0, 24];
- const antdWrap = windowWidth < 1200;
+ const linkText = windowWidth >= SCREEN_WIDTH.tablet ? 'Всі підприємства' : 'Всі';
+ const antdGutter = windowWidth >= SCREEN_WIDTH.smallDesktop ? [24, 24] : [0, 24];
+ const antdWrap = windowWidth < SCREEN_WIDTH.smallDesktop;
return (
diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx b/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx
index 032a247f4..409a53a1d 100644
--- a/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx
+++ b/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx
@@ -3,6 +3,9 @@ import { useSearchParams } from 'react-router-dom';
import axios from 'axios';
import useSWR from 'swr';
import useWindowWidth from '../../hooks/useWindowWidth';
+import { definPageSize } from '../../utils/definePageSize';
+import { PAGE_SIZE } from '../../constants/constants';
+import { SCREEN_WIDTH } from '../../constants/constants';
import ErrorPage404 from '../ErrorPages/ErrorPage404';
import Loader from '../../components/Loader/Loader';
@@ -34,23 +37,15 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
const [profiles, setProfiles] = useState([]);
const [filters, setFilters] = useState([]);
const [currentPage, setCurrentPage] = useState(pageNumber);
- const [pageSize, setPageSize] = useState(16);
+ const [pageSize, setPageSize] = useState(PAGE_SIZE.mobile);
const [activeTab, setActiveTab] = useState(searchParams.get('companyType') || 'all');
const [activeBtn, setActiveBtn] = useState(searchParams.get('activity') || 'all');
const windowWidth = useWindowWidth();
- const linkText = windowWidth >= 768 ? 'Усі підприємства' : 'Усі';
+ const linkText = windowWidth >= SCREEN_WIDTH.tablet ? 'Усі підприємства' : 'Усі';
useEffect(() => {
- if (windowWidth < 768) {
- setPageSize(4);
- } else if (windowWidth >= 768 && windowWidth < 1200) {
- setPageSize(16);
- } else if (windowWidth >= 1200 && windowWidth < 1512) {
- setPageSize(12);
- } else if (windowWidth >= 1512) {
- setPageSize(16);
- }
+ definPageSize(windowWidth, setPageSize);
}, [windowWidth]);
const [url, setUrl] = useState(
diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css
index bacee63c6..1b266d718 100644
--- a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css
+++ b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css
@@ -9,7 +9,7 @@
width: 100vw;
display: flex;
flex-direction: column;
-
+ align-self: center;
}
.company-list__header--wrapper {
@@ -30,11 +30,10 @@
}
.company-list__title {
- font-family: Geologica;
+ font-family: var(--font-main);
font-weight: 700;
line-height: 28.8px;
letter-spacing: 0.01em;
-
}
.company-list__tabs {
@@ -76,8 +75,8 @@
display: flex;
align-self: center;
flex-direction: column;
- padding: 24px 27px 40px;
- gap: 20px;
+ padding: 40px 15px;
+ gap: 16px;
}
.company-list__content--btns-wrapper {
@@ -123,6 +122,10 @@
.company-list__content {
width: 768px;
}
+
+ .company-list__content {
+ padding: 24px 24px 48px;
+ }
}
@media only screen and (min-width: 1200px) {
@@ -136,7 +139,7 @@
}
.company-list__content {
- padding: 24px 35px 32px;
+ padding: 24px 32px 64px;
gap: 32px;
}
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
index e36aff560..f4a7093dc 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
@@ -1,12 +1,13 @@
-import css from './ProfilePage.module.css';
-import Description from './ProfilePageComponents/Description';
-import ProfileContent from './ProfilePageComponents/ProfileContent';
import { useState, useEffect } from 'react';
import { DirtyFormContext } from '../../context/DirtyFormContext';
-import Loader from '../../components/Loader/Loader';
import { useAuth, useProfile } from '../../hooks';
import useWindowWidth from '../../hooks/useWindowWidth';
+import { SCREEN_WIDTH } from '../../constants/constants';
+import Loader from '../../components/Loader/Loader';
+import Description from './ProfilePageComponents/Description';
+import ProfileContent from './ProfilePageComponents/ProfileContent';
import EditProfileMobile from './Mobile/EditProfileMobile';
+import css from './ProfilePage.module.css';
const ProfilePage = () => {
const [formIsDirty, setFormIsDirty] = useState(false);
@@ -28,7 +29,7 @@ const ProfilePage = () => {
}, [formIsDirty]);
- if (windowWidth < 768) {
+ if (windowWidth < SCREEN_WIDTH.tablet) {
return (
diff --git a/FrontEnd/src/pages/SearchPage/Search.jsx b/FrontEnd/src/pages/SearchPage/Search.jsx
index 055583d47..69992c4e4 100644
--- a/FrontEnd/src/pages/SearchPage/Search.jsx
+++ b/FrontEnd/src/pages/SearchPage/Search.jsx
@@ -6,6 +6,9 @@ import axios from 'axios';
import useSWR from 'swr';
import useWindowWidth from '../../hooks/useWindowWidth';
+import { definPageSize } from '../../utils/definePageSize';
+import { PAGE_SIZE } from '../../constants/constants';
+
import Loader from '../../components/Loader/Loader';
import ProfileList from '../ProfileList/ProfileList';
import styles from './Search.module.scss';
@@ -16,7 +19,7 @@ export function Search({ isAuthorized }) {
const searchTerm = searchParams.get('name');
const pageNumber = Number(searchParams.get('page')) || 1;
const [currentPage, setCurrentPage] = useState(pageNumber);
- const [pageSize, setPageSize] = useState(16);
+ const [pageSize, setPageSize] = useState(PAGE_SIZE.mobile);
const servedAddress = process.env.REACT_APP_BASE_API_URL;
async function fetcher(url) {
@@ -43,15 +46,7 @@ export function Search({ isAuthorized }) {
const windowWidth = useWindowWidth();
useEffect(() => {
- if (windowWidth < 768) {
- setPageSize(4);
- } else if (windowWidth >= 768 && windowWidth < 1200) {
- setPageSize(16);
- } else if (windowWidth >= 1200 && windowWidth < 1512) {
- setPageSize(12);
- } else if (windowWidth >= 1512) {
- setPageSize(16);
- }
+ definPageSize(windowWidth, setPageSize);
}, [windowWidth]);
const updateQueryParams = (newPage) => {
diff --git a/FrontEnd/src/utils/definePageSize.js b/FrontEnd/src/utils/definePageSize.js
new file mode 100644
index 000000000..9e397b46f
--- /dev/null
+++ b/FrontEnd/src/utils/definePageSize.js
@@ -0,0 +1,15 @@
+import { SCREEN_WIDTH } from '../constants/constants';
+import { PAGE_SIZE } from '../constants/constants';
+
+export function definPageSize (windowWidth, setPageSize) {
+ if (windowWidth < SCREEN_WIDTH.tablet) {
+ return setPageSize(PAGE_SIZE.mobile);
+ }
+ if (windowWidth < SCREEN_WIDTH.smallDesktop) {
+ return setPageSize(PAGE_SIZE.tablet);
+ }
+ if (windowWidth < SCREEN_WIDTH.desktop) {
+ return setPageSize(PAGE_SIZE.smallDesktop);
+ }
+ return setPageSize(PAGE_SIZE.desktop);
+ }