diff --git a/public/images/landing_1.png b/public/images/landing_1.png index 157d5bfe..35dc65ea 100644 Binary files a/public/images/landing_1.png and b/public/images/landing_1.png differ diff --git a/public/images/landing_2.png b/public/images/landing_2.png index 00973b97..49964a31 100644 Binary files a/public/images/landing_2.png and b/public/images/landing_2.png differ diff --git a/public/images/landing_3.png b/public/images/landing_3.png index 749f9939..d99e594d 100644 Binary files a/public/images/landing_3.png and b/public/images/landing_3.png differ diff --git a/public/images/landing_7.png b/public/images/landing_7.png new file mode 100644 index 00000000..5bebd572 Binary files /dev/null and b/public/images/landing_7.png differ diff --git a/public/images/landing_mobile_1.png b/public/images/landing_mobile_1.png new file mode 100644 index 00000000..5fb233b7 Binary files /dev/null and b/public/images/landing_mobile_1.png differ diff --git a/public/images/landing_mobile_2.png b/public/images/landing_mobile_2.png new file mode 100644 index 00000000..1adf677f Binary files /dev/null and b/public/images/landing_mobile_2.png differ diff --git a/public/images/landing_mobile_3.png b/public/images/landing_mobile_3.png new file mode 100644 index 00000000..d5a52473 Binary files /dev/null and b/public/images/landing_mobile_3.png differ diff --git a/public/images/landing_mobile_7.png b/public/images/landing_mobile_7.png new file mode 100644 index 00000000..01f3c535 Binary files /dev/null and b/public/images/landing_mobile_7.png differ diff --git a/src/config/lexics/joinMatch.tsx b/src/config/lexics/joinMatch.tsx index 32143301..15d9b05c 100644 --- a/src/config/lexics/joinMatch.tsx +++ b/src/config/lexics/joinMatch.tsx @@ -1,5 +1,5 @@ export const joinMatchLexics = { - join_instat_tv: 15420, + join_insports_tv: 15420, join_now: 15422, promo_text: 15421, rfef_button: 19766, diff --git a/src/features/JoinMatchPage/index.tsx b/src/features/JoinMatchPage/index.tsx index b6621d03..fcacaee9 100644 --- a/src/features/JoinMatchPage/index.tsx +++ b/src/features/JoinMatchPage/index.tsx @@ -24,6 +24,7 @@ import { TeamsNameWrapper, MainInfoTitle, MainInfoButton, + MainInfoContainer, MainInfoText, EmptySpan, WatchLiveCircle, @@ -51,10 +52,11 @@ export const JoinMatchPage = () => { - - - - {matchInfo?.team1 + + + + + {matchInfo?.team1 && ( {matchDate} @@ -68,32 +70,33 @@ export const JoinMatchPage = () => { )} )} - - {matchInfo?.team1 ? ( - <> - - - - + + {matchInfo?.team1 ? ( + <> + + + + - ) : ()} + ) : ()} - - - - - - - - - - - - - + + + + + + + + + + + + + + ) diff --git a/src/features/JoinMatchPage/styled.tsx b/src/features/JoinMatchPage/styled.tsx index 348cb373..e60734a9 100644 --- a/src/features/JoinMatchPage/styled.tsx +++ b/src/features/JoinMatchPage/styled.tsx @@ -35,10 +35,21 @@ export const HeaderWrapper = styled.div` ` export const MainLogo = styled(Logo)` - height: 20px; + height: 26px; width: 80px; ` +export const MainInfoContainer = styled.div` + height: 100%; + + ${isMobileDevice + ? css` + margin-top: 50px; + overflow: scroll; + ` + : ''}; +` + export const BlockWrapper = styled.div` height: 100%; display: flex; @@ -54,7 +65,6 @@ export const BlockWrapper = styled.div` ${isMobileDevice ? css` padding: 5.4rem; - overflow: scroll; @media screen and (orientation: landscape){ padding-top: 20px; height: auto; @@ -64,7 +74,11 @@ export const BlockWrapper = styled.div` ` export const SportImgWrapper = styled.div` - background-image: url(/images/landing_${({ sportType }) => sportType}.png); + background-image: url(/images/landing_${({ sportType }) => ( + isMobileDevice + ? `mobile_${sportType}.png` + : `${sportType}.png` + )}); background-repeat: no-repeat; background-position: center; background-size: contain; @@ -84,6 +98,8 @@ export const SportImgWrapper = styled.div` ` export const MatchInfo = styled.div` + margin-bottom: 60px; + ${isMobileDevice ? css` width: 100%; @@ -163,7 +179,7 @@ export const MainInfoTitle = styled.div` font-size: 2rem; ${isMobileDevice ? css` - font-size: 3.8rem; + font-size: 32px; margin-bottom: 15px; ` : ''}; @@ -191,7 +207,7 @@ export const MainInfoText = styled.div` ${isMobileDevice ? css` font-size: 2.2rem; - margin: 15px 0 25px; + margin: 0 0 25px; ` : ''}; ` @@ -244,7 +260,7 @@ export const SportImgMobileDevice = styled(SportImgWrapper)` ${isMobileDevice ? css` display: block; - height: 42%; + height: 60%; width: 100%; margin-right: 0; @media screen and (orientation: landscape){