style(##2572): fix style for highlights video and add demo video

src/features/Common/Input/styled.tsx

@@ -216,6 +216,6 @@ export const LabelAfter = styled.span<TitleProps>`
 `
 
 export const LabelBefore = styled(LabelAfter)`
-  margin-left: -40px;
+  margin-left: -30px;
   padding-top: 5px;
 `

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -180,6 +180,10 @@ export const useHighlightsForm = () => {
   }
 
   const onChangeTeam = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) {
+      setTeams([])
+    }
+
     setFormState((state: FormType) => ({
       ...state,
       selectedTeam: null,

src/pages/HighlightsPage/components/FormHighlights/styled.tsx

@@ -97,11 +97,11 @@ export const ScForm = styled.form`
 
     .FormHighlights__input__sound {
       & input {
-        margin-left: 33px;
+        margin-left: 25px;
 
       ${isMobileDevice
     ? css`
-        margin-left: 20px;
+        margin-left: 10px;
       `
     : ''};
       }

src/pages/HighlightsPage/components/PriceInfo/styled.tsx

@@ -10,14 +10,14 @@ export const ScPriceInfo = styled.div`
   justify-content: center;
   align-content: center;
   color: #FFFFFF;
-  padding: 21px 21px 21px 40px;
+  padding: 10px 21px;
 
   font-weight: 600;
   font-size: 20px;
   line-height: 28px;
 
   > * {
-    margin: 15px 0;
+    margin: 10px 0;
 
     ${isMobileDevice
     ? css`

src/pages/HighlightsPage/components/VideoHighlight/index.tsx

@@ -1,10 +1,13 @@
 import { useRef } from 'react'
 
 import { VideoPlayer } from 'features/VideoPlayer'
+import { Icon } from 'features/Icon'
 
 import { readToken } from 'helpers'
 
-import { ScModal } from './styled'
+import { isProduction } from 'config/env'
+
+import { ScModal, ScCloseButton } from './styled'
 
 interface VideoPropsType {
   isOpenPopupVideo: boolean,
@@ -15,29 +18,30 @@ const urls = {
   production: 'https://instat-stream-production.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
   stage: 'https://instat-stream-staging.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
 }
+
 export const VideoHighlight = ({
   isOpenPopupVideo,
   setIsOpenPopupVideo,
 } :VideoPropsType) => {
   const videoRef = useRef<HTMLVideoElement>(null)
+
   return (
-    // eslint-disable-next-line
     <ScModal
       isOpen={isOpenPopupVideo}
       close={() => setIsOpenPopupVideo(false)}
       withCloseButton={false}
     >
       <VideoPlayer
-        width='100%'
+        src={`${isProduction ? urls.production : urls.stage}?access_token=${readToken()}`}
-        height='100%'
-        src={`${urls.stage}?access_token=${readToken()}`}
         ref={videoRef}
         playing={Boolean(true)}
         muted={false}
         isFullscreen={false}
         controls={Boolean(true)}
-        // crossOrigin='use-credentials'
       />
+      <ScCloseButton onClick={() => setIsOpenPopupVideo(false)}>
+        <Icon refIcon='Close' styles={{ marginTop: '3px' }} />
+      </ScCloseButton>
     </ScModal>
   )
 }

src/pages/HighlightsPage/components/VideoHighlight/styled.tsx

@@ -9,7 +9,8 @@ export const ScModal = styled(BaseModal)`
   background-color: rgba(0, 0, 0, 0.7);
 
   ${ModalWindow} {
-    background-color: #333333;
+    position: relative;
+    background-color: transparent;
     border-radius: 5px;
     display: flex;
     justify-content: center;
@@ -35,3 +36,17 @@ export const ScModal = styled(BaseModal)`
     : ''};
   }
 `
+
+export const ScCloseButton = styled.div`
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  right: -40px;
+  top: 0;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 21px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

src/pages/HighlightsPage/index.tsx

@@ -74,7 +74,7 @@ const HighlightsPage = () => {
         <ScButton>
           <T9n t='order_and_buy' />
           <ScPrice>
-            {` | $${price}`}
+            &nbsp;${price}
           </ScPrice>
         </ScButton>
       </ScButtonWrap>

src/pages/HighlightsPage/styled.tsx

@@ -57,7 +57,15 @@ export const ScButtonWrap = styled.div<{disabled: boolean}>`
 `
 
 export const ScPrice = styled.span`
-  font-weight: 400;
+  font-weight: 600;
-  font-size: 14px;
+  font-size: 20px;
+  line-height: 50px;
   margin: auto 0;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 22px;
+        line-height: 16px;
+      `
+    : ''};
 `