diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 31ef9756..2d236c6e 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -216,6 +216,6 @@ export const LabelAfter = styled.span` ` export const LabelBefore = styled(LabelAfter)` - margin-left: -40px; + margin-left: -30px; padding-top: 5px; ` diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index 343d08b1..e7dcbf13 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx @@ -180,6 +180,10 @@ export const useHighlightsForm = () => { } const onChangeTeam = (e: ChangeEvent) => { + if (!e.target.value) { + setTeams([]) + } + setFormState((state: FormType) => ({ ...state, selectedTeam: null, diff --git a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx index 997e1390..32933b03 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx +++ b/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; ` : ''}; } diff --git a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx index c966bf29..53a6bb29 100644 --- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx +++ b/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` diff --git a/src/pages/HighlightsPage/components/VideoHighlight/index.tsx b/src/pages/HighlightsPage/components/VideoHighlight/index.tsx index e9263266..47fa0b76 100644 --- a/src/pages/HighlightsPage/components/VideoHighlight/index.tsx +++ b/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(null) + return ( - // eslint-disable-next-line setIsOpenPopupVideo(false)} withCloseButton={false} > + setIsOpenPopupVideo(false)}> + + ) } diff --git a/src/pages/HighlightsPage/components/VideoHighlight/styled.tsx b/src/pages/HighlightsPage/components/VideoHighlight/styled.tsx index 9400a596..70f27da5 100644 --- a/src/pages/HighlightsPage/components/VideoHighlight/styled.tsx +++ b/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; +` diff --git a/src/pages/HighlightsPage/index.tsx b/src/pages/HighlightsPage/index.tsx index e81f25bd..15e9e949 100644 --- a/src/pages/HighlightsPage/index.tsx +++ b/src/pages/HighlightsPage/index.tsx @@ -74,7 +74,7 @@ const HighlightsPage = () => { - {` | $${price}`} +  ${price} diff --git a/src/pages/HighlightsPage/styled.tsx b/src/pages/HighlightsPage/styled.tsx index 63bf12f3..0fe6211f 100644 --- a/src/pages/HighlightsPage/styled.tsx +++ b/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-size: 14px; + font-weight: 600; + font-size: 20px; + line-height: 50px; margin: auto 0; + + ${isMobileDevice + ? css` + font-size: 22px; + line-height: 16px; + ` + : ''}; `