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,33 +21,39 @@ type CardFinishedHoverProps = {
   sportName: string,
 }
 
+const stopProp = (e: MouseEvent<HTMLDivElement>) => {
+  e.stopPropagation()
+}
+
 export const CardFinishedHover = ({
   id,
   onClose,
   sportName,
 }: CardFinishedHoverProps) => (
-  <CardHoverWrapper>
-    <CardHoverInner>
-      <CloseButton onClick={onClose} />
-      <CardHoverTitle t='match_video' />
-      <Rows>
-        <Row>
-          <Link to={`/${sportName}/matches/${id}`}>
-            <MoreVideo t='full_game' />
-          </Link>
-          <MoreVideo t='game_time' />
-        </Row>
-
-        <Row>
-          <MoreVideo t='highlights' />
-          <MoreVideo t='goals' />
-          <MoreVideo t='interview' />
-        </Row>
-
-        <Row>
-          <MoreVideo t='players_video' />
-        </Row>
-      </Rows>
-    </CardHoverInner>
-  </CardHoverWrapper>
+  <OutsideClick onClick={onClose}>
+    <CardHoverWrapper onClick={onClose}>
+      <CardHoverInner>
+        <CloseButton onClick={onClose} />
+        <CardHoverTitle t='match_video' />
+        <Rows onClick={stopProp}>
+          <Row>
+            <Link to={`/${sportName}/matches/${id}`}>
+              <MoreVideo t='full_game' />
+            </Link>
+            <MoreVideo t='game_time' />
+          </Row>
+
+          <Row>
+            <MoreVideo t='highlights' />
+            <MoreVideo t='goals' />
+            <MoreVideo t='interview' />
+          </Row>
+
+          <Row>
+            <MoreVideo t='players_video' />
+          </Row>
+        </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,26 +30,28 @@ export const CardLiveHover = ({
   onClose,
   sportName,
 }: CardLiveHoverProps) => (
-  <CardHoverWrapper onClick={onClose}>
-    <CardHoverInner>
-      <CloseButton onClick={onClose} />
-      <CardHoverTitle t='match_video' />
-      <Rows onClick={stopProp}>
-        <Row>
-          <Link to={`/${sportName}/matches/${id}`}>
-            <MoreVideo t='watch_now' />
-          </Link>
-          <Link to={`/${sportName}/matches/${id}`}>
-            <MoreVideo t='watch_from_beginning' />
-          </Link>
-        </Row>
+  <OutsideClick onClick={onClose}>
+    <CardHoverWrapper onClick={onClose}>
+      <CardHoverInner>
+        <CloseButton onClick={onClose} />
+        <CardHoverTitle t='match_video' />
+        <Rows onClick={stopProp}>
+          <Row>
+            <Link to={`/${sportName}/matches/${id}`}>
+              <MoreVideo t='watch_now' />
+            </Link>
+            <Link to={`/${sportName}/matches/${id}`}>
+              <MoreVideo t='watch_from_beginning' />
+            </Link>
+          </Row>
 
-        <Row>
-          <Link to={`/${sportName}/matches/${id}`}>
-            <MoreVideo t='watch_from_last_pause' />
-          </Link>
-        </Row>
-      </Rows>
-    </CardHoverInner>
-  </CardHoverWrapper>
+          <Row>
+            <Link to={`/${sportName}/matches/${id}`}>
+              <MoreVideo t='watch_from_last_pause' />
+            </Link>
+          </Row>
+        </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)`