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

* Update text color on the chip for better accessibility

* Rename className chip to card-tag to avoid specificity conflicts

* Remove redundant styles

* Replace bulma Tag component with our custom Chip component

* Update icons color

* Styling

* Styling

Author: katamatata

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/assets/images/ellipsis.svg

@@ -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;
     }
   }
 }