From 2fdb9e86e6361d86a0249433f35a396c89d1d190 Mon Sep 17 00:00:00 2001
From: Jennie McGibney <54327023+jenniemc@users.noreply.github.com>
Date: Thu, 2 May 2024 09:17:22 -0700
Subject: [PATCH] Replace font awesome icons on appt list and request list page
 (#29504)

* Replace font awesome icons on list page

* change icon default assignment
---
 .../AppointmentColumnLayout.jsx               | 47 ++++++++++++-------
 .../RequestAppointmentLayout.jsx              | 40 +++++++++-------
 .../vaos/appointment-list/redux/selectors.js  | 11 ++---
 .../vaos/appointment-list/sass/styles.scss    |  8 +++-
 4 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/applications/vaos/appointment-list/components/AppointmentsPage/AppointmentColumnLayout.jsx b/src/applications/vaos/appointment-list/components/AppointmentsPage/AppointmentColumnLayout.jsx
index b386c5154e00..27d3f67adac6 100644
--- a/src/applications/vaos/appointment-list/components/AppointmentsPage/AppointmentColumnLayout.jsx
+++ b/src/applications/vaos/appointment-list/components/AppointmentsPage/AppointmentColumnLayout.jsx
@@ -153,11 +153,16 @@ export default function AppointmentColumnLayout({
               <AppointmentColumn
                 padding="0"
                 size="2"
-                className="vads-u-font-weight--bold vaos-appts__display--table vaos-appts__text--truncate"
+                className="vads-u-font-weight--bold vaos-appts__display--table"
                 canceled={isCanceled}
                 aria-label={typeOfCareAriaLabel}
               >
-                <span className={classNames('vaos-appts__display--table-cell')}>
+                <span
+                  className={classNames(
+                    'vaos-appts__display--table-cell',
+                    'vaos-appts__text--truncate',
+                  )}
+                >
                   {appointmentLocality}
                 </span>
               </AppointmentColumn>
@@ -165,25 +170,31 @@ export default function AppointmentColumnLayout({
               <AppointmentColumn
                 padding="0"
                 size="3"
-                className="vaos-appts__display--table vaos-appts__text--truncate"
+                className="vaos-appts__display--table"
                 canceled={isCanceled}
                 aria-label={modalityAriaLabel}
               >
-                <span className="vaos-appts__display--table-cell">
-                  <i
-                    aria-hidden="true"
-                    className={classNames(
-                      'fas',
-                      'vads-u-margin-right--1',
-                      'vads-u-color--gray',
-                      modalityIcon,
-                      {
-                        'vaos-appts__text--line-through':
-                          isCanceled && !isCommunityCare,
-                      },
-                    )}
-                  />
-                  {`${modalityText}`}
+                <span className="vaos-appts__display--table-cell vads-u-display--flex vads-u-align-items--top">
+                  {!isCommunityCare && (
+                    <span
+                      className={classNames(
+                        'vads-u-color--gray',
+                        'icon-width',
+                        {
+                          'vaos-appts__text--line-through': isCanceled,
+                        },
+                      )}
+                    >
+                      <va-icon
+                        icon={modalityIcon}
+                        size="3"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  )}
+                  <span className="vaos-appts__text--truncate">
+                    {modalityText}
+                  </span>
                 </span>
               </AppointmentColumn>
             </AppointmentRow>
diff --git a/src/applications/vaos/appointment-list/components/AppointmentsPage/RequestAppointmentLayout.jsx b/src/applications/vaos/appointment-list/components/AppointmentsPage/RequestAppointmentLayout.jsx
index 0732ad5086f4..4b4f948d7804 100644
--- a/src/applications/vaos/appointment-list/components/AppointmentsPage/RequestAppointmentLayout.jsx
+++ b/src/applications/vaos/appointment-list/components/AppointmentsPage/RequestAppointmentLayout.jsx
@@ -56,7 +56,7 @@ export default function RequestAppointmentLayout({ appointment }) {
           >
             <AppointmentRow className="vaos-appts__column-gap--3 small-screen:vads-u-flex-direction--row">
               <AppointmentColumn size="1" className="vads-u-flex--4">
-                <AppointmentRow className="vaos-appts__column-gap--3 vaos-appts__display--table vaos-appts__text--truncate xsmall-screen:vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
+                <AppointmentRow className="vaos-appts__column-gap--3 vaos-appts__display--table xsmall-screen:vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
                   <AppointmentColumn
                     padding="0"
                     size="1"
@@ -71,30 +71,34 @@ export default function RequestAppointmentLayout({ appointment }) {
                     className="vaos-appts__display--table"
                     canceled={isCanceled}
                   >
-                    <span className="vaos-appts__display--table-cell">
-                      <i
-                        className={classNames(
-                          'fas',
-                          'vads-u-margin-right--1',
-                          'vads-u-color--gray',
-                          modalityIcon,
-                          {
-                            'vaos-appts__text--line-through':
-                              isCanceled && !isCommunityCare,
-                          },
-                        )}
-                      />
-
-                      {`${modality}`}
+                    <span className="vaos-appts__display--table-cell vads-u-display--flex vads-u-align-items--top">
+                      {!isCommunityCare && (
+                        <span
+                          className={classNames(
+                            'vads-u-color--gray',
+                            'icon-width',
+                            {
+                              'vaos-appts__text--line-through': isCanceled,
+                            },
+                          )}
+                        >
+                          <va-icon
+                            icon={modalityIcon}
+                            size="3"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      )}
+                      {modality}
                     </span>
                   </AppointmentColumn>
                   <AppointmentColumn
                     padding="0"
                     size="1"
-                    className="vaos-appts__display--table vaos-appts__text--truncate"
+                    className="vaos-appts__display--table"
                     canceled={isCanceled}
                   >
-                    <span className="vaos-appts__display--table-cell">
+                    <span className="vaos-appts__display--table-cell vaos-appts__text--truncate">
                       {appointmentLocality}
                     </span>
                   </AppointmentColumn>
diff --git a/src/applications/vaos/appointment-list/redux/selectors.js b/src/applications/vaos/appointment-list/redux/selectors.js
index 818c061319f0..9cf76c4baf78 100644
--- a/src/applications/vaos/appointment-list/redux/selectors.js
+++ b/src/applications/vaos/appointment-list/redux/selectors.js
@@ -703,7 +703,6 @@ export function selectModalityAriaText(appointment) {
 }
 
 export function selectModalityIcon(appointment) {
-  const isCommunityCare = selectIsCommunityCare(appointment);
   const isInPerson = selectIsInPerson(appointment);
   const isPhone = selectIsPhone(appointment);
   const isVideoAtlas = selectIsAtlasVideo(appointment);
@@ -711,13 +710,11 @@ export function selectModalityIcon(appointment) {
   const isVideoHome = selectIsHomeVideo(appointment);
   const isVideoVADevice = selectIsGFEVideo(appointment);
 
-  let icon = 'fa-blank';
-
-  if (isInPerson || isVideoAtlas || isVideoClinic) icon = 'fa-building';
-  if (isVideoHome || isVideoVADevice) icon = 'fa-video';
+  let icon = '';
 
-  if (isPhone) icon = 'fa-phone-alt';
-  if (isCommunityCare) icon = 'fa-blank';
+  if (isInPerson || isVideoAtlas || isVideoClinic) icon = 'location_city';
+  if (isVideoHome || isVideoVADevice) icon = 'videocam';
+  if (isPhone) icon = 'phone';
 
   return icon;
 }
diff --git a/src/applications/vaos/appointment-list/sass/styles.scss b/src/applications/vaos/appointment-list/sass/styles.scss
index ababe2839f39..f4b1f506797b 100644
--- a/src/applications/vaos/appointment-list/sass/styles.scss
+++ b/src/applications/vaos/appointment-list/sass/styles.scss
@@ -231,7 +231,7 @@ div[id^="vaos-appts__detail-"] {
   display: table-cell;
 }
 
-.vaos-appts__text--truncate > * {
+.vaos-appts__text--truncate {
   @include media($small-screen) {
     white-space: nowrap;
     overflow: hidden !important;
@@ -245,7 +245,7 @@ div[id^="vaos-appts__detail-"] {
 .vaos-appts__text--line-through::after {
   content: "";
   display: block;
-  width: 25px;
+  width: 100%;
   height: 1px;
   background-color: var(--vads-color-base);
   position: absolute;
@@ -300,3 +300,7 @@ div[id^="vaos-appts__detail-"] {
     outline-offset: 2px;
   }
 }
+
+.icon-width {
+  min-width: 32px !important;
+}
\ No newline at end of file