Minor design tweaks for ungrouped history view (#938)

- Change hover highlight from darkened background to darkened box shadow, to prevent JSON inputs from blending in
- Add a black box shadow for the "animate on enter" behaviour
- Remove darkened background from "animate on enter"
- Rename animateBackgroundOnEnter to animateOnEnter

Author: adhityamamallan

src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.styles.ts

@@ -38,7 +38,7 @@ export const styled = {
   ),
 };
 
-export const overrides = (animateBackgroundOnEnter?: boolean) => ({
+export const overrides = (animateOnEnter?: boolean) => ({
   panel: {
     PanelContainer: {
       style: ({ $theme }: { $theme: Theme }): StyleObject => ({
@@ -48,16 +48,16 @@ export const overrides = (animateBackgroundOnEnter?: boolean) => ({
         marginTop: $theme.sizing.scale0,
         marginBottom: $theme.sizing.scale0,
         ':hover': {
-          backgroundColor: $theme.colors.backgroundSecondary,
+          boxShadow: `0px 0px 0px 2px ${$theme.colors.borderTransparent}`,
         },
-        ...(animateBackgroundOnEnter && {
+        ...(animateOnEnter && {
           animationDuration: '2s',
           animationName: {
             from: {
-              backgroundColor: $theme.colors.backgroundTertiary,
+              boxShadow: `0px 0px 0px 2px ${$theme.colors.primary}`,
             },
             to: {
-              backgroundColor: $theme.colors.backgroundPrimary,
+              boxShadow: `0px 0px 0px 0px rgba(0, 0, 0, 0)`,
             },
           },
         }),

src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.tsx

@@ -26,11 +26,11 @@ export default function WorkflowHistoryUngroupedEvent({
   decodedPageUrlParams,
   isExpanded,
   toggleIsExpanded,
-  animateBackgroundOnEnter,
+  animateOnEnter,
   onReset,
 }: Props) {
   const retries = getRetriesForHistoryEvent(eventInfo.event);
-  const overrides = getOverrides(animateBackgroundOnEnter);
+  const overrides = getOverrides(animateOnEnter);
 
   return (
     <Panel

src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.types.ts

@@ -32,6 +32,6 @@ export type Props = {
   toggleIsExpanded: () => void;
 
   // UI behavior
-  animateBackgroundOnEnter?: boolean;
+  animateOnEnter?: boolean;
   onReset?: () => void;
 };

src/views/workflow-history/workflow-history-ungrouped-table/workflow-history-ungrouped-table.tsx

@@ -43,7 +43,7 @@ export default function WorkflowHistoryUngroupedTable({
             decodedPageUrlParams={decodedPageUrlParams}
             isExpanded={getIsEventExpanded(eventInfo.id)}
             toggleIsExpanded={() => toggleIsEventExpanded(eventInfo.id)}
-            animateBackgroundOnEnter={eventInfo.id === selectedEventId}
+            animateOnEnter={eventInfo.id === selectedEventId}
             {...(eventInfo.canReset
               ? { onReset: () => onResetToEventId(eventInfo.id) }
               : {})}