fixed styles in company card

ita-social-projects · Nov 30, 2024 · 88b1120 · 88b1120
1 parent 715b8b8
commit 88b1120
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 48 deletions.
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.jsx b/FrontEnd/src/components/CompanyCard/CompanyCard.jsx
@@ -98,33 +98,34 @@ export default function CompanyCard({
             )}
           </div>
           <div className={styles['company-card__text-block']}>
-            <Tooltip
-              title={activitiesString}
-              placement="bottom"
-              pointAtCenter={true}
-            >
-              <p className={styles['company-card__category-text']}>
-                {activitiesSliceString}
-              </p>
-            </Tooltip>
             <div className={styles['company-card__text-block__header']}>
+              <Tooltip
+                title={activitiesString}
+                placement="bottom"
+                pointAtCenter={true}
+              >
+                <p className={styles['company-card__category-text']}>
+                  {activitiesSliceString}
+                </p>
+              </Tooltip>
+
               <h3 className={styles['company-card__name-text']}>
                 {profile.name}
               </h3>
+              <Tooltip
+                title={profile.regions_ukr_display}
+                placement="bottom"
+                pointAtCenter={true}
+              >
+                <p className={styles['company-card__region-text']}>
+                  {regions
+                    ? regions.length < lengthOfRegion
+                      ? regions
+                      : `${regions.substring(0, 35)}...`
+                    : ''}
+                </p>
+              </Tooltip>
             </div>
-            <Tooltip
-              title={profile.regions_ukr_display}
-              placement="bottom"
-              pointAtCenter={true}
-            >
-              <p className={styles['company-card__region-text']}>
-                {regions
-                  ? regions.length < lengthOfRegion
-                    ? regions
-                    : `${regions.substring(0, 35)}...`
-                  : ''}
-              </p>
-            </Tooltip>
             <div className={styles['company-card__footer_content']}>
               <Tooltip
                 title={
@@ -138,6 +139,12 @@ export default function CompanyCard({
                   <CategoryBadges categories={profile.categories.slice(0, 3)} />
                 </div>
               </Tooltip>
+                <StarForLike
+                  isSaved={profile.is_saved}
+                  isAuthorized={isAuthorized}
+                  ownProfile={ownProfile}
+                  handleClick={profile.is_saved ? handleDeleteSaved : handleSave}
+                />
             </div>
           </div>
         </div>
@@ -157,14 +164,6 @@ export default function CompanyCard({
           )}
         </div>
       </Link>
-      <div className={styles['company-card__star']}>
-        <StarForLike
-          isSaved={profile.is_saved}
-          isAuthorized={isAuthorized}
-          ownProfile={ownProfile}
-          handleClick={profile.is_saved ? handleDeleteSaved : handleSave}
-        />
-      </div>
     </div>
   );
 }

diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -54,19 +54,21 @@
 
 .company-card__text-block {
   width: 345px;
-  height: 177px;
+  height: 181px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: space-around;
+  box-sizing: border-box;
+  gap: 16px;
+  padding: 16px;
   border-radius: 0 0 12px 12px;
 }
 
 .company-card__text-block__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 12px;
+  gap: 16px;
 }
 
 .company-card__category-text {
@@ -78,14 +80,11 @@
   font-weight: 700;
   line-height: 120%;
   text-align: left;
-  padding-left: 16px;
-  padding-top: 6px;
   max-width: 262px;
   height: 35px;
 }
 
 .company-card__name-text {
-  height: 44px;
   color: var(--companies-card-text-color);
   font-family: var(--font-logo);
   font-size: 20px;
@@ -94,7 +93,6 @@
   line-height: 120%;
   text-transform: uppercase;
   text-align: left;
-  padding-left: 16px;
   overflow: hidden;
 }
 
@@ -109,22 +107,22 @@
   line-height: 20px;
   letter-spacing: -0.14px;
   text-align: left;
-  padding-left: 16px;
+  margin-top: -8px;
 }
 
 .company-card__footer_content {
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding-left: 13px;
-  padding-bottom: 2px;
 }
 
 .company-card__badges_block {
-  height: 25px;
+  height: 30px;
   display: inline-block;
   overflow: hidden;
-  padding-bottom: 6px;
+  max-width: 272px;
+  margin-left: -5px;
 }
 
 .company-card__badge-text {
@@ -158,12 +156,6 @@
   object-fit: cover;
 }
 
-.company-card__star {
-  position: absolute;
-  left: 296px;
-  bottom: 13px;
-}
-
 @media only screen and (min-width: 1200px) {
 
   .company-card,