made changes to add greyed link colour - #6E6E73

Author: victranfield

src/app/components/MostRead/Canonical/Item/index.styles.ts

@@ -48,6 +48,17 @@ const styles = {
       padding: 0,
     }),
 
+  visitedItem: () =>
+    css({
+      '&:visited': {
+        color: '#6E6E73 !important',
+      },
+      // current article"
+      '&.is-current': {
+        color: '#6E6E73 !important',
+      },
+    }),
+
   grid: ({ spacings }: Theme) =>
     css({
       position: 'relative',

src/app/components/MostRead/Canonical/Item/index.tsx

@@ -50,6 +50,9 @@ export const MostReadLink = ({
   const positionIndex =
     typeof position === 'string' ? parseInt(position, 10) : position;
 
+  const isCurrentPage =
+    typeof window !== 'undefined' && href.includes(window.location.pathname);
+
   const eventTrackingDataExtended = {
     ...eventTrackingData,
     itemTracker: {
@@ -67,7 +70,12 @@ export const MostReadLink = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     <div css={getItemCss({ dir, size }) as any[]} dir={dir}>
       <a
-        css={[styles.link, size === 'default' && styles.defaultLink]}
+        css={[
+          styles.link,
+          size === 'default' && styles.defaultLink,
+          styles.visitedItem(),
+          isCurrentPage && styles.visitedItem(),
+        ]}
         href={href}
         {...clickTrackerHandler}
       >