fix(tp): fix career partner banner UI on tablet and mobile (#993)

* Fix careeer partner banner UI * Fix active tab UI on tablet and mobile * Display active tab bar for jobseekers
ReDI-School · Nov 4, 2024 · 31265d5 · 31265d5
1 parent 4566825
commit 31265d5
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 46 deletions.
diff --git a/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.scss b/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.scss
@@ -1,20 +1,43 @@
 @import '~bulma/sass/utilities/_all';
+@import '_variables.scss';
 
 .tp-main-nav-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   height: 80px;
+  position: relative;
 
+  /* Active bar for desktop layout */
   &__active-bar {
+    position: absolute;
+    right: 0;
+    top: 0;
     height: 100%;
     width: 5px;
-    background-color: #2cb0c7;
-    @include touch() {
+    background-color: $redi-blue-dark;
+
+    @media screen and (max-width: 1191px) {
       display: none;
     }
   }
 
+  /* Active bar for tablet and mobile layouts */
+  &__active-bar--horizontal {
+    display: none;
+
+    @media screen and (max-width: 1191px) {
+      display: block;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background-color: $redi-blue-dark;
+    }
+  }
+
   &__icon {
     width: 40px;
     height: 40px;

diff --git a/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.tsx b/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.tsx
@@ -54,15 +54,17 @@ export function TpMainNavItem({
       )}
       onClick={onClick}
     >
-      <div></div>
+      {isActive && (
+        <>
+          <div className="tp-main-nav-item__active-bar"></div>
+          <div className="tp-main-nav-item__active-bar--horizontal"></div>
+        </>
+      )}
       <TpMainNavItemIcon
         page={page}
         isDisabled={isDisabled}
         pageName={pageName}
       />
-      <div
-        className={classnames({ 'tp-main-nav-item__active-bar': isActive })}
-      ></div>
     </Link>
   )
 }

diff --git a/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.scss b/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.scss
@@ -1,60 +1,72 @@
+@import '~bulma/sass/utilities/_all';
+
 .career-partner-banner {
   display: flex;
   flex-direction: column;
-
   justify-content: space-between;
-
   margin: 48px 0;
   padding: 24px;
-
-  @media (max-width: 768px) {
-    margin: 32px 0;
-    padding: 12px;
-  }
-
   border-radius: 8px;
   background: var(--grey-ultra-light, #f5f5f5);
+  @include mobile() {
+    margin: 32px auto;
+    padding: 12px;
+    max-width: 550px;
+  }
 
   &-top {
     display: flex;
     justify-content: space-between;
-
+    align-items: center;
     padding-bottom: 16px;
     border-bottom: 1px solid black;
 
-    > * {
+    &__separator {
+      width: 1px;
+      height: 2rem;
+      border-left: 1px solid black;
+      margin: 0 24px;
+      @include mobile() {
+        margin: 0 16px;
+      }
+    }
+
+    &__badge {
       display: flex;
-      justify-content: center;
       align-items: center;
-
-      &:not(:last-child) {
-        border-right: 1px solid black;
+      padding-left: 24px;
+      @include mobile() {
+        padding-left: 0;
       }
 
-      .career-partner-badge-icon {
+      &-icon {
         margin-right: 16px;
-
-        @media (max-width: 768px) {
-          margin-right: 12px;
+        @include mobile() {
+          margin-right: 8px;
         }
       }
-    }
 
-    .career-partner-since,
-    .career-partner-jobs-posted {
-      padding: 0 48px;
-      @media (max-width: 768px) {
-        padding: 0 24px;
+      &-text {
+        word-break: unset;
       }
+    }
 
+    &__since,
+    &__jobs-posted {
       text-transform: uppercase;
       font-feature-settings: 'clig' off, 'liga' off;
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 20px; /* 200% */
       letter-spacing: 2px;
       text-align: center;
+
+      &:last-child {
+        padding-right: 24px;
+        @include mobile() {
+          padding-right: 16px;
+        }
+      }
     }
   }
 
@@ -64,7 +76,7 @@
     font-size: 16px;
     line-height: 25px; /* 156.25% */
 
-    @media (max-width: 768px) {
+    @include mobile() {
       font-size: 13.5px;
       line-height: 20px; /* 148.148% */
     }

diff --git a/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.tsx b/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.tsx
@@ -14,19 +14,32 @@ const CareerPartnerBanner: React.FC<CareerPartnerBannerProps> = ({
   return (
     <div className="career-partner-banner">
       <div className="career-partner-banner-top">
-        <div>
+        <div className="career-partner-banner-top__badge">
           <Icon
             icon="careerPartnerBadge"
             size="large"
-            className="career-partner-badge-icon"
+            className="career-partner-banner-top__badge-icon"
           />
-          <Heading size="smaller">Career Partner</Heading>
+          <Heading
+            size="smaller"
+            className="career-partner-banner-top__badge-text"
+          >
+            Career
+            <br />
+            Partner
+          </Heading>
         </div>
-        <span className="career-partner-since">
-          Since {new Date(partnerSince).getFullYear()}
+        <span className="career-partner-banner-top__separator" />
+        <span className="career-partner-banner-top__since">
+          Since
+          <br />
+          {new Date(partnerSince).getFullYear()}
         </span>
-        <span className="career-partner-jobs-posted">
-          {jobsPosted} Jobs Posted
+        <span className="career-partner-banner-top__separator" />
+        <span className="career-partner-banner-top__jobs-posted">
+          {jobsPosted} Jobs
+          <br />
+          Posted
         </span>
       </div>
       <div className="career-partner-banner-bottom">

diff --git a/apps/redi-talent-pool/src/components/templates/LoggedIn.tsx b/apps/redi-talent-pool/src/components/templates/LoggedIn.tsx
@@ -67,12 +67,24 @@ const LoggedIn = ({ children, hideNavigation }: Props) => {
           {hideNavigation ? null : (
             <>
               <div className="tp-side-menu">
-                <TpMainNavItem
-                  page="profile-page"
-                  pageName="My profile"
-                  to="/app/me"
-                  isActive={location.pathname === '/app/me'}
-                />
+                {tpJobseekerDirectoryEntry ? (
+                  <TpMainNavItem
+                    page="profile-page"
+                    pageName="My profile"
+                    to={`/app/jobseeker-profile/${tpJobseekerDirectoryEntry.id}`}
+                    isActive={
+                      location.pathname ===
+                      `/app/jobseeker-profile/${tpJobseekerDirectoryEntry.id}`
+                    }
+                  />
+                ) : (
+                  <TpMainNavItem
+                    page="profile-page"
+                    pageName="My profile"
+                    to="/app/me"
+                    isActive={location.pathname === '/app/me'}
+                  />
+                )}
                 {companyProfile?.state ===
                   CompanyTalentPoolState.ProfileApproved ||
                 tpJobseekerDirectoryEntry?.state ===