diff --git a/Makefile b/Makefile index ad33d2d0..d3f39658 100644 --- a/Makefile +++ b/Makefile @@ -16,6 +16,12 @@ preproduction-build: clean production-build: clean REACT_APP_ENV=production REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW npm run build +facr-build: clean + REACT_APP_ENV=staging REACT_APP_CLIENT=facr npm run build + +facr-production-build: clean + REACT_APP_ENV=production REACT_APP_CLIENT=facr npm run build + .PHONY: build prod: production-build @@ -24,6 +30,9 @@ prod: production-build preprod: preproduction-build rsync -zavP build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/ +facr-prod: facr-production-build + rsync -zavP build/ -e 'ssh -p 666' ott@instat.tv:/usr/local/www/ott/facr-wwwroot/ + stage: build rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/ @@ -42,6 +51,9 @@ d-stage: build e-stage: build rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/e-wwwroot/ +facr-stage: facr-build + rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/facrtv-wwwroot/ + test: npm test diff --git a/public/images/facr-logo.svg b/public/images/facr-logo.svg new file mode 100644 index 00000000..0fdcd14e --- /dev/null +++ b/public/images/facr-logo.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx new file mode 100644 index 00000000..f36b1ef9 --- /dev/null +++ b/src/config/clients/facr.tsx @@ -0,0 +1,28 @@ +import type { ClientConfig } from './types' +import { PROCEDURES } from '../procedures' + +const randomHash = () => ( + (Math.random() ** Math.random()) * 9999999999999999 +) + +const params = { _p_version: 'facrtv' } + +export const facr: ClientConfig = { + auth: { + clientId: 'facr-ott-web', + metaDataUrlParams: `?hash=${randomHash()}`, + }, + defaultLanguage: 'cs', + requests: { + [PROCEDURES.get_matches]: params, + [PROCEDURES.get_team_matches]: params, + [PROCEDURES.get_player_matches]: params, + [PROCEDURES.get_tournament_matches]: params, + }, + styles: { + background: '', + logo: 'facr-logo.svg', + logoHeight: 3.35, + logoWidth: 2.45, + }, +} diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx new file mode 100644 index 00000000..d497219f --- /dev/null +++ b/src/config/clients/index.tsx @@ -0,0 +1,13 @@ +import type { ClientConfig } from './types' + +import { instat } from './instat' +import { facr } from './facr' + +const currentClient = process.env.REACT_APP_CLIENT || 'instat' + +const clients = { + facr, + instat, +} + +export const client: ClientConfig = clients[currentClient] diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx new file mode 100644 index 00000000..08ae89ec --- /dev/null +++ b/src/config/clients/instat.tsx @@ -0,0 +1,13 @@ +import type { ClientConfig } from './types' + +export const instat: ClientConfig = { + auth: { + clientId: 'ott-web', + }, + styles: { + background: 'background-image: url(/images/Checker.png);', + logo: 'logo.svg', + logoHeight: 1.465, + logoWidth: 6.37, + }, +} diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx new file mode 100644 index 00000000..5f03d824 --- /dev/null +++ b/src/config/clients/types.tsx @@ -0,0 +1,19 @@ +import type { Languages } from 'config/languages' + +type ProcedureName = string +type RequestParameters = any + +export type ClientConfig = { + auth: { + clientId: string, + metaDataUrlParams?: string, + }, + defaultLanguage?: Languages, + requests?: Record, + styles: { + background?: string, + logo: string, + logoHeight?: number, + logoWidth?: number, + }, +} diff --git a/src/config/index.tsx b/src/config/index.tsx index d03692c7..28b7cb9f 100644 --- a/src/config/index.tsx +++ b/src/config/index.tsx @@ -8,3 +8,4 @@ export * from './history' export * from './devices' export * from './currencies' export * from './dashes' +export * from './tabsGroup' diff --git a/src/config/languages.tsx b/src/config/languages.tsx index 3f1e7e1c..8cbb20f1 100644 --- a/src/config/languages.tsx +++ b/src/config/languages.tsx @@ -9,6 +9,11 @@ export const langsList = [ locale: 'en', title: 'English', }, + { + className: 'cz', + locale: 'cs', + title: 'Čeština', + }, ] as const export type Languages = typeof langsList[number]['locale'] diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 77c78e71..5d68abe2 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -3,7 +3,9 @@ import { proceduresLexics } from './procedures' import { publicLexics } from './public' const matchPopupLexics = { + actions: 588, apply: 13491, + commentators: 15424, episode_duration: 13410, events: 1020, from_end_match: 15396, @@ -83,6 +85,7 @@ export const indexLexics = { kg: 652, kickoff_in: 13027, live: 13024, + loading: 3527, logout: 4306, match_status_finished: 12985, match_status_live: 12984, diff --git a/src/config/pages.tsx b/src/config/pages.tsx index affdcc95..cf088427 100644 --- a/src/config/pages.tsx +++ b/src/config/pages.tsx @@ -1,9 +1,7 @@ export const PAGES = { home: '/', - login: '/login', match: '/matches', player: '/players', - register: '/register', team: '/teams', tournament: '/tournaments', useraccount: '/useraccount', diff --git a/src/config/tabsGroup.tsx b/src/config/tabsGroup.tsx new file mode 100644 index 00000000..b94fc06c --- /dev/null +++ b/src/config/tabsGroup.tsx @@ -0,0 +1 @@ +export const MATCH_SIDE_PLAYLIST_WIDTH = [80, 85, 123] diff --git a/src/config/userAgent.tsx b/src/config/userAgent.tsx index 409a6b7d..0a120543 100644 --- a/src/config/userAgent.tsx +++ b/src/config/userAgent.tsx @@ -3,5 +3,3 @@ import { includes } from 'lodash' export const isIphone = includes(window.navigator.userAgent, 'iPhone') export const isMobileDevice = includes(window.navigator.userAgent, 'Android') || isIphone -// удалю когда закончу с адаптивом. -// || includes(window.navigator.userAgent, 'Linux') diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index 5a52831d..3966cdb3 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -1,15 +1,17 @@ import type { UserManagerSettings } from 'oidc-client' import { WebStorageStateStore } from 'oidc-client' +import { client } from 'config/clients' + export const AUTH_PROVIDER_URL = 'https://auth.instat.tv' export const getClientSettings = (): UserManagerSettings => ({ authority: AUTH_PROVIDER_URL, automaticSilentRenew: true, - client_id: 'ott-web', + client_id: client.auth.clientId, filterProtocolClaims: false, loadUserInfo: false, - metadataUrl: `${AUTH_PROVIDER_URL}/.well-known/openid-configuration`, + metadataUrl: `${AUTH_PROVIDER_URL}/.well-known/openid-configuration${client.auth.metaDataUrlParams || ''}`, redirect_uri: `${window.origin}/redirect`, response_mode: 'query', response_type: 'id_token token', diff --git a/src/features/Background/styled.tsx b/src/features/Background/styled.tsx index 429620c1..ba438f1b 100644 --- a/src/features/Background/styled.tsx +++ b/src/features/Background/styled.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' +import { client } from 'config/clients' + const Container = styled.div` width: 100%; min-height: 100vh; @@ -12,7 +14,7 @@ const Container = styled.div` ` export const ImageBackground = styled(Container)` - background-image: url(/images/Checker.png); + ${client.styles.background} background-size: 12px; ` diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index afaa9d65..2de0d004 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -49,6 +49,7 @@ export const LabelTitle = styled.p` padding-top: 2px; color: ${({ theme: { colors } }) => colors.secondary}; width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; + min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; @media ${devices.laptop} { ${({ isUserAccountPage }) => (!isUserAccountPage @@ -68,10 +69,12 @@ export const LabelTitle = styled.p` } ${isMobileDevice ? css` - display: block; - padding-left: 10px; - font-size: 12px; - min-width: 76px; + @media (max-width: 650px){ + display: block; + padding-left: 10px; + font-size: 12px; + width: auto; + } ` : ''}; ` diff --git a/src/features/Common/Tabs/index.tsx b/src/features/Common/Tabs/index.tsx index dc1f7bfa..e3fac088 100644 --- a/src/features/Common/Tabs/index.tsx +++ b/src/features/Common/Tabs/index.tsx @@ -6,6 +6,7 @@ type TabProps = { disabled?: boolean, selected?: boolean, upperCase?: boolean, + width?: number, } export const Tab = styled.button.attrs(({ selected }: TabProps) => ({ @@ -51,6 +52,16 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({ ` )} + ${({ width }) => ( + !isMobileDevice + ? css` + @media (orientation: landscape){ + width: ${width}px !important; + } + ` + : '' + )} + :not(:last-child) { border-right: 1px solid #FFFFFF; } diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index c2070e04..ec98512d 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -19,7 +19,7 @@ export const Header = () => ( - + diff --git a/src/features/ItemsList/styled.tsx b/src/features/ItemsList/styled.tsx index 3b3ff9e1..9a114234 100644 --- a/src/features/ItemsList/styled.tsx +++ b/src/features/ItemsList/styled.tsx @@ -15,6 +15,16 @@ export const Item = styled.li` :focus { background-color: #999; } + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + &:not(:last-child) { + margin-bottom: 10px; + } + } + ` + : ''}; ` export const StyledLink = styled(ProfileLink)` diff --git a/src/features/JoinMatchPage/styled.tsx b/src/features/JoinMatchPage/styled.tsx index 12388125..348cb373 100644 --- a/src/features/JoinMatchPage/styled.tsx +++ b/src/features/JoinMatchPage/styled.tsx @@ -69,7 +69,7 @@ export const SportImgWrapper = styled.div` background-position: center; background-size: contain; width: 512px; - height: 641px; + height: 80%; margin-right: 5%; ${isMobileDevice ? css` @@ -103,7 +103,7 @@ export const DateInfoWrapper = styled.div` ${isMobileDevice ? css` justify-content: space-between; - font-size: 14px; + font-size: 2.3rem; ` : ''}; ` @@ -153,17 +153,17 @@ export const TeamsNameWrapper = styled.div` ${isMobileDevice ? css` margin: 10px 0; - font-size: 16px; + font-size: 2.4rem; ` : ''}; ` export const MainInfoTitle = styled.div` font-weight: 600; - font-size: 46px; + font-size: 2rem; ${isMobileDevice ? css` - font-size: 32px; + font-size: 3.8rem; margin-bottom: 15px; ` : ''}; @@ -190,9 +190,8 @@ export const MainInfoText = styled.div` line-height: 150%; ${isMobileDevice ? css` - font-size: 15px; + font-size: 2.2rem; margin: 15px 0 25px; - width: 85%; ` : ''}; ` @@ -245,7 +244,7 @@ export const SportImgMobileDevice = styled(SportImgWrapper)` ${isMobileDevice ? css` display: block; - height: 53%; + height: 42%; width: 100%; margin-right: 0; @media screen and (orientation: landscape){ diff --git a/src/features/LexicsStore/hooks/useLang.tsx b/src/features/LexicsStore/hooks/useLang.tsx index e41132a7..7a415b11 100644 --- a/src/features/LexicsStore/hooks/useLang.tsx +++ b/src/features/LexicsStore/hooks/useLang.tsx @@ -3,11 +3,12 @@ import { useCallback } from 'react' import { useLocalStore } from 'hooks' import type { Languages } from 'config/languages' +import { client } from 'config/clients' import { isSupportedLang } from '../helpers/isSupportedLang' const LANG_KEY = 'lang' -const DEFAULT_LANG = 'en' +const DEFAULT_LANG = client.defaultLanguage || 'en' export const useLang = () => { const [lang, setLang] = useLocalStore({ diff --git a/src/features/Logo/index.tsx b/src/features/Logo/index.tsx index 72ff50c2..bf378e52 100644 --- a/src/features/Logo/index.tsx +++ b/src/features/Logo/index.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components/macro' -import { isMobileDevice } from '../../config/userAgent' + +import { isMobileDevice } from 'config/userAgent' +import { client } from 'config/clients' type Props = { height?: number, @@ -8,11 +10,11 @@ type Props = { export const Logo = styled.div` display: block; - width: ${({ width = 11.04 }) => width}rem; - height: ${({ height = 2.55 }) => height}rem; + width: ${client.styles.logoWidth}rem; + height: ${client.styles.logoHeight}rem; background-size: contain; background-repeat: no-repeat; - background-image: url(/images/logo.svg); + background-image: url(/images/${client.styles.logo}); ${isMobileDevice ? css` width: 144px; diff --git a/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx b/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx index f92a96a0..df75b71a 100644 --- a/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx +++ b/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components/macro' -import { devices } from 'config' +import { devices, MATCH_SIDE_PLAYLIST_WIDTH } from 'config' import { T9n } from 'features/T9n' import { Tab, TabsGroup } from 'features/Common' @@ -27,14 +27,14 @@ export const LiveMatchSidePlaylists = () => ( - + - - + + - - + + diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx index 24368bb5..2019ef87 100644 --- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' + import { ProfileLogo } from 'features/ProfileLogo' import { Tabs as TabsBase, Tab as TabBase } from '../PlayersPlaylists/styled' @@ -62,6 +64,16 @@ export const Avatar = styled(ProfileLogo)` transform: translateY(-50%); ` )} + + ${({ isHomeTeam }) => ( + isMobileDevice + ? css` + @media (max-width: 750px) and (orientation: portrait){ + ${isHomeTeam ? 'left: 20px;' : 'right: 20px;'} + } + ` + : '' + )} ` export const EventInfo = styled.div` @@ -140,4 +152,14 @@ export const Button = styled(ButtonBase)` ? css`padding-left: 60px;` : css`padding: 0 40px 0 60px;` )} + + ${({ isHomeTeam }) => ( + isMobileDevice + ? css` + @media (max-width: 750px) and (orientation: portrait){ + ${isHomeTeam ? 'padding-left: 90px;' : 'padding: 0 60px 0 90px;'} + } + ` + : '' + )} ` diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index be14a1d0..570e962b 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -1,6 +1,7 @@ import type { Events, MatchInfo } from 'requests' import type { PlaylistOption, Playlists } from 'features/MatchPage/types' +import { MATCH_SIDE_PLAYLIST_WIDTH } from 'config' import { Tab, TabsGroup } from 'features/Common' import { T9n } from 'features/T9n' @@ -47,23 +48,26 @@ export const MatchSidePlaylists = ({ onTabClick(Tabs.WATCH)} > onTabClick(Tabs.EVENTS)} > - + onTabClick(Tabs.LANGUAGES)} > - + diff --git a/src/features/MatchSwitches/styled.tsx b/src/features/MatchSwitches/styled.tsx index 9e467bf1..8346df18 100644 --- a/src/features/MatchSwitches/styled.tsx +++ b/src/features/MatchSwitches/styled.tsx @@ -58,17 +58,21 @@ export const Icon = styled.div` background-image: url(/images/${iconName}-off.svg); ` )}; + + @media ${devices.tablet} { + width: 2.7rem; + height: 1.5rem; + } + ${isMobileDevice ? css` - width: 51px; - height: 31px; + @media (max-width: 650px){ + width: 51px; + height: 31px; + } ` : ''} - - @media ${devices.tablet} { - width: 2.7rem; - height: 1.5rem; - }` + ` export const Wrapper = styled.div` margin-right: 2.45rem; diff --git a/src/features/Matches/index.tsx b/src/features/Matches/index.tsx index 2e16c321..eba472da 100644 --- a/src/features/Matches/index.tsx +++ b/src/features/Matches/index.tsx @@ -1,5 +1,6 @@ import { Fragment } from 'react' +import { T9n } from 'features/T9n' import { InfiniteScroll } from 'features/InfiniteScroll' import type { Props } from './hooks' @@ -49,7 +50,7 @@ export const Matches = (props: Props) => { as='grid' matches={broadcast} /> - {isFetching && Loading...} + {isFetching && ...} ) } diff --git a/src/features/ProfileCard/components/StarIcon/index.tsx b/src/features/ProfileCard/components/StarIcon/index.tsx index 83787305..18718a6c 100644 --- a/src/features/ProfileCard/components/StarIcon/index.tsx +++ b/src/features/ProfileCard/components/StarIcon/index.tsx @@ -4,6 +4,11 @@ const Svg = styled.svg` margin-right: 0.472rem; width: 0.95rem; height: 0.95rem; + + @media (max-width: 650px){ + width: 11px; + height: 11px; + } ` type StarProps = { diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx index 11926f1c..106ee86d 100644 --- a/src/features/ProfileCard/styled.tsx +++ b/src/features/ProfileCard/styled.tsx @@ -1,6 +1,7 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' import { ProfileTypes } from 'config' +import { isMobileDevice } from 'config/userAgent' import { ProfileLogo } from 'features/ProfileLogo' import { ProfileLink } from 'features/ProfileLink' @@ -12,6 +13,17 @@ export const Wrapper = styled.div` height: 100%; position: absolute; left: 40.3%; + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + left: 50%; + transform: translateX(-50%); + height: auto; + bottom: 0; + } + ` + : ''}; ` export const ProfileName = styled.h1` @@ -21,6 +33,17 @@ export const ProfileName = styled.h1` letter-spacing: 0.2px; color: #fff; margin-bottom: 0.12rem; + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + font-size: 14px; + line-height: 19px; + white-space: nowrap; + margin-bottom: 0; + } + ` + : ''}; ` export const Logo = styled(ProfileLogo)` @@ -33,6 +56,15 @@ export const Logo = styled(ProfileLogo)` padding: ${({ profileType }) => ( profileType === ProfileTypes.PLAYERS ? '0' : '0.19rem 0 0.75rem 0' )}; + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + width: 81px; + height: 81px; + } + ` + : ''}; ` export const Details = styled.div` @@ -66,12 +98,31 @@ export const FavoriteButton = styled.button` ? 'opacity: 1' : 'opacity: 0.5' )}; + +${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + width: 100px; + height: 22px; + font-size: 10px; + border-radius: 7px; + border: 0.7px solid #fff; + } + ` + : ''}; ` export const InfoItems = styled.div` display: flex; align-items: center; margin-bottom: 1.04rem; + ${isMobileDevice + ? css` + @media (orientation: landscape){ + margin-bottom: 5px; + } + ` + : ''}; ` export const InfoFlag = styled.img` @@ -80,12 +131,31 @@ export const InfoFlag = styled.img` margin-right: 0.3rem; object-fit: contain; object-position: center; + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + width: 12px; + height: 8px; + } + ` + : ''}; ` export const InfoName = styled(Name)` font-size: 0.9rem; line-height: 1.18rem; color: rgba(255, 255, 255, 0.7); + + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + font-size: 10px; + line-height: 19px; + white-space: nowrap; + } + ` + : ''}; ` export const StyledLink = styled(ProfileLink)` diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index b06e80e7..5734af89 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -36,7 +36,7 @@ export const ProfileHeader = ({ - + diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index c8ed1c73..49d16a4b 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -45,16 +45,13 @@ export const HeaderGroup = styled.div` ${isMobileDevice ? css` position: relative; - min-width: 50px; justify-content: flex-end; ` : ''}; ` export const HeaderLogo = styled(Logo)` - width: 6.37rem; - height: 1.465rem; - margin-top: 3px; + margin-top: 4px; ${isMobileDevice ? css` width: 85px; @@ -63,10 +60,11 @@ export const HeaderLogo = styled(Logo)` top: 5px; transform: translateX(-50%); position: absolute; - + @media screen and (orientation: landscape){ width: 97px; height: 23px; + margin-top: 0; } ` : ''} diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx index 08314ad3..c45d0bad 100644 --- a/src/features/Search/styled.tsx +++ b/src/features/Search/styled.tsx @@ -19,7 +19,6 @@ export const Wrapper = styled.div` max-width: 100%; z-index: 11; margin-left: 0; - left: -40px; ` : ''}; @@ -38,8 +37,9 @@ export const LoaderWrapper = styled.div` justify-content: center; ${isMobileDevice ? css` - max-width: 50vw; - left: 100%; + max-width: 95vw; + left: 0; + border-radius: 4px; @media screen and (orientation: landscape){ max-width: 368px; } @@ -62,8 +62,8 @@ const expandedStyles = css` max-width: 100%; border-radius: 4px; padding: 0 5px; - width: 50vw; - left: 100%; + width: 95vw; + left: 0; @media screen and (orientation: landscape){ max-width: 368px; } @@ -179,13 +179,13 @@ export const Results = styled.div` z-index: 2; ${isMobileDevice ? css` - top: 32px; - left: 100%; + top: 33px; + left: 0; padding: 20px; - width: 90vw; + width: 95vw; @media screen and (orientation: landscape){ max-width: 368px; - left: 100%; + left: 0; } ` : ''}; @@ -209,7 +209,7 @@ export const ClearButton = styled.button` ? css` width: 20px; margin-right: 5px; - right: -100%; + right: 0; ` : ''}; ` diff --git a/src/features/UserAccount/components/BankCard/styled.tsx b/src/features/UserAccount/components/BankCard/styled.tsx index 9fdde1f6..2cf2950d 100644 --- a/src/features/UserAccount/components/BankCard/styled.tsx +++ b/src/features/UserAccount/components/BankCard/styled.tsx @@ -65,6 +65,7 @@ export const CustomRadio = styled(Radio)` ${Label} { font-size: 14px; line-height: 24px; + white-space: nowrap; } } ` diff --git a/src/features/UserAccount/components/Header/index.tsx b/src/features/UserAccount/components/Header/index.tsx index 0f1399a1..dcb31b5d 100644 --- a/src/features/UserAccount/components/Header/index.tsx +++ b/src/features/UserAccount/components/Header/index.tsx @@ -13,10 +13,8 @@ const HeaderStyled = styled.header` display: flex; justify-content: space-between; align-items: center; - margin-bottom: 45px; - height: 50px; - padding-top: 8px; - + margin-bottom: 65px; + @media ${devices.tablet} { margin-bottom: 0; } @@ -38,7 +36,7 @@ export const Header = () => ( - + diff --git a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx index b8ffc453..240f56c5 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx @@ -18,18 +18,22 @@ export const Form = styled.div` ${InputWrapper} { height: 2.4rem; margin-top: 0.5rem; - ${isMobileDevice - ? css` - height: 40px; - margin-top: 8px; - padding-left: 0; - ` - : ''}; + @media ${devices.tablet} { height: 4.6rem; margin-top: 1rem; } + + ${isMobileDevice + ? css` + @media (max-width: 650px){ + height: 40px; + margin-top: 8px; + padding-left: 0; + } + ` + : ''}; } @media ${devices.tablet} { @@ -70,6 +74,12 @@ export const SectionTitle = styled.span` font-size: 1.4rem; line-height: 1.7rem; } + + @media ${devices.mobile}{ + font-size: 10px; + margin-bottom: 5px; + } + ` export const PasswordInput = styled(PasswordInputBase)` @@ -87,17 +97,20 @@ export const PasswordInput = styled(PasswordInputBase)` } } + @media ${devices.tablet} { + height: 4.6rem; + margin-bottom: 1rem; + } ${isMobileDevice ? css` - height: 40px; - padding-left: 10px; + @media (max-width: 650px){ + height: 40px; + padding-left: 10px; + } ` : ''}; - @media ${devices.tablet} { - height: 4.6rem; - margin-bottom: 1rem; - } + ` export const PrivacyPolicyLink = styled.a` diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx index cafcc9a6..da752007 100644 --- a/src/features/UserAccount/styled.tsx +++ b/src/features/UserAccount/styled.tsx @@ -19,7 +19,7 @@ export const SolidButton = styled(ButtonSolid)` border-radius: 5px; display: flex; align-items: center; - + @media ${devices.tablet} { height: 5rem; font-size: 2.0rem; @@ -29,10 +29,12 @@ export const SolidButton = styled(ButtonSolid)` ${isMobileDevice ? css` - height: 35px; - display: flex; - justify-content: center; - width: 100%; + @media (max-width: 650px){ + height: 35px; + display: flex; + justify-content: center; + width: 100%; + } @media (orientation: landscape){ width: auto; } @@ -105,7 +107,7 @@ export const UserAccountWrapper = styled.div` height: 100vh; display: flex; flex-direction: column; - padding: 30px 30px 60px 35px; + padding: 32px 30px 60px 36px; ${isMobileDevice ? css` padding: 15px 15px 0; @@ -156,7 +158,7 @@ export const Navigations = styled.nav` display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.4); - + @media ${devices.tablet} { height: auto; width: 100%; @@ -175,7 +177,7 @@ export const Navigations = styled.nav` height: 100%; } ` - : ''}; + : ''}; ` type StyledLinkProps = { @@ -200,9 +202,9 @@ export const StyledLink = styled(NavLink).attrs( : css` color: rgba(255, 255, 255, 0.4); `)} - + @media ${devices.tablet} { - font-size: 2.8rem; + font-size: 2.8rem; line-height: 5.3rem; } diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 26d556d4..c329807a 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -3,6 +3,7 @@ declare namespace NodeJS { export interface ProcessEnv { + REACT_APP_CLIENT: 'instat' | 'facr', REACT_APP_ENV: 'production' | 'preproduction' | 'staging', } } diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index e11847fc..3b55dabd 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -1,6 +1,8 @@ import { PROCEDURES, SportTypes } from 'config' -import { MatchStatuses } from 'features/HeaderFilters' +import { client } from 'config/clients' + +import type { MatchStatuses } from 'features/HeaderFilters' import type { MatchesBySection } from './types' import { requestMatches } from './request' @@ -37,6 +39,7 @@ export const getHomeMatches = async ({ _p_stream_status: matchStatus, _p_sub_only: availableMatchesOnly, _p_tournament_id: tournamentId, + ...client.requests?.[proc], }, proc, }, diff --git a/src/requests/getMatches/getPlayerMatches.tsx b/src/requests/getMatches/getPlayerMatches.tsx index 908751b5..a4755baf 100644 --- a/src/requests/getMatches/getPlayerMatches.tsx +++ b/src/requests/getMatches/getPlayerMatches.tsx @@ -1,5 +1,7 @@ import { PROCEDURES, SportTypes } from 'config' +import { client } from 'config/clients' + import { addSportType } from 'features/Matches/helpers/addSportType' import type { MatchesBySection } from './types' @@ -31,6 +33,7 @@ export const getPlayerMatches = async ({ _p_player_id: playerId, _p_sport: sportType, _p_sub_only: availableMatchesOnly, + ...client.requests?.[proc], }, proc, }, diff --git a/src/requests/getMatches/getTeamMatches.tsx b/src/requests/getMatches/getTeamMatches.tsx index f30176e6..23463f59 100644 --- a/src/requests/getMatches/getTeamMatches.tsx +++ b/src/requests/getMatches/getTeamMatches.tsx @@ -1,5 +1,7 @@ import { PROCEDURES, SportTypes } from 'config' +import { client } from 'config/clients' + import { addSportType } from 'features/Matches/helpers/addSportType' import type { MatchesBySection } from './types' @@ -31,6 +33,7 @@ export const getTeamMatches = async ({ _p_sport: sportType, _p_sub_only: availableMatchesOnly, _p_team_id: teamId, + ...client.requests?.[proc], }, proc, }, diff --git a/src/requests/getMatches/getTournamentMatches.tsx b/src/requests/getMatches/getTournamentMatches.tsx index 50b01d09..73cae9cc 100644 --- a/src/requests/getMatches/getTournamentMatches.tsx +++ b/src/requests/getMatches/getTournamentMatches.tsx @@ -1,5 +1,7 @@ import { PROCEDURES, SportTypes } from 'config' +import { client } from 'config/clients' + import { addSportType } from 'features/Matches/helpers/addSportType' import type { MatchesBySection } from './types' @@ -31,6 +33,7 @@ export const getTournamentMatches = async ({ _p_sport: sportType, _p_sub_only: availableMatchesOnly, _p_tournament_id: tournamentId, + ...client.requests?.[proc], }, proc, },