diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css index 4066ac164..d90ac7999 100644 --- a/FrontEnd/src/App.css +++ b/FrontEnd/src/App.css @@ -1,7 +1,5 @@ .App { - /*for footer correct work*/ display: flex; - min-height: 100vh; flex-direction: column; } diff --git a/FrontEnd/src/App.jsx b/FrontEnd/src/App.jsx index e9c40b406..296f7b817 100644 --- a/FrontEnd/src/App.jsx +++ b/FrontEnd/src/App.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import './App.css'; import { RouterProvider } from 'react-router-dom'; import router from './routes/Router'; diff --git a/FrontEnd/src/components/Footer/Footer.module.css b/FrontEnd/src/components/Footer/Footer.module.css index 84bd6beba..38f3f48f9 100644 --- a/FrontEnd/src/components/Footer/Footer.module.css +++ b/FrontEnd/src/components/Footer/Footer.module.css @@ -1,6 +1,6 @@ .footer-main { display: flex; - width: 100vw; + width: 100%; background: var(--footer-backround); justify-content: center; } @@ -8,8 +8,8 @@ .footer-content { display: flex; flex-direction: column; - justify-content: space-around; - padding: 32px 24px; + justify-content: space-between; + padding: 32px 0px; width: 327px; height: 679px; gap: 32px; @@ -22,11 +22,19 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .footer-content { flex-direction: row; - width: 1304px; + width: 1136px; height: 205px; - padding: 32px 104px; + padding: 32px 32px 48px 32px; + gap: 24px; + } +} + +@media only screen and (min-width: 1512px) { + .footer-content { + width: 1304px; + gap: 32px; } } diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css index bed5b8621..69fd49083 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css @@ -72,7 +72,7 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .footer-address__text { flex-direction: column; } @@ -82,3 +82,10 @@ padding-left: 0px; } } + +@media only screen and (min-width: 1512px) { + .footer-address__contacts { + padding-top: 25px; + padding-left: 0px; + } +} diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css index 4fcf5c546..042d98620 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css @@ -53,11 +53,10 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .navigation-content { flex-direction: column; justify-content: flex-end; - min-width: 569px; } .navigation-content__company, @@ -72,7 +71,16 @@ .navigation-content-section__text-block, .navigation-content-company__text-block { flex-direction: row; - gap: 35px; padding-top: 15px; } } + +@media only screen and (min-width: 1512px) { + .navigation-content { + min-width: 569px; + } + .navigation-content-section__text-block, + .navigation-content-company__text-block { + gap: 35px; + } +} diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css index 1110eb5b5..b70c1441b 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css @@ -58,7 +58,7 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .policy-divider { background: none; } diff --git a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css index 20b2313e5..48c029b63 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css @@ -1,7 +1,7 @@ .scroll-to-top-button { position: fixed; bottom: 30px; - left: 80%; + left: 85%; width: 40px; height: 40px; background-color: var(--footer-scroll-button); @@ -26,8 +26,14 @@ background-color: var(--footer-scroll-button); } -@media only screen and (min-width: 1512px) { - .scroll-to-top-button { +@media only screen and (min-width: 768px) { + .scroll-to-top-button { + left: 92%; + } +} + +@media only screen and (min-width: 1200px) { + .scroll-to-top-button { left: 95%; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx b/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx deleted file mode 100644 index dfd9442fb..000000000 --- a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import css from './FooterPolicy.module.css'; -import { Link } from 'react-router-dom'; - -const POLICY_LINKS = [ - { - id: 'i0', - title: 'Політика конфіденційності ', - link: 'privacy-policy/' - }, - { - id: 'i1', - title: 'Умови користування', - link: 'terms-and-conditions/' - }, - { - id: 'i3', - title: 'Contact', - link: 'contact/' - } -]; - -function FooterPolicy() { - return ( -
- Footer craft merge logo - -
- {POLICY_LINKS.map((element) => ( - - {element.title} - - ))} -
-
- ); -} - -export default FooterPolicy; diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css index baf2f8471..f8b7d43c0 100644 --- a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css +++ b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css @@ -21,7 +21,7 @@ .data-block_render-contact, .data-content_render-data { display: flex; - width: 343px; + width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css index cc44f87d1..60f00b380 100644 --- a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css +++ b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css @@ -57,8 +57,8 @@ .detail-info-page { display: flex; flex-direction: column; - width: 768px; - padding: 24px; + width: 760px; + padding: 24px 0; } .company-description-block { @@ -69,6 +69,7 @@ font-size: 34px; line-height: 40.8px; letter-spacing: -0.34px; + width: 300px; } } diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx index 7cef78f95..06b9723ca 100644 --- a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx +++ b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx @@ -1,5 +1,6 @@ import { PropTypes } from 'prop-types'; import classes from './BannerImage.module.css'; +import PendingStatus from '../../../components/MiniComponents/PendingModerationIcon/PendingStatus'; function BannerImage({ data }) { const backgroundImage = data?.banner?.path @@ -10,7 +11,11 @@ function BannerImage({ data }) {
+ > +
+ +
+
); } diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css index abf787621..fb3c3bb69 100644 --- a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css +++ b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css @@ -1,8 +1,16 @@ .banner-image__block { + display: flex; + justify-content: flex-start; width: var(--profile-detail-width); height: 195px; } +.banner-image-tooltip { + display: flex; + padding-top: 12px; + padding-left: 10%; +} + @media only screen and (min-width: 768px) { .banner-image__block { height: 368px; diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx index c61c62055..19e847644 100644 --- a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx +++ b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx @@ -13,8 +13,6 @@ import DetailedInfoSection from './DetailedInfo/DetailedInfoSection'; import { ActiveLinksContext } from '../../context/ActiveLinksContext'; -import PendingStatus from '../../components/MiniComponents/PendingModerationIcon/PendingStatus'; - import classes from './ProfileDetailPage.module.css'; @@ -57,13 +55,7 @@ function ProfileDetailPage({ isAuthorized }) { ) : ( -
- -
-
- -
-
- {!profile.logo?.path ? ( - - ) : ( - Логотип компанії - )} -
-
-

- {profile.activities} -

-
-

- {profile.name} -

-

- {profile.regions} +

+
+ +
+ {!profile.logo?.path ? ( + + ) : ( + Логотип компанії + )} +
+
+

+ {profile.activities}

-
- +
+

+ {profile.name} +

+

+ {profile.regions} +

+
+ +
-
{isAuthorized ? (
{!ownProfile && ( diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index 8473c8c46..8e007438b 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css @@ -27,6 +27,11 @@ align-items: center; } +.title-block__logo-tooltip { + display: flex; + padding-bottom: 64px; +} + .title-block__logo-img { width: 64px; height: 64px; @@ -135,7 +140,7 @@ @media only screen and (min-width: 768px) { .title-block__content { - width: 768px; + width: 760px; } .title-block { @@ -144,7 +149,7 @@ .title-block__content-info { flex-direction: row; - width: 768px; + width: 728px; gap: 24px; }