Ott 399 click outside (#125)

src/features/MatchCard/CardFinishedHover/index.tsx

@@ -1,8 +1,10 @@
+import type { MouseEvent } from 'react'
 import React from 'react'
 
 import { Link } from 'react-router-dom'
 
 import { CloseButton } from 'features/Common'
+import { OutsideClick } from 'features/OutsideClick'
 
 import {
   CardHoverInner,
@@ -19,16 +21,21 @@ type CardFinishedHoverProps = {
   sportName: string,
 }
 
+const stopProp = (e: MouseEvent<HTMLDivElement>) => {
+  e.stopPropagation()
+}
+
 export const CardFinishedHover = ({
   id,
   onClose,
   sportName,
 }: CardFinishedHoverProps) => (
-  <CardHoverWrapper>
+  <OutsideClick onClick={onClose}>
+    <CardHoverWrapper onClick={onClose}>
       <CardHoverInner>
         <CloseButton onClick={onClose} />
         <CardHoverTitle t='match_video' />
-      <Rows>
+        <Rows onClick={stopProp}>
           <Row>
             <Link to={`/${sportName}/matches/${id}`}>
               <MoreVideo t='full_game' />
@@ -48,4 +55,5 @@ export const CardFinishedHover = ({
         </Rows>
       </CardHoverInner>
     </CardHoverWrapper>
+  </OutsideClick>
 )

src/features/MatchCard/CardLiveHover/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
 import type { MouseEvent } from 'react'
+import React from 'react'
 
 import { Link } from 'react-router-dom'
 
 import { CloseButton } from 'features/Common'
+import { OutsideClick } from 'features/OutsideClick'
 
 import {
   CardHoverInner,
@@ -29,6 +30,7 @@ export const CardLiveHover = ({
   onClose,
   sportName,
 }: CardLiveHoverProps) => (
+  <OutsideClick onClick={onClose}>
     <CardHoverWrapper onClick={onClose}>
       <CardHoverInner>
         <CloseButton onClick={onClose} />
@@ -51,4 +53,5 @@ export const CardLiveHover = ({
         </Rows>
       </CardHoverInner>
     </CardHoverWrapper>
+  </OutsideClick>
 )

src/features/MatchCard/styled.tsx

@@ -10,6 +10,7 @@ export const CardWrapper = styled.li.attrs({
   position: relative;
   flex: 0 0 auto;
   min-width: ${MATCH_CARD_WIDTH}px;
+  height: 100%;
   padding-bottom: 18px;
   border-radius: 2px;
   border: 2px solid transparent;
@@ -158,12 +159,13 @@ export const MoreVideo = styled(T9n)`
 
 export const CardHoverWrapper = styled(CardWrapper)`
   padding: 16px 24px;
-  cursor: default;
+  cursor: pointer;
 `
 
 export const CardHoverInner = styled.div`
   position: relative;
   overflow: hidden;
+  width: fit-content;
 `
 
 export const CardHoverTitle = styled(T9n)`