Merge pull request #365 from ita-social-projects/#364-AdjustBannerAnd…

…LogoImages #364 [Profile Detail, Profile List] Adjust banner and logo images
ita-social-projects · Dec 18, 2023 · a8e3818 · a8e3818
2 parents d8a24e5 + 77559fc
commit a8e3818
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 30 deletions.
diff --git a/FrontEnd/public/companies-logos/default_logo.png b/FrontEnd/public/companies-logos/default_logo.png
diff --git a/FrontEnd/src/components/ProfileDetail/BannerImage.jsx b/FrontEnd/src/components/ProfileDetail/BannerImage.jsx
@@ -1,24 +1,27 @@
 import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
 import classes from './BannerImage.module.css';
 
 function BannerImage ({ data }) {
 
+    const backgroundImage = {
+        background: `url(${data.banner_image}) lightgray 50% / cover no-repeat`,
+      };
+
     return (
-        <div className={classes['banner-image__block']}>
-            <div className={classes['banner-image']}>
-                {data.banner_image ? (
-                    <img src={data.banner_image} alt="Company Banner" />
-                    ) : (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="103"
-                    height="80"
-                    viewBox="0 0 103 80"
-                    fill="none"
-                >
-                    <path fillRule="evenodd" clipRule="evenodd" d="M0 40V80H51.2941H102.588V40V0H51.2941H0V40ZM84.9092 10.652L91.6322 11.289V40.156V69.022L51.0451 68.761L10.458 68.5L10.1941 39.818L9.93014 11.136L12.6841 10.718C17.2617 10.023 77.6942 9.968 84.9092 10.652ZM26.6431 19.08C23.7128 20.794 21.7856 25.537 22.8642 28.383C25.4668 35.258 35.6758 34.13 37.4088 26.775C37.9238 24.591 37.4537 23.45 35.0384 21.025C31.9049 17.879 29.6072 17.347 26.6431 19.08ZM57.5052 32.25C55.6447 34.587 53.1188 37.962 51.8927 39.75C49.2105 43.662 47.9027 43.795 44.7922 40.471L42.4257 37.941L33.1649 47.201C28.0713 52.294 23.9041 56.807 23.9041 57.23C23.9041 57.654 36.7256 58 52.3967 58C76.8954 58 80.8116 57.796 80.3345 56.548C79.6095 54.651 61.8428 28 61.3029 28C61.0759 28 59.3667 29.913 57.5052 32.25Z" fill="#BFC6CF"/>
-                </svg>
-                )}
+        <div className={classes['banner-image__block']} style={backgroundImage}>
+            <div className={classNames({[classes['default-banner']]: !data.banner_image})}>
+                {!data.banner_image &&
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="103"
+                        height="80"
+                        viewBox="0 0 103 80"
+                        fill="none"
+                    >
+                        <path fillRule="evenodd" clipRule="evenodd" d="M0 40V80H51.2941H102.588V40V0H51.2941H0V40ZM84.9092 10.652L91.6322 11.289V40.156V69.022L51.0451 68.761L10.458 68.5L10.1941 39.818L9.93014 11.136L12.6841 10.718C17.2617 10.023 77.6942 9.968 84.9092 10.652ZM26.6431 19.08C23.7128 20.794 21.7856 25.537 22.8642 28.383C25.4668 35.258 35.6758 34.13 37.4088 26.775C37.9238 24.591 37.4537 23.45 35.0384 21.025C31.9049 17.879 29.6072 17.347 26.6431 19.08ZM57.5052 32.25C55.6447 34.587 53.1188 37.962 51.8927 39.75C49.2105 43.662 47.9027 43.795 44.7922 40.471L42.4257 37.941L33.1649 47.201C28.0713 52.294 23.9041 56.807 23.9041 57.23C23.9041 57.654 36.7256 58 52.3967 58C76.8954 58 80.8116 57.796 80.3345 56.548C79.6095 54.651 61.8428 28 61.3029 28C61.0759 28 59.3667 29.913 57.5052 32.25Z" fill="#BFC6CF"/>
+                    </svg>
+                }
             </div>
         </div>
     );

diff --git a/FrontEnd/src/components/ProfileDetail/BannerImage.module.css b/FrontEnd/src/components/ProfileDetail/BannerImage.module.css
@@ -4,7 +4,7 @@
     flex-shrink: 0;
 }
 
-.banner-image {
+.default-banner {
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx
@@ -29,6 +29,7 @@ function TitleInfo({ isAuthorized, data }) {
           ? data.categories.slice(0, 4)
           : data.categories,
       isSaved: data.is_saved,
+      logo: data.logo_image,
     };
   }, [data]);
 
@@ -120,18 +121,14 @@ function TitleInfo({ isAuthorized, data }) {
     );
   };
 
-  // TODO: add logo from db once it's implemented on the server side
-
-  const logo = '';
-
   return (
     <div className={classes['title-block']}>
       <div className={classes['title-block__logo']}>
-        {!logo ? (
+        {!profile.logo ? (
           <DefaultLogo />
         ) : (
           <img className={classes['logo']}
-            src=""
+            src={profile.logo}
             alt="Company logo"
           />
         )}
@@ -198,5 +195,6 @@ TitleInfo.propTypes = {
       })
     ),
     is_saved: PropTypes.bool.isRequired,
+    logo_image: PropTypes.string,
   }).isRequired,
 };
diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.module.css b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.module.css
@@ -18,8 +18,8 @@
 }
 
 .logo {
-    width: 33.75px;
-    height: 33.75px;
+    width: 40px;
+    height: 40px;
     flex-shrink: 0;
     border-radius: 26px;
 }

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePage.js b/FrontEnd/src/components/ProfilePage/ProfilePage.js
@@ -23,7 +23,7 @@ const ProfilePage = () => {
                 ? <Loader />
                 :
                 <>
-                    <Description companyName={profile.name} formName={formName} />
+                    <Description companyName={profile.name} companyLogo={profile.logo_image} formName={formName} />
                     <ProfileContent
                         user={user}
                         profile={profile}

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/Description.js b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/Description.js
@@ -1,3 +1,4 @@
+import { PropTypes } from 'prop-types';
 import css from './Description.module.css';
 
 const DESCRIPTIONS = {
@@ -12,7 +13,7 @@ const Description = (props) => {
         <div className={css['description__section']}>
             <img
                 className={css['description__avatar']}
-                src={`${process.env.REACT_APP_PUBLIC_URL}/profilepage/initialCompanyLogo.png`}
+                src={props.companyLogo || `${process.env.REACT_APP_PUBLIC_URL}/companies-logos/default_logo.png`}
                 alt=""
             />
             <div className={css['description__content']}>
@@ -26,3 +27,9 @@ const Description = (props) => {
 };
 
 export default Description;
+
+Description.propTypes = {
+    companyName: PropTypes.string,
+    companyLogo: PropTypes.string,
+    formName: PropTypes.string,
+  };
diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx
@@ -34,6 +34,7 @@ export default function ProfileCard({ isAuthorized, data }) {
           : data.categories,
       isSaved: data.is_saved,
       commonInfo: data.common_info,
+      logo: data.logo_image,
     };
   }, [data]);
 
@@ -105,16 +106,14 @@ export default function ProfileCard({ isAuthorized, data }) {
     );
   };
 
-  // TODO: add logo from db once it's implemented on the server side
-
   return (
     <div className={css['company-card']}>
       <Link className={css['company-card__link']} to={`/profile-detail/${profile.id}`}>
         <div className={css['logo-box']}>
           <img
             className={css.logo}
-            src={`${process.env.REACT_APP_PUBLIC_URL}/companies-logos/1.png`}
-            alt=""
+            src={profile.logo || `${process.env.REACT_APP_PUBLIC_URL}/companies-logos/default_logo.png`}
+            alt="Company logo"
           />
         </div>
         <div className={css.content}>
@@ -164,5 +163,6 @@ ProfileCard.propTypes = {
     ),
     common_info: PropTypes.string,
     is_saved: PropTypes.bool.isRequired,
+    logo_image: PropTypes.string,
   }).isRequired,
 };