diff --git a/src/components/PoweredByInstatIcon/index.tsx b/src/components/PoweredByInstatIcon/index.tsx new file mode 100644 index 00000000..91683e95 --- /dev/null +++ b/src/components/PoweredByInstatIcon/index.tsx @@ -0,0 +1,5 @@ +import { Icon } from 'features/Icon' + +export const PoweredByInstatIcon = () => ( + +) diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index ad53a0d7..732d7697 100644 --- a/src/config/clients/facr.tsx +++ b/src/config/clients/facr.tsx @@ -46,7 +46,16 @@ export const facr: ClientConfig = { matchLogoHeight: 2.6, matchLogoTopMargin: 0.9, matchLogoWidth: 3.4, + mobileHeaderLogo: css` + width: 48px; + height: 37px; + `, + userAccountLogo: css` + width: 6.22rem; + height: 4.76rem; + `, }, termsLink: '/terms-and-conditions?client_id=facr-ott-web', title: 'FACR.TV - The home of Czech football streaming', + userAccountLinksDisabled: true, } diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx index 61ee0f17..2f6ee2c1 100644 --- a/src/config/clients/instat.tsx +++ b/src/config/clients/instat.tsx @@ -1,3 +1,4 @@ +import { css } from 'styled-components/macro' import { ClientConfig, ClientIds, @@ -23,6 +24,18 @@ export const instat: ClientConfig = { logoWidth: 6.37, matchLogoHeight: 1.465, matchLogoWidth: 6.37, + mobileHeaderLogo: css` + width: 84px; + height: 20px; + @media screen and (orientation: landscape){ + width: 92px; + height: 22px; + } + `, + userAccountLogo: css` + width: 6.37rem; + height: 1.465rem; + `, }, termsLink: '/terms-and-conditions', title: 'InStat TV - The Home of Sports Streaming', diff --git a/src/config/clients/lff.tsx b/src/config/clients/lff.tsx index 486b1d05..4f26f3e2 100644 --- a/src/config/clients/lff.tsx +++ b/src/config/clients/lff.tsx @@ -1,3 +1,4 @@ +import { css } from 'styled-components/macro' import { ClientConfig, ClientIds, @@ -16,6 +17,9 @@ export const lff: ClientConfig = { showSearch: true, styles: { background: 'background-image: url(/images/Checker.png);', + homePageHeader: css` + background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000; + `, logo: 'lff_auth_logo.svg', logoHeight: 6, logoLeft: 1.2, @@ -23,6 +27,16 @@ export const lff: ClientConfig = { logoWidth: 6, matchLogoHeight: 2.5, matchLogoWidth: 2.5, + mobileHeaderLogo: css` + width: 42px; + height: 42px; + `, + userAccountLogo: css` + width: 80px; + height: 80px; + `, }, + termsLink: '/terms-and-conditions?client_id=lff-ott-web', title: 'InStat TV - The Home of Sports Streaming', + userAccountLinksDisabled: true, } diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index 6fdc0968..f8ac949c 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -41,7 +41,10 @@ export type ClientConfig = { matchLogoHeight?: number, matchLogoTopMargin?: number, matchLogoWidth?: number, + mobileHeaderLogo?: StyledCss, + userAccountLogo?: StyledCss, }, termsLink: string, title: string, + userAccountLinksDisabled?: boolean, } diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx index e4e541e8..1dd50f79 100644 --- a/src/features/AddCardForm/styled.tsx +++ b/src/features/AddCardForm/styled.tsx @@ -47,8 +47,8 @@ export const Input = styled.input` :-webkit-autofill:focus, :-webkit-autofill:active { box-shadow: 0 0 0 30px #3f3f3f inset; - caret-color: ${({ theme: { colors } }) => colors.text100}; - -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text100}; + caret-color: ${({ theme: { colors } }) => colors.white}; + -webkit-text-fill-color: ${({ theme: { colors } }) => colors.white}; } ${isMobileDevice ? css` @@ -79,7 +79,7 @@ export const SectionTitle = styled.span` font-size: 12px; line-height: 18px; text-transform: uppercase; - color: ${({ theme }) => theme.colors.text50}; + color: ${({ theme }) => theme.colors.white50}; margin-bottom: 8px; ${isMobileDevice ? css` diff --git a/src/features/ArrowLoader/index.tsx b/src/features/ArrowLoader/index.tsx index fbbb7b6b..0c141fcb 100644 --- a/src/features/ArrowLoader/index.tsx +++ b/src/features/ArrowLoader/index.tsx @@ -5,11 +5,13 @@ import { Arrows } from './Icon' export const ArrowLoader = ({ backgroundColor, className, + color, disabled, width, }: ArrowLoaderProps) => ( ` - ${client.styles.loader} border-color: transparent; width: ${({ width = 'auto' }) => width}; - height: 2.4rem; + ${({ color, theme: { colors } }) => ( + css` + color: ${color || colors.loader}; + ` + )} + height: 100%; border-radius: 5px; display: flex; align-items: center; diff --git a/src/features/ArrowLoader/types.tsx b/src/features/ArrowLoader/types.tsx index 73e07b44..bb91e3fb 100644 --- a/src/features/ArrowLoader/types.tsx +++ b/src/features/ArrowLoader/types.tsx @@ -1,6 +1,7 @@ export type ArrowLoaderProps = { backgroundColor?: string, className?: string, + color?: string, disabled?: boolean, width?:string, } diff --git a/src/features/AuthServiceApp/components/App/index.tsx b/src/features/AuthServiceApp/components/App/index.tsx index 81481e25..cf83ccbd 100644 --- a/src/features/AuthServiceApp/components/App/index.tsx +++ b/src/features/AuthServiceApp/components/App/index.tsx @@ -22,6 +22,10 @@ const ChangePassword = lazy(() => import('../ChangePassword')) const Main = styled.main` width: 100%; overflow-y: auto; + + ::-webkit-scrollbar { + display: none; + } ${isMobileDevice ? css` diff --git a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx index 9e84aaa6..1123334b 100644 --- a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx @@ -62,7 +62,7 @@ export const ScApplyButton = styled(ApplyButton)` ` export const ScLink = styled.a` -color: ${({ theme }) => theme.colors.text100}; -text-decoration: underline; -margin-left: 6px; + color: ${({ theme }) => theme.colors.white}; + text-decoration: underline; + margin-left: 6px; ` diff --git a/src/features/AuthServiceApp/components/Input/styled.tsx b/src/features/AuthServiceApp/components/Input/styled.tsx index f3149195..5b059450 100644 --- a/src/features/AuthServiceApp/components/Input/styled.tsx +++ b/src/features/AuthServiceApp/components/Input/styled.tsx @@ -9,7 +9,7 @@ export const Wrapper = styled.div` background-color: ${({ theme }) => theme.colors.inputs}; width: 100%; height: 45px; - :not(:last-child) { + :not(:last-of-type) { border-bottom: 0.5px solid ${({ theme }) => theme.colors.black40}; } ${client.styles.input} @@ -59,14 +59,14 @@ export const InputStyled = styled.input` padding: 0 16px; flex-grow: 1; height: 100%; - color: ${({ theme }) => theme.colors.text100}; + color: ${({ theme }) => theme.colors.white}; font-size: 16px; letter-spacing: 0.1px; ::placeholder { font-weight: normal; width: 100%; - color: ${({ theme }) => theme.colors.text50}; + color: ${({ theme }) => theme.colors.white50}; font-style: normal; letter-spacing: 0.1px; } diff --git a/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx b/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx index 1621ccff..bc9278da 100644 --- a/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx +++ b/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx @@ -31,7 +31,7 @@ export const Button = styled.button` height: 9px; border-right: 2px solid; border-bottom: 2px solid; - border-color: ${({ theme }) => theme.colors.text100}; + border-color: ${({ theme }) => theme.colors.white}; } ` @@ -40,7 +40,7 @@ export const ButtonTitle = styled.span` font-size: 16px; font-weight: normal; letter-spacing: -0.32px; - color: ${({ theme }) => theme.colors.text100}; + color: ${({ theme }) => theme.colors.white}; ` export const ListWrapper = styled.div` @@ -88,7 +88,7 @@ export const LangsItem = styled.li` transition: 0.3s; font-weight: normal; font-size: 16px; - color: ${({ theme }) => theme.colors.text70}; + color: ${({ theme }) => theme.colors.white70}; :hover { background-color: #99999940; cursor: pointer; @@ -98,7 +98,7 @@ export const LangsItem = styled.li` selected ? css` font-weight: 600; - color: ${theme.colors.text100}; + color: ${theme.colors.white}; ` : '' )} diff --git a/src/features/AuthServiceApp/components/Logo/index.tsx b/src/features/AuthServiceApp/components/Logo/index.tsx index 3956ff6a..90c2c451 100644 --- a/src/features/AuthServiceApp/components/Logo/index.tsx +++ b/src/features/AuthServiceApp/components/Logo/index.tsx @@ -1,6 +1,4 @@ -import styled, { css } from 'styled-components/macro' - -import { isMobileDevice } from 'config/userAgent' +import styled from 'styled-components/macro' import { client } from '../../config/clients' @@ -14,14 +12,4 @@ export const Logo = styled.div` display: block; background-size: contain; background-repeat: no-repeat; - ${isMobileDevice - ? css` - width: 207px; - height: 48px; - @media screen and (orientation: landscape){ - width: 92px; - height: 22px; - } - ` - : ''} ` diff --git a/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx b/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx index 2cb66413..e13a661a 100644 --- a/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx +++ b/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx @@ -3,6 +3,7 @@ import { Fragment } from 'react' import { T9n } from 'features/T9n' import { ArrowLoader } from 'features/ArrowLoader' +import { client } from 'features/AuthServiceApp/config/clients' import { useRecovery } from './hooks' import { @@ -74,7 +75,9 @@ export const RecoveryPopup = (props: Props) => {