chore: highlight effect in the header button instead

frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx

@@ -21,15 +21,12 @@ type EventTimelineTemporaryState = {
     highlighted: boolean;
 };
 
-type OpenOptions = {
-    highlight?: boolean;
-};
-
 type EventTimelineStateSetters = {
-    setOpen: (open: boolean, options?: OpenOptions) => void;
+    setOpen: (open: boolean) => void;
     setTimeSpan: (timeSpan: TimeSpanOption) => void;
     setEnvironment: (environment: IEnvironment) => void;
     setSignalsSuggestionSeen: (seen: boolean) => void;
+    setHighlighted: (highlighted: boolean) => void;
 };
 
 export interface IEventTimelineContext
@@ -112,27 +109,24 @@ export const EventTimelineProvider = ({
         setState((prevState) => ({ ...prevState, [key]: value }));
     };
 
-    const setOpen = (
-        open: boolean,
-        { highlight = false }: OpenOptions = {},
-    ) => {
-        setField('open', open);
-        setHighlighted(highlight);
-        if (highlight) {
-            setTimeout(() => setHighlighted(false), 2000);
+    const onSetHighlighted = (highlighted: boolean) => {
+        setHighlighted(highlighted);
+        if (highlighted) {
+            setTimeout(() => setHighlighted(false), 3000);
         }
     };
 
     const contextValue: IEventTimelineContext = {
         ...state,
         highlighted,
-        setOpen,
+        setOpen: (open: boolean) => setField('open', open),
         setTimeSpan: (timeSpan: TimeSpanOption) =>
             setField('timeSpan', timeSpan),
         setEnvironment: (environment: IEnvironment) =>
             setField('environment', environment),
         setSignalsSuggestionSeen: (seen: boolean) =>
             setField('signalsSuggestionSeen', seen),
+        setHighlighted: onSetHighlighted,
     };
 
     return (

frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx

@@ -1,40 +1,17 @@
-import { alpha, Box, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
 import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useEffect, useState } from 'react';
 
-const StyledEventTimelineSlider = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
+const StyledEventTimelineSlider = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     height: '120px',
     overflow: 'hidden',
     boxShadow: theme.boxShadows.popup,
     borderLeft: `1px solid ${theme.palette.background.application}`,
-    animation: highlighted ? 'highlight 1s infinite' : 'none',
-    willChange: 'transform, box-shadow, opacity',
-    '@keyframes highlight': {
-        '0%': {
-            zIndex: theme.zIndex.tooltip,
-            transform: 'scale(1)',
-            opacity: 1,
-        },
-        '50%': {
-            zIndex: theme.zIndex.tooltip,
-            'box-shadow': `0 0 30px ${alpha(theme.palette.primary.main, 0.8)}`,
-            transform: 'scale(1.02)',
-            opacity: 0.8,
-        },
-        '100%': {
-            zIndex: theme.zIndex.tooltip,
-            'box-shadow': theme.boxShadows.popup,
-            transform: 'scale(1)',
-            opacity: 1,
-        },
-    },
 }));
 
 const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
@@ -43,7 +20,7 @@ const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
 
 export const MainLayoutEventTimeline = () => {
     const { isOss } = useUiConfig();
-    const { open: showTimeline, highlighted } = useEventTimelineContext();
+    const { open: showTimeline } = useEventTimelineContext();
     const eventTimelineEnabled = useUiFlag('eventTimeline') && !isOss();
     const [isInitialLoad, setIsInitialLoad] = useState(true);
 
@@ -55,7 +32,6 @@ export const MainLayoutEventTimeline = () => {
 
     return (
         <StyledEventTimelineSlider
-            highlighted={highlighted}
             sx={{
                 transition: isInitialLoad
                     ? 'none'

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -107,7 +107,7 @@ export const NewInUnleash = ({
     const signalsEnabled = useUiFlag('signals');
     const eventTimelineEnabled = useUiFlag('eventTimeline');
 
-    const { setOpen: showTimeline } = useEventTimelineContext();
+    const { setHighlighted } = useEventTimelineContext();
 
     const items: NewItem[] = [
         {
@@ -152,7 +152,7 @@ export const NewInUnleash = ({
             icon: <StyledLinearScaleIcon />,
             preview: <EventTimelinePreview />,
             onCheckItOut: () => {
-                showTimeline(true, { highlight: true });
+                setHighlighted(true);
                 window.scrollTo({
                     top: 0,
                     behavior: 'smooth',

frontend/src/component/menu/Header/Header.tsx

@@ -33,9 +33,7 @@ import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { CommandBar } from 'component/commandBar/CommandBar';
-import LinearScaleIcon from '@mui/icons-material/LinearScale';
-import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
-import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { HeaderEventTimelineButton } from './HeaderEventTimelineButton';
 
 const HeaderComponent = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -109,10 +107,6 @@ const Header = () => {
     const [openDrawer, setOpenDrawer] = useState(false);
     const toggleDrawer = () => setOpenDrawer((prev) => !prev);
     const celebatoryUnleash = useUiFlag('celebrateUnleash');
-    const eventTimeline = useUiFlag('eventTimeline') && !isOss();
-    const { open: showTimeline, setOpen: setShowTimeline } =
-        useEventTimelineContext();
-    const { trackEvent } = usePlausibleTracker();
 
     const routes = getRoutes();
     const adminRoutes = useAdminRoutes();
@@ -187,33 +181,7 @@ const Header = () => {
                 <StyledNav>
                     <StyledUserContainer>
                         <CommandBar />
-                        <ConditionallyRender
-                            condition={eventTimeline}
-                            show={
-                                <Tooltip
-                                    title={
-                                        showTimeline
-                                            ? 'Hide timeline'
-                                            : 'Show timeline'
-                                    }
-                                    arrow
-                                >
-                                    <StyledIconButton
-                                        onClick={() => {
-                                            trackEvent(
-                                                showTimeline
-                                                    ? 'event-timeline-close'
-                                                    : 'event-timeline-open',
-                                            );
-                                            setShowTimeline(!showTimeline);
-                                        }}
-                                        size='large'
-                                    >
-                                        <LinearScaleIcon />
-                                    </StyledIconButton>
-                                </Tooltip>
-                            }
-                        />
+                        <HeaderEventTimelineButton />
                         <InviteLinkButton />
                         <Tooltip
                             title={

frontend/src/component/menu/Header/HeaderEventTimelineButton.tsx

@@ -0,0 +1,64 @@
+import { alpha, IconButton, styled, Tooltip } from '@mui/material';
+import LinearScaleIcon from '@mui/icons-material/LinearScale';
+import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { useUiFlag } from 'hooks/useUiFlag';
+
+const StyledHeaderEventTimelineButton = styled(IconButton, {
+    shouldForwardProp: (prop) => prop !== 'highlighted',
+})<{
+    component?: 'a' | 'button';
+    href?: string;
+    target?: string;
+    highlighted?: boolean;
+}>(({ theme, highlighted }) => ({
+    animation: highlighted ? 'pulse 1.5s infinite linear' : 'none',
+    zIndex: highlighted ? theme.zIndex.tooltip : 'auto',
+    '@keyframes pulse': {
+        '0%': {
+            boxShadow: `0 0 0 0px ${alpha(theme.palette.primary.main, 0.5)}`,
+            transform: 'scale(1)',
+        },
+        '50%': {
+            boxShadow: `0 0 0 15px ${alpha(theme.palette.primary.main, 0.2)}`,
+            transform: 'scale(1.1)',
+        },
+        '100%': {
+            boxShadow: `0 0 0 30px ${alpha(theme.palette.primary.main, 0)}`,
+            transform: 'scale(1)',
+        },
+    },
+}));
+
+export const HeaderEventTimelineButton = () => {
+    const { trackEvent } = usePlausibleTracker();
+    const { isOss } = useUiConfig();
+    const eventTimeline = useUiFlag('eventTimeline') && !isOss();
+    const {
+        open: showTimeline,
+        setOpen: setShowTimeline,
+        highlighted,
+    } = useEventTimelineContext();
+
+    if (!eventTimeline) return null;
+
+    return (
+        <Tooltip title={showTimeline ? 'Hide timeline' : 'Show timeline'} arrow>
+            <StyledHeaderEventTimelineButton
+                highlighted={highlighted}
+                onClick={() => {
+                    trackEvent(
+                        showTimeline
+                            ? 'event-timeline-close'
+                            : 'event-timeline-open',
+                    );
+                    setShowTimeline(!showTimeline);
+                }}
+                size='large'
+            >
+                <LinearScaleIcon />
+            </StyledHeaderEventTimelineButton>
+        </Tooltip>
+    );
+};

frontend/src/component/menu/Header/OldHeader.tsx

@@ -36,8 +36,7 @@ import { Notifications } from 'component/common/Notifications/Notifications';
 import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
 import { useUiFlag } from 'hooks/useUiFlag';
-import LinearScaleIcon from '@mui/icons-material/LinearScale';
-import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
+import { HeaderEventTimelineButton } from './HeaderEventTimelineButton';
 
 const HeaderComponent = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -148,9 +147,6 @@ const OldHeader = () => {
     const onAdminClose = () => setAdminRef(null);
     const onConfigureClose = () => setConfigRef(null);
     const celebatoryUnleash = useUiFlag('celebrateUnleash');
-    const eventTimeline = useUiFlag('eventTimeline') && !isOss();
-    const { open: showTimeline, setOpen: setShowTimeline } =
-        useEventTimelineContext();
 
     const routes = getRoutes();
     const adminRoutes = useAdminRoutes();
@@ -250,28 +246,7 @@ const OldHeader = () => {
                         />
                     </StyledLinks>
                     <StyledUserContainer>
-                        <ConditionallyRender
-                            condition={eventTimeline}
-                            show={
-                                <Tooltip
-                                    title={
-                                        showTimeline
-                                            ? 'Hide timeline'
-                                            : 'Show timeline'
-                                    }
-                                    arrow
-                                >
-                                    <StyledIconButton
-                                        onClick={() =>
-                                            setShowTimeline(!showTimeline)
-                                        }
-                                        size='large'
-                                    >
-                                        <LinearScaleIcon />
-                                    </StyledIconButton>
-                                </Tooltip>
-                            }
-                        />
+                        <HeaderEventTimelineButton />
                         <InviteLinkButton />
                         <Tooltip
                             title={