Merge pull request #807 from ita-social-projects/#794-expand-content

#794 expand content
ita-social-projects · Oct 8, 2024 · be4f8d0 · be4f8d0
2 parents a823665 + 958be4a
commit be4f8d0
Show file tree

Hide file tree

Showing 28 changed files with 273 additions and 231 deletions.
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -55,7 +55,7 @@
   align-items: flex-start;
   gap: 16px;
   border-radius: 0 0 12px 12px;
-  background: var(--main_light-color);
+  background: var(--company-card-color);
 }
 
 .company-card__text-block__header {
@@ -125,7 +125,7 @@
 }
 
 .company-card__badge-text {
-  color: var(--main_light-color);
+  color: var(--company-card-color);
   text-align: center;
   font-feature-settings: 'calt' off;
   font-family: var(--font-main);
@@ -148,7 +148,7 @@
   width: 64px;
   height: 64px;
   flex-shrink: 0;
-  background: var(--main_light-color);
+  background: var(--company-card-color);
   left: 0;
   top: 0;
   border-radius: 9999px;
@@ -160,7 +160,7 @@
   height: 54px;
   flex-shrink: 0;
   border-radius: 26px;
-  background: var(--main_light-color);
+  background: var(--company-card-color);
   left: 5px;
   top: 5px;
   position: absolute;
@@ -170,7 +170,7 @@
 .company-card__buttons {
   color: var(--companies-card-button);
   border: none;
-  background-color: var(--main_light-color);
+  background-color: var(--company-card-color);
 }
 
 .company-card__buttons:hover {

diff --git a/FrontEnd/src/components/Header/Navbar/DropdownMenu.module.css b/FrontEnd/src/components/Header/Navbar/DropdownMenu.module.css
@@ -29,8 +29,8 @@
 
   position: absolute;
   z-index: 1;
-  top: 44px;
-  left: 1321px;
+  top: calc(var(--navbar-content-height) + 20px);
+  left: 1140px;
   border-radius: 2px;
   background: var(--conditional-pop-over, #fff);
   box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),

diff --git a/FrontEnd/src/components/Header/Navbar/Navbar.module.css b/FrontEnd/src/components/Header/Navbar/Navbar.module.css
@@ -3,6 +3,7 @@
   padding: 8px 104px;
   align-items: center;
   justify-content: space-between;
+  height: var(--navbar-content-height);
 }
 
 .navbar-logo__text{

diff --git a/FrontEnd/src/components/Loader/Loader.jsx b/FrontEnd/src/components/Loader/Loader.jsx
@@ -3,7 +3,7 @@ import css from './Loader.module.css';
 
 export default function Loader() {
   return (
-    <div className={css.container}>
+    <div className={css.loader__container}>
         <Carousel autoplay autoplaySpeed={1000} infinite dotPosition="top">
           <div>
             <span />

diff --git a/FrontEnd/src/components/Loader/Loader.module.css b/FrontEnd/src/components/Loader/Loader.module.css
@@ -1,4 +1,4 @@
-.container {
-  padding: 190px;
-  max-width: 1132px;
-}
+.loader__container {
+  padding-top: 30%;
+  min-height: var(--min-height-block-main);
+}
diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
@@ -69,6 +69,7 @@
   --toastify-custom-close-button: rgba(0, 0, 0, 0.85);
 
   /* Header */
+  --navbar-content-height: 32px;
 
   /* Footer */
   --footer-backround: #3C4044;
@@ -108,4 +109,10 @@
   --main-black-90: #292e32;
   --primary-green-80: #1f9a7c;
   --character-title-85: rgba(0, 0, 0, 0.85);
+
+  --wf-base-white: #FFF;
+
+  --profile-min-height-block: calc(100vh - 565px);
+  --min-height-block-main: calc(100vh - 305px);
+  --company-card-color: #FFF;
 }
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -1,7 +1,7 @@
 .auth-page {
     display: flex;
     width: var(--main-block-size);
-    height: 725px;
+    min-height: var(--min-height-block-main);
     flex-shrink: 0;
     background: #f1fff7;
   }

diff --git a/FrontEnd/src/pages/CustomThemes/customProfileTooltipThemes.js b/FrontEnd/src/pages/CustomThemes/customProfileTooltipThemes.js
@@ -0,0 +1,11 @@
+const tooltipInnerContentStyles = {
+    display: 'flex',
+    borderRadius: '2px',
+    background: 'var(--main-grey-90, #25292C)',
+    color: 'var(--main-white, #FFF)',
+    fontFeatureSettings: 'calt',
+    fontFamily: 'Inter',
+    letterSpacing: '-0.14px',
+};
+
+export default tooltipInnerContentStyles;
diff --git a/FrontEnd/src/pages/ErrorPages/ErrorPage404.jsx b/FrontEnd/src/pages/ErrorPages/ErrorPage404.jsx
@@ -4,19 +4,19 @@ import { Button } from 'antd';
 
 export default function ErrorPage404() {
   return (
-    <div className={css.page}>
-      <div className={css.container}>
-        <div className={css.text404}>404</div>
-        <div className={css.block}>
-          <div className={css.explanation}>
-            <p className={css['main-text']}>Щось пішло не так</p>
-            <p className={css.details}>
+    <div className={css.ErrorPage404__page}>
+      <div className={css.ErrorPage404__container}>
+        <div className={css.ErrorPage404__text404}>404</div>
+        <div className={css.ErrorPage404__block}>
+          <div className={css.ErrorPage404__explanation}>
+            <p className={css['ErrorPage404__main-text']}>Щось пішло не так</p>
+            <p className={css.ErrorPage404__details}>
               Схоже, це неправильна адреса, ця сторінка видалена, перейменована
               або тимчасово недоступна.
             </p>
           </div>
           <Button>
-            <Link className={css['button-text']} to="/">Повернутися на Головну</Link>
+            <Link className={css['ErrorPage404__button-text']} to="/">Повернутися на Головну</Link>
           </Button>
         </div>
       </div>

diff --git a/FrontEnd/src/pages/ErrorPages/ErrorPage404.module.css b/FrontEnd/src/pages/ErrorPages/ErrorPage404.module.css
@@ -1,11 +1,12 @@
-.page {
-  height: 800px;
+.ErrorPage404__page {
+  min-height: var(--min-height-block-main);
   display: flex;
   justify-content: center;
   background: var(--primary-green-80, #1f9a7c);
+
 }
 
-.container {
+.ErrorPage404__container {
   display: flex;
   align-items: center;
   gap: 80px;
@@ -15,7 +16,7 @@
   font-style: normal;
 }
 
-.text404 {
+.ErrorPage404__text404 {
   display: flex;
   height: 178px;
   flex-direction: column;
@@ -26,35 +27,35 @@
   letter-spacing: -2px;
 }
 
-.block {
+.ErrorPage404__block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 36px;
 }
 
-.explanation {
+.ErrorPage404__explanation {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
 }
 
-.main-text {
+.ErrorPage404__main-text {
   font-size: 48px;
   font-weight: 700;
   line-height: 120%;
   letter-spacing: 0.48px;
 }
 
-.details {
+.ErrorPage404__details {
   width: 548px;
   font-size: 16px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: -0.16px;
 }
 
-.button-text {
+.ErrorPage404__button-text {
   font-family: var(--font-main);
 }
diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx
@@ -29,37 +29,45 @@ function ProfileDetailPage({ isAuthorized }) {
     isLoading,
   } = useSWR(urlProfile, fetcher);
 
-  const notRequiredData = ['address', 'banner', 'logo', 'common_info', 'edrpou', 'rnokpp', 'founded', 'official_name', 'product_info', 'service_info', 'startup_idea', 'logistics', 'cooperation'];
-  const containsNotRequiredData = fetchedProfile ? Object.keys(fetchedProfile).some(key => notRequiredData.includes(key) && fetchedProfile[key] !== '' && fetchedProfile[key] !== null) : false;
+  const notRequiredData = [
+    'address', 'banner', 'logo', 'common_info', 'edrpou',
+    'rnokpp', 'founded', 'official_name', 'product_info',
+    'service_info', 'startup_idea', 'logistics', 'cooperation'
+  ];
+
+  const containsNotRequiredData = fetchedProfile ?
+    Object.keys(fetchedProfile).some(key => notRequiredData.includes(key) &&
+      fetchedProfile[key] !== '' &&
+      fetchedProfile[key] !== null) : false;
 
   return (error && error.status !== 401) ? (
     <ErrorPage404 />
   ) : (
-    <div className={isLoading ? classes['loader-content'] : null}>
+    <div className={isLoading ? classes['profile-detail__loader-content'] : classes['profile-detail__main'] }>
       {isLoading ? (
         <Loader />
       ) : (
-          <ActiveLinksContext.Provider value={{ activeLinks, setActiveLinks }}>
-            <div className={classes['banner-tooltip']}>
+        <ActiveLinksContext.Provider value={{ activeLinks, setActiveLinks }}>
+          <div className={classes['profile-detail__banner-tooltip']}>
             <PendingStatus profile={fetchedProfile} elementType="banner" />
+          </div>
+          <BannerImage data={fetchedProfile} />
+          <div className={classes['profile-detail__page']}>
+            <MainInfoSection
+              containsNotRequiredData={containsNotRequiredData}
+              isAuthorized={isAuthorized}
+              data={fetchedProfile}
+            />
+            <div className={classes['profile-detail__logo-tooltip']}>
+              <PendingStatus profile={fetchedProfile} elementType="logo" />
             </div>
-            <BannerImage data={fetchedProfile} />
-            <div className={classes['profile-page']}>
-              <MainInfoSection
-                containsNotRequiredData={containsNotRequiredData}
-                isAuthorized={isAuthorized}
-                data={fetchedProfile}
-              />
-              <div className={classes['logo-tooltip']}>
-                <PendingStatus profile={fetchedProfile} elementType="logo" />
-              </div>
-              <DetailedInfoSection
-                containsNotRequiredData={containsNotRequiredData}
-                isAuthorized={isAuthorized}
-                data={fetchedProfile}
-              />
-            </div>
-          </ActiveLinksContext.Provider>
+            <DetailedInfoSection
+              containsNotRequiredData={containsNotRequiredData}
+              isAuthorized={isAuthorized}
+              data={fetchedProfile}
+            />
+          </div>
+        </ActiveLinksContext.Provider>
       )}
     </div>
   );

diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.module.css
@@ -1,28 +1,31 @@
-.loader-content {
-    width: 1305px;
-    margin-left: auto;
-    margin-right: auto;
+.profile-detail__main {
+    display: flex;
+    flex-direction: column;
+    min-height: var(--min-height-block-main);
+    align-content: center;
+}
+
+.profile-detail__loader-content {
+    display: flex;
 }
 
-.profile-page {
+.profile-detail__banner-tooltip {
+    display: flex;
+    position: absolute;
+    padding-top: 12px;
+    padding-left: 112px;
+}
+
+.profile-detail__page {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     gap: 16px;
-    margin-left: 104px;
-    margin-right: 104px;
 }
 
-.logo-tooltip{
+.profile-detail__logo-tooltip {
     display: flex;
-    position:absolute;
+    position: absolute;
     padding-top: 5px;
     padding-left: 3px;
 }
-
-.banner-tooltip{
-    display: flex;
-    position:absolute;
-    padding-top: 12px;
-    padding-left: 112px;
-}
diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css
@@ -2,6 +2,7 @@
   min-height: 470px;
   border-radius: 8px;
   background: var(--wf-base-white, #fff);
+  flex-grow: 1;
 }
 
 .page-content {

diff --git a/...src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css b/...src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css
@@ -163,4 +163,4 @@
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-}
+}
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx
@@ -14,7 +14,7 @@ const DeleteProfilePage = (props) => {
     setModal(false);
   };
   return (
-    <div>
+    <div className={css['button__delete-main']}>
       <div className={css['text__for__delete']}>Видалити акаунт</div>
       <button className={css['button__delete']} onClick={() => setModal(true)}>
         Видалити

diff --git a/.../src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css b/.../src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css
@@ -1,10 +1,15 @@
+.button__delete-main {
+   height: calc(var(--profile-min-height-block) + 42px);
+}
+
 .button__delete {
     color: #F15831;
     cursor: pointer;
     width: 109px;
     height: 32px;
     padding: 5px 15px 5px 15px;
     margin-top: 8px;
+    margin-bottom: 10px;
     border-radius: 4px;
     gap: 10px;
     background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
@@ -16,7 +21,6 @@
     line-height: 20px;
     letter-spacing: -0.01em;
     text-align: center;
-    margin-bottom: 400px;
 }
 
 .text__for__delete {

diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css b/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css
@@ -1,8 +1,6 @@
 .container {
-    word-wrap: break-word;
-    width: var(--main-block-size);
-    margin-top: 32px;
-    margin-right: 488px;
+    display: flex;
+    flex-direction: column;
+    padding-top: 32px;
     left: 192px;
-    gap: 40px;
 }