fix(con/tp): DS updates on multiple components

apps/redi-connect/src/pages/app/applications/DesktopView.scss

@@ -22,8 +22,12 @@
 
     &--active {
       @extend .tabs-menu__item;
-      color: $red;
-      border-bottom: 3px solid $red;
+      border-bottom: 3px solid $redi-blue-dark;
+    }
+
+    &:hover {
+      color: $black;
+      border-bottom: 3px solid $redi-blue-dark;
     }
   }
 }

apps/redi-connect/src/pages/app/applications/application-card/ApplicationCard.scss

@@ -56,14 +56,15 @@
     }
 
     &-name {
+      margin-left: -2px;
       font-size: 12px;
-      color: $grey;
+      color: $grey-dark;
     }
   }
 
   &__date {
     font-size: 12px;
-    color: $grey;
+    color: $grey-dark;
   }
 
   &-details {

apps/redi-connect/src/pages/app/applications/application-card/MobileApplicationCard.scss

@@ -25,13 +25,13 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    gap: 12px;
+    gap: 10px;
     justify-content: space-between;
   }
 
   &__avatar {
-    width: 3rem;
-    height: 3rem;
+    width: 2.7rem;
+    height: 2.7rem;
     z-index: 0;
   }
 
@@ -58,14 +58,15 @@
     }
 
     &-name {
+      margin-left: -3px;
       font-size: 12px;
-      color: $grey;
+      color: $grey-dark;
     }
   }
 
   &__date {
     font-size: 12px;
-    color: $grey;
+    color: $grey-dark;
   }
 
   &-details {

apps/redi-talent-pool/src/components/organisms/JobListingCard.scss

@@ -70,45 +70,20 @@
     text-overflow: ellipsis;
     color: var(--black, #000);
     font-family: Avenir LT Std;
-    font-size: 16px;
+    font-size: 20px;
     font-style: normal;
     font-weight: 700;
-
-    @include mobile() {
-      color: var(--black, #000);
-
-      /* Desktop/Body Text Small SemiBold */
-      font-family: Avenir;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 800;
-      line-height: 150%; /* 21px */
-    }
+    margin-bottom: 12px;
   }
 
   &__company-name {
-    color: var(--grey, #a0a0a0);
+    color: var(--grey-dark, #5d5d5d);
     font-family: Avenir;
     font-size: 14px;
     font-style: normal;
     font-weight: 800;
     line-height: 150%;
-    margin-top: 2px;
     margin-bottom: 8px;
-
-    @include mobile() {
-      color: var(--grey, #a0a0a0);
-
-      /* Desktop/Body Text Micro SemiBold */
-      font-family: Avenir;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 800;
-      line-height: 150%; /* 18px */
-
-      margin-top: 4px;
-      margin-bottom: 6px;
-    }
   }
 
   &__lastColumn {
@@ -149,9 +124,8 @@
   &__ellipsis {
     &__icon {
       &:hover {
-        background-color: $redi-orange-extra-light;
+        background-color: $redi-blue-light;
         border-radius: 50%;
-        transform: scale(1.2);
       }
     }
   }
@@ -160,7 +134,7 @@
     margin-top: auto;
     font-size: 12px;
     font-weight: 400;
-    color: var(--grey, #a0a0a0);
+    color: var(--grey-dark, #5d5d5d);
     white-space: nowrap;
     height: 16px;
 

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx

@@ -6,6 +6,7 @@ import {
 import {
   Button,
   Caption,
+  Chip,
   FormSelect,
 } from '@talent-connect/shared-atomic-design-components'
 import {
@@ -14,7 +15,7 @@ import {
 } from '@talent-connect/talent-pool/config'
 import { useFormik } from 'formik'
 import { useEffect, useMemo, useState } from 'react'
-import { Element, Tag } from 'react-bulma-components'
+import { Element } from 'react-bulma-components'
 import { useQueryClient } from 'react-query'
 import * as Yup from 'yup'
 import { useIsBusy } from '../../../hooks/useIsBusy'
@@ -53,11 +54,11 @@ export function EditableOverview({ profile, disableEditing }: Props) {
         ) : (
           <>
             <Caption>Desired positions</Caption>
-            <Tag.Group>
+            <div className="tw-flex tw-items-center tw-flex-row tw-gap-2 tw-flex-wrap">
               {profile?.desiredPositions?.map((pos) => (
-                <Tag key={pos}>{desiredPositionsIdToLabelMap[pos]}</Tag>
+                <Chip key={pos} chip={desiredPositionsIdToLabelMap[pos]} />
               ))}
-            </Tag.Group>
+            </div>
           </>
         )
       }

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx

@@ -7,6 +7,7 @@ import {
 import {
   Button,
   Caption,
+  Chip,
   FaqItem,
   FormSelect,
   FormTextArea,
@@ -17,7 +18,7 @@ import {
 } from '@talent-connect/talent-pool/config'
 import { useFormik } from 'formik'
 import { useEffect, useMemo, useState } from 'react'
-import { Content, Element, Tag } from 'react-bulma-components'
+import { Content, Element } from 'react-bulma-components'
 import { useQueryClient } from 'react-query'
 import * as Yup from 'yup'
 import { useIsBusy } from '../../../hooks/useIsBusy'
@@ -60,11 +61,11 @@ export function EditableSummary({ profile, disableEditing }: Props) {
           </Content>
           <Caption>Top skills</Caption>
           {profile?.topSkills?.length > 0 ? (
-            <Tag.Group>
+            <div className="tw-flex tw-items-center tw-flex-row tw-gap-2 tw-flex-wrap">
               {profile?.topSkills?.map((skill) => (
-                <Tag key={skill}>{topSkillsIdToLabelMap[skill]}</Tag>
+                <Chip key={skill} chip={topSkillsIdToLabelMap[skill]} />
               ))}
-            </Tag.Group>
+            </div>
           ) : (
             <EmptySectionPlaceholder
               height="slim"

libs/shared-atomic-design-components/src/lib/atoms/CardLocation.scss

@@ -6,12 +6,7 @@
     &-container {
       display: flex;
       flex-direction: row;
-      margin-bottom: 33px;
-      height: 16px;
-
-      @include mobile {
-        margin-bottom: 16px;
-      }
+      margin-bottom: 24px;
     }
 
     &-icon {
@@ -20,22 +15,14 @@
     }
 
     &-text {
-      color: var(--grey, #a0a0a0);
+      color: var(--grey-dark, #5d5d5d);
       /* Desktop/Body Text Micro Regular */
       font-family: Avenir;
       font-size: 12px;
       font-style: normal;
       font-weight: 350;
       line-height: normal;
-
-      @include mobile() {
-        color: var(--grey, #a0a0a0);
-        font-family: Avenir;
-        font-size: 11px;
-        font-style: normal;
-        font-weight: 350;
-        line-height: normal;
-      }
+      margin-left: -2px;
     }
   }
 }

libs/shared-atomic-design-components/src/lib/atoms/CardTags.scss

@@ -1,7 +1,7 @@
 @import '_variables.scss';
 @import '~bulma/sass/utilities/_all';
 
-.chip {
+.card-tag {
   padding: 2px 12px;
   text-wrap: nowrap;
   border-radius: 8px;
@@ -28,7 +28,7 @@
     gap: 8px;
     flex-wrap: wrap;
 
-    .chip {
+    .card-tag {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -47,7 +47,7 @@
     }
 
     @include mobile() {
-      .chip {
+      .card-tag {
         border-radius: 6px;
         font-size: 12px;
       }

libs/shared-atomic-design-components/src/lib/atoms/CardTags.tsx

@@ -24,7 +24,7 @@ const SinglelineTags = ({ items }: { items: CardTagsProps['items'] }) => {
       const chipWidths = items.map((chip) => {
         const chipSpan = document.createElement('span')
         chipSpan.style.visibility = 'hidden'
-        chipSpan.classList.add('chip')
+        chipSpan.classList.add('card-tag')
         chipSpan.innerHTML = chip
 
         parentRefDesktop.current?.appendChild(chipSpan)
@@ -67,12 +67,12 @@ const SinglelineTags = ({ items }: { items: CardTagsProps['items'] }) => {
   return (
     <div className="wrapper__desktop" ref={parentRefDesktop}>
       {visibleChips.map((chip) => (
-        <p key={chip} className="chip">
+        <p key={chip} className="card-tag">
           {chip}
         </p>
       ))}
       {remainingChips.length > 0 && (
-        <p className="chip">+{remainingChips.length}</p>
+        <p className="card-tag">+{remainingChips.length}</p>
       )}
     </div>
   )
@@ -87,7 +87,7 @@ const MultilineTags = ({ items }: { items: CardTagsProps['items'] }) => {
     <div className="wrapper__profile">
       {shortItemsList.map((chip, i) => {
         const currentTag = (
-          <p key={chip} className="chip">
+          <p key={chip} className="card-tag">
             {chip}
           </p>
         )
@@ -96,7 +96,7 @@ const MultilineTags = ({ items }: { items: CardTagsProps['items'] }) => {
         return hasAdditionalTags && isLastVisibleTag ? (
           <div className="wrapper__profile last_row" key={chip}>
             {currentTag}
-            <p key={`restNr-${i}`} className="chip plus">
+            <p key={`restNr-${i}`} className="card-tag plus">
               {'+' + additionalTagsCount}
             </p>
           </div>

libs/shared-atomic-design-components/src/lib/atoms/Chip.scss

@@ -15,18 +15,13 @@
 
   &--pending {
     background-color: $redi-orange-extra-light;
-    color: $redi-orange;
   }
 
   &--neutral {
     background-color: $grey-extra-light;
-    color: $grey-dark;
   }
 
   @include mobile() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     border-radius: 6px;
     font-size: 12px;
   }