From 04004068495a233f5cc6e0d5dede6f9c46ddb298 Mon Sep 17 00:00:00 2001 From: katamatata Date: Wed, 30 Oct 2024 10:10:36 +0100 Subject: [PATCH 1/3] Fix careeer partner banner UI --- .../organisms/CareerPartnerBanner.scss | 64 +++++++++++-------- .../organisms/CareerPartnerBanner.tsx | 27 ++++++-- 2 files changed, 58 insertions(+), 33 deletions(-) diff --git a/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.scss b/apps/redi-talent-pool/src/components/organisms/CareerPartnerBanner.scss index de2f38e10..abc925db1 100644 --- 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 index f5c4a38e5..b008e9bb3 100644 --- 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 = ({ return (
-
+
- Career Partner + + Career +
+ Partner +
- - Since {new Date(partnerSince).getFullYear()} + + + Since +
+ {new Date(partnerSince).getFullYear()} - - {jobsPosted} Jobs Posted + + + {jobsPosted} Jobs +
+ Posted
From 793a6caf3508e9433ec924797cefec0a78a33fd5 Mon Sep 17 00:00:00 2001 From: katamatata Date: Wed, 30 Oct 2024 10:13:05 +0100 Subject: [PATCH 2/3] Fix active tab UI on tablet and mobile --- .../components/molecules/TpMainNavItem.scss | 29 +++++++++++++++++-- .../components/molecules/TpMainNavItem.tsx | 10 ++++--- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.scss b/apps/redi-talent-pool/src/components/molecules/TpMainNavItem.scss index 0e43079f4..fade019c3 100644 --- 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 index e2324c591..6a226c771 100644 --- 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} > -
+ {isActive && ( + <> +
+
+ + )} -
) } From 0ceee02f21a0d1c7ddb58cc7c2ad0913b397f350 Mon Sep 17 00:00:00 2001 From: katamatata Date: Wed, 30 Oct 2024 10:14:20 +0100 Subject: [PATCH 3/3] Display active tab bar for jobseekers --- .../src/components/templates/LoggedIn.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/apps/redi-talent-pool/src/components/templates/LoggedIn.tsx b/apps/redi-talent-pool/src/components/templates/LoggedIn.tsx index 0e41e52ed..9b3d7cbad 100644 --- 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 : ( <>
- + {tpJobseekerDirectoryEntry ? ( + + ) : ( + + )} {companyProfile?.state === CompanyTalentPoolState.ProfileApproved || tpJobseekerDirectoryEntry?.state ===