diff --git a/src/pages/about-us/_OurLeadership.tsx b/src/pages/about-us/_OurLeadership.tsx index f355166ef49..bd2ff41d4b1 100644 --- a/src/pages/about-us/_OurLeadership.tsx +++ b/src/pages/about-us/_OurLeadership.tsx @@ -1,4 +1,4 @@ -import React, { FocusEvent } from 'react' +import React, { MouseEventHandler } from 'react' import styled from 'styled-components' import { graphql, useStaticQuery } from 'gatsby' import { ImageDataLike } from 'gatsby-plugin-image' @@ -108,10 +108,14 @@ const ModalFlex = styled(Flex)` top: 98px; } ` +type MouseEvent = React.MouseEventHandler & + ((event: MouseEventHandler) => void) type StyledImageWrapperPropsType = ImageWrapperProps & { - onMouseOver: (event: FocusEvent) => void - onMouseLeave: (event: FocusEvent) => void + onMouseOver: MouseEvent + onMouseLeave: MouseEvent tabindex: string + width: string + height: string } const StyledImageWrapper = styled(ImageWrapper)` display: flex; @@ -141,9 +145,7 @@ const StyledImageWrapper = styled(ImageWrapper)` @media ${device.mobileL} { width: 88px; height: 108px; - } - - + } } ` @@ -187,13 +189,10 @@ const Modal = ({ name, position, link }: ModalPropsType) => { > {position} - {/* Tom doesn't have linkedin page so we don't use LocalizedLink */} - {link ? ( + {link && ( - ) : ( - )} ) @@ -211,10 +210,10 @@ type LeaderProps = { } const Leader = ({ leader }: LeaderProps) => { const [isPopupShown, setIsPopupShown] = React.useState(false) - const showModal = (event: FocusEvent) => { + const showModal: MouseEvent = () => { setIsPopupShown(true) } - const dontShowModal = (event: FocusEvent) => { + const dontShowModal: MouseEvent = () => { setIsPopupShown(false) } return (