diff --git a/.drone.yml b/.drone.yml index 1d0b3095..0bc2154e 100644 --- a/.drone.yml +++ b/.drone.yml @@ -174,34 +174,34 @@ steps: depends_on: - make-lff - # - name: make-diwansport - # image: node:16-alpine - # environment: - # REACT_APP_STRIPE_PK: - # from_secret: REACT_APP_STRIPE_PK - # commands: - # - apk add --no-cache make - # - make diwansport-prod - # depends_on: - # - npm-install - - # - name: deploy-diwansport - # image: amazon/aws-cli:latest - # environment: - # AWS_ACCESS_KEY_ID: - # from_secret: AWS_ACCESS_KEY_ID - # AWS_SECRET_ACCESS_KEY: - # from_secret: AWS_SECRET_ACCESS_KEY - # AWS_DEFAULT_REGION: - # from_secret: AWS_DEFAULT_REGION - # AWS_MAX_ATTEMPTS: 10 - # commands: - # - aws s3 sync build_insports-diwansport s3://insports-diwansport --delete - # - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*" # # diwansport.net - # - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv - - # depends_on: - # - make-diwansport + - name: make-diwansport + image: node:16-alpine + environment: + REACT_APP_STRIPE_PK: + from_secret: REACT_APP_STRIPE_PK + commands: + - apk add --no-cache make + - make diwansport-prod + depends_on: + - npm-install + + - name: deploy-diwansport + image: amazon/aws-cli:latest + environment: + AWS_ACCESS_KEY_ID: + from_secret: AWS_ACCESS_KEY_ID + AWS_SECRET_ACCESS_KEY: + from_secret: AWS_SECRET_ACCESS_KEY + AWS_DEFAULT_REGION: + from_secret: AWS_DEFAULT_REGION + AWS_MAX_ATTEMPTS: 10 + commands: + - aws s3 sync build_insports-diwansport s3://insports-diwansport --delete + - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*" # # diwansport.net + - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv + + depends_on: + - make-diwansport --- kind: pipeline diff --git a/package.json b/package.json index ef91e0f2..182a89be 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "facr": "REACT_APP_CLIENT=facr react-scripts start", "lff": "REACT_APP_CLIENT=lff react-scripts start", "india": "REACT_APP_CLIENT=india react-scripts start", - "tunis": "REACT_APP_CLIENT=tunis react-scripts start", + "tunisia": "REACT_APP_CLIENT=tunisia react-scripts start", "insports": "REACT_APP_CLIENT=insports react-scripts start" }, "dependencies": { diff --git a/public/images/score-switch-tunisia-off.svg b/public/images/score-switch-tunisia-off.svg new file mode 100644 index 00000000..71c2e001 --- /dev/null +++ b/public/images/score-switch-tunisia-off.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/score-switch-tunisia-on.svg b/public/images/score-switch-tunisia-on.svg new file mode 100644 index 00000000..0f7fa25b --- /dev/null +++ b/public/images/score-switch-tunisia-on.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/tunisia-logo-white.png b/public/images/tunisia-logo-white.png new file mode 100644 index 00000000..e1e66039 Binary files /dev/null and b/public/images/tunisia-logo-white.png differ diff --git a/src/config/clients/tunisia.tsx b/src/config/clients/tunisia.tsx index b92522e3..3271fe92 100644 --- a/src/config/clients/tunisia.tsx +++ b/src/config/clients/tunisia.tsx @@ -34,7 +34,7 @@ export const tunisia: ClientConfig = { logo: 'tunis-logo.svg', logoHeight: 1.922, logoLeft: 1.1, - logoTop: 1.74, + logoTop: 1.14, logoWidth: 9, matchLogoHeight: 1.922, matchLogoTopMargin: 1, diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index fc31fa6e..b79c084b 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -11,7 +11,7 @@ export enum ClientIds { Insports = 'insports-ott-web', Instat = 'ott-web', Lff = 'lff-ott-web', - Tunisia = 'tunis-ott-web', + Tunisia = 'tunisia-ott-web', } export enum ClientNames { diff --git a/src/features/AddCardForm/components/Form/index.tsx b/src/features/AddCardForm/components/Form/index.tsx index 4043b2d4..339df9ad 100644 --- a/src/features/AddCardForm/components/Form/index.tsx +++ b/src/features/AddCardForm/components/Form/index.tsx @@ -11,6 +11,7 @@ import { PAGES } from 'config/pages' import { T9n } from 'features/T9n' import { useCardsStore } from 'features/CardsStore' import { ArrowLoader } from 'features/ArrowLoader' +import { SolidButton } from 'features/UserAccount/styled' import { ElementContainer } from '../ElementContainer' @@ -54,10 +55,7 @@ const baseStyles = isMobileDevice const options = { placeholder: '', style: { base: baseStyles } } export const AddCardFormInner = (props: Props) => { - const { - children, - inputsBackground, - } = props + const { inputsBackground } = props const { error: cardError } = useCardsStore() const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount @@ -234,7 +232,12 @@ export const AddCardFormInner = (props: Props) => { ) } - {loader ? : children} + + {loader + ? : ( + + )} + ) diff --git a/src/features/AddCardForm/index.tsx b/src/features/AddCardForm/index.tsx index bc3226d9..8ced5b20 100644 --- a/src/features/AddCardForm/index.tsx +++ b/src/features/AddCardForm/index.tsx @@ -1,12 +1,13 @@ import type { MouseEvent } from 'react' +import { useTheme } from 'styled-components' + import { useToggle } from 'hooks' import { T9n } from 'features/T9n' import { OutlineButton, Icon, - SolidButton, } from 'features/UserAccount/styled' import type { Props } from './components/Form/hooks' @@ -17,6 +18,7 @@ export const AddCardForm = ({ onAddSuccess, }: Props) => { const { isOpen, toggle } = useToggle(initialformOpen) + const { colors } = useTheme() const onAddClick = (e: MouseEvent) => { e.stopPropagation() @@ -33,11 +35,8 @@ export const AddCardForm = ({ ? ( - - - - + inputsBackground={colors.inputs} + /> ) : ( { @@ -88,7 +88,7 @@ const ChangePassword = () => { { isFetching - ? + ? : } diff --git a/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx b/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx index 69fa1f04..f05e17c2 100644 --- a/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx +++ b/src/features/AuthServiceApp/components/LanguageSelect/styled.tsx @@ -50,7 +50,7 @@ export const ListWrapper = styled.div` top: calc(100% - 4px); left: 0; padding: 10px; - background-color: #333333; + background-color: ${({ theme }) => theme.colors.comboboxBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; ` diff --git a/src/features/AuthServiceApp/components/Login/index.tsx b/src/features/AuthServiceApp/components/Login/index.tsx index 17c63f43..a9baa90b 100644 --- a/src/features/AuthServiceApp/components/Login/index.tsx +++ b/src/features/AuthServiceApp/components/Login/index.tsx @@ -1,5 +1,4 @@ import { T9n } from 'features/T9n' -import { ArrowLoader } from 'features/ArrowLoader' import { RecoveryPopup } from 'features/AuthServiceApp/components/RecoveryPopup' import { client } from 'features/AuthServiceApp/config/clients' @@ -33,6 +32,7 @@ import { LanguageSelectWrapper, Wrapper, ScLoaderWrapper, + ScArrowLoader, } from '../../styled' import { CompanyInfo } from '../../../CompanyInfo' @@ -109,18 +109,18 @@ const Login = () => { - { - isFetching - ? ( - - - - ) : ( - - - - ) - } + + + { + isFetching + ? ( + + + + ) : () + } + + diff --git a/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx b/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx index 7c863103..d1e96b92 100644 --- a/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx +++ b/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx @@ -3,7 +3,6 @@ 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 { @@ -15,10 +14,11 @@ import { ApplyButton, Text, Body, + ScInput, + ScInputGroup, } from './styled' -import { Input } from '../../../../components/Input' -import { InputGroup, Error } from '../../styled' +import { Error } from '../../styled' type Props = { isModalOpen: boolean, @@ -57,8 +57,8 @@ export const RecoveryPopup = (props: Props) => { ) : ( - - + { placeholderLexic='registration_email' onChange={onEmailChange} /> - + @@ -76,7 +76,7 @@ export const RecoveryPopup = (props: Props) => { {!isSendMessage ? ( {isFetching - ? + ? : } ) : ( diff --git a/src/features/AuthServiceApp/components/RecoveryPopup/styled.tsx b/src/features/AuthServiceApp/components/RecoveryPopup/styled.tsx index 2d62c4ad..35b383dc 100644 --- a/src/features/AuthServiceApp/components/RecoveryPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/RecoveryPopup/styled.tsx @@ -10,6 +10,10 @@ import { Header as BaseHeader } from 'features/PopupComponents' import { ButtonSolid } from 'features/Common' import { client } from 'features/AuthServiceApp/config/clients' +import { Input } from 'components/Input' + +import { InputGroup } from '../../styled' + export const Modal = styled(BaseModal)` background-color: rgba(0, 0, 0, 0.7); padding: 0 60px; @@ -18,8 +22,7 @@ export const Modal = styled(BaseModal)` width: 577px; max-width: 577px; max-height: 414px; - padding-top: 60px; - background-color: #333333; + padding-top: 40px; border-radius: 5px; @media (max-width: 1370px) { @@ -105,11 +108,19 @@ export const Body = styled.div` : ''}; ` +export const ScInput = styled(Input)` + background-color: ${({ theme }) => theme.colors.inputs}; +` + +export const ScInputGroup = styled(InputGroup)` + ${client.styles.forgotPasswordInput} +` + export const Footer = styled.div` width: 100%; display: flex; justify-content: center; - padding: 1.89rem; + padding: 10px 0 25px; ${isMobileDevice ? css` @media ${devices.mobile}{ diff --git a/src/features/AuthServiceApp/components/RegisterPopup/index.tsx b/src/features/AuthServiceApp/components/RegisterPopup/index.tsx index 6d8d78b5..7ce862ac 100644 --- a/src/features/AuthServiceApp/components/RegisterPopup/index.tsx +++ b/src/features/AuthServiceApp/components/RegisterPopup/index.tsx @@ -8,8 +8,8 @@ import { Body, Footer, ApplyButton, - // SendConfirmationButton, Text, + ScEmail, } from './styled' type Props = { @@ -36,7 +36,7 @@ export const RegisterPopup = (props: Props) => {   - {email}  + {email}    diff --git a/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx b/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx index 72782aed..b4d75206 100644 --- a/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx @@ -15,10 +15,9 @@ export const Modal = styled(BaseModal)` padding: 0 60px; ${ModalWindow} { - max-width: 757px; + max-width: 949px; min-height: 414px; padding-top: 60px; - background-color: #333333; border-radius: 5px; @media (max-width: 1370px) { @@ -110,7 +109,8 @@ export const Footer = styled.div` width: 100%; display: flex; justify-content: center; - padding: 1.89rem; + padding: 10px 0 25px; + ${isMobileDevice ? css` @media ${devices.mobile}{ @@ -149,3 +149,7 @@ export const ApplyButton = styled(ButtonSolid)` export const Text = styled.span` margin-bottom: 20px; ` + +export const ScEmail = styled.span` + font-weight: 700; +` diff --git a/src/features/AuthServiceApp/components/Registration/index.tsx b/src/features/AuthServiceApp/components/Registration/index.tsx index 65955e5a..e8980eb7 100644 --- a/src/features/AuthServiceApp/components/Registration/index.tsx +++ b/src/features/AuthServiceApp/components/Registration/index.tsx @@ -4,7 +4,6 @@ import { useHistory } from 'react-router' import { T9n } from 'features/T9n' import { Checkbox } from 'features/Common/Checkbox' -import { ArrowLoader } from 'features/ArrowLoader' import { RegisterPopup } from 'features/AuthServiceApp/components/RegisterPopup' import { client } from 'features/AuthServiceApp/config/clients' import { CompanyInfo } from 'features/CompanyInfo' @@ -26,6 +25,7 @@ import { Error, LanguageSelectWrapper, Wrapper, + ScArrowLoader, } from '../../styled' import { Label, @@ -134,7 +134,7 @@ const Registration = () => { { isFetching - ? + ? : } diff --git a/src/features/AuthServiceApp/components/Registration/styled.tsx b/src/features/AuthServiceApp/components/Registration/styled.tsx index 8effe6dd..e95fd07f 100644 --- a/src/features/AuthServiceApp/components/Registration/styled.tsx +++ b/src/features/AuthServiceApp/components/Registration/styled.tsx @@ -47,4 +47,8 @@ export const Link = styled.a` color: ${({ theme }) => theme.colors.white}; text-decoration: underline; margin-left: 6px; + + :hover { + font-weight: 700; + } ` diff --git a/src/features/AuthServiceApp/config/clients/facr.tsx b/src/features/AuthServiceApp/config/clients/facr.tsx index ab23c621..4e89a2fa 100644 --- a/src/features/AuthServiceApp/config/clients/facr.tsx +++ b/src/features/AuthServiceApp/config/clients/facr.tsx @@ -56,7 +56,6 @@ export const facr: ClientConfig = { background-color: #00257A; color: ${({ theme }) => theme.colors.white}; `, - popupLoader: '#FFFFFF', submitButton: css` background-color: ${({ theme }) => theme.colors.white}; color: #00257A; diff --git a/src/features/AuthServiceApp/config/clients/tunisia.tsx b/src/features/AuthServiceApp/config/clients/tunisia.tsx index b6b7922e..c1c794a0 100644 --- a/src/features/AuthServiceApp/config/clients/tunisia.tsx +++ b/src/features/AuthServiceApp/config/clients/tunisia.tsx @@ -30,6 +30,9 @@ export const tunisia: ClientConfig = { } ` : ''}; `, + forgotPasswordInput: css` + border: none; + `, input: css` background-color: transparent; :not(:last-of-type) { @@ -59,7 +62,6 @@ export const tunisia: ClientConfig = { background-color: #0E8F84; color: ${({ theme }) => theme.colors.white}; `, - popupLoader: '#FFFFFF', submitButton: css` background-color: ${({ theme }) => theme.colors.white}; color: #0B2E4D; diff --git a/src/features/AuthServiceApp/config/clients/types.tsx b/src/features/AuthServiceApp/config/clients/types.tsx index 0542b57a..c785db54 100644 --- a/src/features/AuthServiceApp/config/clients/types.tsx +++ b/src/features/AuthServiceApp/config/clients/types.tsx @@ -17,12 +17,12 @@ export type ClientConfig = { privacyLink: string, styles: { centerBlock?: StyledCss, + forgotPasswordInput?: StyledCss, input?: StyledCss, inputGroup?: StyledCss, loader?: StyledCss, logo: StyledCss, popupApplyButton?: StyledCss, - popupLoader?: string, submitButton?: StyledCss, }, termsLink: string, diff --git a/src/features/AuthServiceApp/hooks/useAuthFields.tsx b/src/features/AuthServiceApp/hooks/useAuthFields.tsx index 84165f4c..c9d66bbd 100644 --- a/src/features/AuthServiceApp/hooks/useAuthFields.tsx +++ b/src/features/AuthServiceApp/hooks/useAuthFields.tsx @@ -20,6 +20,10 @@ export const useAuthFields = (page: 'login'|'registration') => { const onEmailChange = ({ target: { value } }: ChangeEvent) => { setError('') setEmail(value) + const isRegisterPage = page === 'registration' + if (password.length && !checkPassword(password) && isRegisterPage) { + setError('check_password') + } } const onPasswordChange = ({ target: { value } }: ChangeEvent) => { diff --git a/src/features/AuthServiceApp/styled.tsx b/src/features/AuthServiceApp/styled.tsx index 1ef5985e..64c16f06 100644 --- a/src/features/AuthServiceApp/styled.tsx +++ b/src/features/AuthServiceApp/styled.tsx @@ -4,6 +4,7 @@ import { isMobileDevice } from 'config/userAgent' import { ButtonSolid as BaseButtonSolid } from 'features/Common/Button' import { T9n } from 'features/T9n' +import { ArrowLoader } from 'features/ArrowLoader' import { client } from 'features/AuthServiceApp/config/clients' @@ -166,6 +167,7 @@ export const ChangePasswordModalWrapper = styled.div` left: 0; top: 0; display: flex; + background: rgba(0, 0, 0, 0.7); ` export const ChangePasswordModal = styled.div` @@ -173,7 +175,7 @@ export const ChangePasswordModal = styled.div` justify-content: center; flex-direction: column; align-items: center; - background: #333333; + background: ${({ theme }) => theme.colors.modalBackground}; border-radius: 5px; font-weight: 700; height: 414px; @@ -222,4 +224,10 @@ export const ChangePasswordModalButton = styled(ButtonSolid)` width: fit-content; padding: 0 50px; cursor: pointer; + background: ${({ theme }) => theme.colors.button}; + color: ${({ theme }) => theme.colors.white}; +` + +export const ScArrowLoader = styled(ArrowLoader)` + color: ${({ theme }) => theme.colors.loaderAuth} ` diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx index c74034f3..a0519f15 100644 --- a/src/features/BuyMatchPopup/components/CardStep/index.tsx +++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx @@ -1,5 +1,7 @@ import { useState } from 'react' +import { useTheme } from 'styled-components' + import isEmpty from 'lodash/isEmpty' import { AddCardFormInner } from 'features/AddCardForm/components/Form' @@ -43,7 +45,7 @@ export const CardStep = ({ goBack, showClearBtn, } = useBuyMatchPopupStore() - + const { colors } = useTheme() const emptyCards = isEmpty(cards) return ( @@ -64,7 +66,7 @@ export const CardStep = ({ diff --git a/src/features/BuyMatchPopup/components/IframePayment/styled.tsx b/src/features/BuyMatchPopup/components/IframePayment/styled.tsx index e18a07d8..36351bc8 100644 --- a/src/features/BuyMatchPopup/components/IframePayment/styled.tsx +++ b/src/features/BuyMatchPopup/components/IframePayment/styled.tsx @@ -12,7 +12,6 @@ export const ScModal = styled(BaseModal)` ${ModalWindow} { width: 800px; padding: 50px; - background-color: #333333; border-radius: 5px; justify-content: center; diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx index 07149645..6873280f 100644 --- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx +++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx @@ -142,23 +142,23 @@ export const PackageSelectionStep = () => { {!isIframePayment && }
- {loader ? ( - - ) : ( - - )} + )} +
{selectedPackage && isIframePayment && ( ({ width: 100%; min-height: 140px; padding: 20px 30px 20px 20px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F; + background: ${({ theme }) => theme.colors.packageBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; diff --git a/src/features/BuyMatchPopup/styled.tsx b/src/features/BuyMatchPopup/styled.tsx index 3151c037..5b95c481 100644 --- a/src/features/BuyMatchPopup/styled.tsx +++ b/src/features/BuyMatchPopup/styled.tsx @@ -11,7 +11,6 @@ export const Modal = styled(BaseModal)` z-index: 52; ${ModalWindow} { padding: 0; - background-color: #333333; border-radius: 5px; ${isMobileDevice @@ -34,7 +33,6 @@ export const Header = styled.div` ` export const HeaderTitle = styled.h2` - font-weight: 600; font-size: 24px; color: #FFFFFF; text-align: center; diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index acd235b3..c68959cb 100644 --- a/src/features/Combobox/styled.tsx +++ b/src/features/Combobox/styled.tsx @@ -17,7 +17,7 @@ export const PopOver = styled.ul` left: -1px; overflow: auto; z-index: 2; - background: rgb(102, 102, 102); + background: ${({ theme }) => theme.colors.comboboxBackground}; ${customScrollbar}; ${customStylesMixin}; @@ -30,25 +30,24 @@ export const ListOption = styled.li.attrs(() => ({ width: 100%; height: 48px; font-size: 16px; - font-weight: bold; + font-weight: 400; display: flex; align-items: center; padding-left: 24px; - color: ${({ isHighlighted }) => ( - isHighlighted - ? '#fff' - : '#ccc' - )}; - background-color: ${({ isHighlighted }) => ( - isHighlighted - ? '#999' - : '#3F3F3F' - )}; + color: ${({ theme }) => theme.colors.white70}; + background-color: transparent; + + ${({ isHighlighted }) => isHighlighted && css` + color: ${({ theme }) => theme.colors.white}; + font-weight: 600; + `} + cursor: pointer; &:hover { - background-color: #999; - color: #fff; + background-color: ${({ theme }) => theme.colors.comboboxItemHover}; + color: ${({ theme }) => theme.colors.white}; + font-weight: 600; } ${isMobileDevice diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 39e89750..5c339783 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -23,7 +23,7 @@ export const wrapperStyles = css` padding-bottom: 0.519rem; display: flex; align-items: center; - background-color: #3F3F3F; + background-color: ${({ theme }) => theme.colors.inputs}; box-shadow: 0px 1px 1px rgba(43, 30, 30, 0.3); border-radius: 2px; border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))}; diff --git a/src/features/Common/Tabs/index.tsx b/src/features/Common/Tabs/index.tsx index 3c92cddd..5883f806 100644 --- a/src/features/Common/Tabs/index.tsx +++ b/src/features/Common/Tabs/index.tsx @@ -39,7 +39,7 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({ color: #FFFFFF; :hover { - background-color: #484848; + background-color: ${theme.colors.searchBtnHover}; } ` )} diff --git a/src/features/FavoritesMobilePopup/components/GroupBlock/styled.tsx b/src/features/FavoritesMobilePopup/components/GroupBlock/styled.tsx index a7e97e0a..766630b0 100644 --- a/src/features/FavoritesMobilePopup/components/GroupBlock/styled.tsx +++ b/src/features/FavoritesMobilePopup/components/GroupBlock/styled.tsx @@ -26,7 +26,7 @@ export const TitleWrapper = styled.div` export const ContentWrapper = styled.div` margin-top: 10px; - background-color: #3F3F3F; + background-color: ${({ theme }) => theme.colors.modalBackground}; border-radius: 1.4px; ` diff --git a/src/features/GlobalStores/index.tsx b/src/features/GlobalStores/index.tsx index 4d08d6f1..9d858a1e 100644 --- a/src/features/GlobalStores/index.tsx +++ b/src/features/GlobalStores/index.tsx @@ -1,52 +1,20 @@ -import { - ReactNode, - useEffect, - useState, -} from 'react' - -import { useLocation } from 'react-router' +import { ReactNode } from 'react' import { getLanguageUrlParam } from 'helpers/languageUrlParam' import { AuthStore } from 'features/AuthStore' import { LexicsStore } from 'features/LexicsStore' -import { getGeoInfo } from 'requests' - -import { redirectToUrl } from 'helpers' - const initialLanguage = getLanguageUrlParam() type Props = { children: ReactNode, } -export const GlobalStores = ({ children }: Props) => { - const { pathname, search } = useLocation() - const [isGeoReady, setIsGeoReady] = useState(false) - - useEffect(() => { - (async () => { - if (pathname === '/' && search === '') { - const geo = await getGeoInfo() - - if (geo.country_code === 'TN') { - redirectToUrl('https://diwan.insports.tv') - return - } - } - setIsGeoReady(true) - })() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - if (!isGeoReady) return null - - return ( - - - {children} - - - ) -} +export const GlobalStores = ({ children }: Props) => ( + + + {children} + + +) diff --git a/src/features/HeaderFilters/components/DatePicker/styled.tsx b/src/features/HeaderFilters/components/DatePicker/styled.tsx index acbf0268..96f8e84e 100644 --- a/src/features/HeaderFilters/components/DatePicker/styled.tsx +++ b/src/features/HeaderFilters/components/DatePicker/styled.tsx @@ -24,7 +24,7 @@ export const Wrapper = styled.div` margin: 0; border: none; width: 13.6rem; - background-color: #333333; + background-color: ${({ theme }) => theme.colors.modalBackground}; box-shadow: 0px 2px 2.32rem #000000; border-radius: 2px; font-family: inherit; @@ -46,7 +46,7 @@ export const Wrapper = styled.div` border: none; border-radius: 2; padding-top: 0.567rem; - background-color: #333333; + background-color: ${({ theme }) => theme.colors.modalBackground}; } .react-datepicker__month-container { diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 2a91486e..ef6c8e63 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -14,7 +14,7 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)' export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if (['lff', 'tunis'].includes(client.name)) { + if (['lff', 'tunisia'].includes(client.name)) { return client.styles.homePageHeader } @@ -143,7 +143,6 @@ export const ScModal = styled(BaseModal)` ${ModalWindow} { min-width: 280px; max-height: 250px; - background-color: #333333; border-radius: 0px; padding: 0; ${customScrollbar} diff --git a/src/features/ItemsList/styled.tsx b/src/features/ItemsList/styled.tsx index 2c4f03b8..f41522b5 100644 --- a/src/features/ItemsList/styled.tsx +++ b/src/features/ItemsList/styled.tsx @@ -37,7 +37,7 @@ export const StyledLink = styled(ProfileLink)` :focus-within, :hover { - background-color: #3b3b3b; + background-color: ${({ theme }) => theme.colors.searchBtnHover}; outline: none; } ${isMobileDevice diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index 01c670b7..f70b7372 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -36,7 +36,7 @@ export const CardWrapper = styled.div` right: 0; padding-bottom: 0.75rem; border-radius: 2px; - background-color: #3F3F3F; + background-color: ${({ theme }) => theme.colors.matchCardBackground}; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; ${isMobileDevice diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index ba438635..e89069ac 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -41,7 +41,7 @@ export const CardWrapper = styled.div` right: 0; padding: ${({ isMatchPage }) => (isMatchPage ? '0.5rem 0.625rem 1.8rem' : '0 0 0.75rem')}; border-radius: 3px; - background-color: #3F3F3F; + background-color: ${({ theme }) => theme.colors.matchCardBackground}; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; diff --git a/src/features/MatchPage/components/FavouriteTeam/styled.tsx b/src/features/MatchPage/components/FavouriteTeam/styled.tsx index 5f970f65..eb613d57 100644 --- a/src/features/MatchPage/components/FavouriteTeam/styled.tsx +++ b/src/features/MatchPage/components/FavouriteTeam/styled.tsx @@ -13,7 +13,6 @@ export const ScModalContainer = styled(BaseModal)` width: 1446px; height: 670px; padding: 0; - background: #333333; border-radius: 5px; ${customScrollbar} @@ -143,7 +142,8 @@ export const ButtonsBlock = styled.div` export const Button = styled(ButtonSolid)` width: 134px; height: 50px; - background: #294FC4; + background: ${({ theme }) => theme.colors.button}; + color: ${({ theme }) => theme.colors.white}; border-radius: 5px; ${isMobileDevice diff --git a/src/features/MatchPage/components/FinishedMatch/styled.tsx b/src/features/MatchPage/components/FinishedMatch/styled.tsx index 33f1f58c..e7f5ba13 100644 --- a/src/features/MatchPage/components/FinishedMatch/styled.tsx +++ b/src/features/MatchPage/components/FinishedMatch/styled.tsx @@ -11,7 +11,6 @@ export const Modal = styled(BaseModal)` ${ModalWindow} { width: 1222px; padding: 20px 0; - background-color: #3F3F3F; border-radius: 5px; @media ${devices.tablet} { diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 5e35b73f..61904796 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -1,6 +1,8 @@ import { useEffect } from 'react' import { useHistory } from 'react-router' +import { useTheme } from 'styled-components' + import { ProfileHeader } from 'features/ProfileHeader' import { UserFavorites } from 'features/UserFavorites' import { useUserFavoritesStore } from 'features/UserFavorites/store' @@ -30,6 +32,7 @@ const MatchPageComponent = () => { usePageLogger() const history = useHistory() const { addRemoveFavorite, userFavorites } = useUserFavoritesStore() + const { colors } = useTheme() const { isStarted, @@ -89,7 +92,7 @@ const MatchPageComponent = () => { return ( - +
diff --git a/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx b/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx index 6f64f761..08055a9e 100644 --- a/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx +++ b/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx @@ -13,7 +13,6 @@ export const Modal = styled(BaseModal)` width: 27.22rem; min-height: 14.859rem; padding: 1.416rem 0.71rem; - background-color: #333; border-radius: 5px; ${isMobileDevice diff --git a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx index e2ff306e..e2fb5a4e 100644 --- a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx +++ b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx @@ -13,7 +13,7 @@ export const Content = styled.div` ? css` width: 90%; margin-top: 30%; - background: #333; + background: ${({ theme }) => theme.colors.modalBackground}; border-radius: 4px; padding: 20px 0 30px 0; @@ -55,7 +55,7 @@ export const HeaderActions = styled.div` export const HeaderTitle = styled.h2` margin: 0 auto; width: 70%; - font-weight: 600; + font-weight: 700; font-size: 1.14rem; line-height: 1.982rem; color: #FFFFFF; diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx index 6ee8f2c3..f52e0f17 100644 --- a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx +++ b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx @@ -18,17 +18,12 @@ export const StyledLink = styled(Link)` width: 100%; height: 100%; padding: 0 1.18rem; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ), - #3F3F3F; + background: ${({ theme }) => theme.colors.liveMatchPlaylistBtnBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; :hover { - background-color: #555555; + background-color: ${({ theme }) => theme.colors.liveMatchPlaylistBtnHover};; } ${isMobileDevice diff --git a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx index 3bcc1709..52642c20 100644 --- a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx +++ b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx @@ -18,7 +18,7 @@ type PlayerNumberProps = { } export const PopupContainer = styled.div` - background: #333333; + background: ${({ theme }) => theme.colors.modalBackground}; box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.6); border-radius: 2px; display: flex; @@ -203,7 +203,7 @@ export const ButtonConatiner = styled.div` export const Button = styled.button` height: 41px; - background: #294FC4; + background: ${({ theme }) => theme.colors.button}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 5px; border: none; diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index 39c4bcf6..6410245e 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -155,12 +155,7 @@ export const Button = styled.button` align-items: center; width: 100%; height: 100%; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ), - #3F3F3F; + background: ${({ theme }) => theme.colors.playerActionBtnBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx index b6f32776..37bd5765 100644 --- a/src/features/Modal/styled.tsx +++ b/src/features/Modal/styled.tsx @@ -17,7 +17,7 @@ export const ModalContainer = styled.div` ` export const ModalWindow = styled.div` - background-color: #313131; + background-color: ${({ theme }) => theme.colors.modalBackground}; position: relative; padding: 15px; box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.7); diff --git a/src/features/NoNetworkPopup/styled.tsx b/src/features/NoNetworkPopup/styled.tsx index 03048032..edc1d915 100644 --- a/src/features/NoNetworkPopup/styled.tsx +++ b/src/features/NoNetworkPopup/styled.tsx @@ -15,7 +15,6 @@ export const ScModalContainer = styled(BaseModal)` width: 577px; height: 367px; border-radius: 5px; - background-color: #333333; padding: 50px 0; ${isMobileDevice diff --git a/src/features/PreferencesPopup/styled.tsx b/src/features/PreferencesPopup/styled.tsx index 4e3f09b3..3f8d2a3a 100644 --- a/src/features/PreferencesPopup/styled.tsx +++ b/src/features/PreferencesPopup/styled.tsx @@ -20,7 +20,6 @@ export const Modal = styled(BaseModal)` width: 1066px; height: 781px; padding: 0; - background-color: #333333; border-radius: 5px; @media (max-width: 1370px) { diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index 6305c24f..a45fdaa0 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -15,8 +15,6 @@ import { Menu } from 'features/Menu' import { Search } from 'features/Search' import { ScoreSwitch } from 'features/MatchSwitches' -import { isMatchPage } from 'helpers/isMatchPage' - import { usePageParams } from 'hooks/usePageParams' import { useProfileColor } from './hooks' @@ -48,7 +46,7 @@ export const ProfileHeader = ({ } = usePageParams() const color = useProfileColor(profileId) - const imageHeader = (profileId === 5704 || 316) + const imageHeader = (profileId === 5704 || profileId === 316) && sportType === SportTypes.FOOTBALL && profileType === ProfileTypes.TOURNAMENTS ? `/images/${profileId}` : headerImage @@ -58,16 +56,14 @@ export const ProfileHeader = ({ headerImage={imageHeader} color={headerColor || color} height={height} - isMatchPage={isMatchPage()} > - + {client.showSearch && } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index f201286d..e8a95e56 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -9,12 +9,15 @@ import { ClientNames } from 'config/clients/types' import { Logo } from 'features/Logo' import { ScoreSwitch } from 'features/MatchSwitches' +import { isMatchPage } from 'helpers/isMatchPage' + export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)' export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name)) { + if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name) + && !isMatchPage()) { return client.styles.homePageHeader } @@ -60,25 +63,17 @@ export const HeaderStyled = styled.header` ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} ${({ color }) => ( - client.name === 'lff' ? css` - background: ${color}; - ` : '' - )} - - ${({ color }) => ( - client.name === 'facr' ? css` + client.name === ClientNames.Lff || client.name === ClientNames.Facr || client.name === ClientNames.Tunisia ? css` background: ${color}; ` : '' )} - ${({ isMatchPage }) => css` - ${isMobileDevice + ${isMobileDevice ? css` - height: ${(isMatchPage ? '40px' : '114px')}; - padding: 8px; - ` + height: ${() => (isMatchPage() ? '40px' : '114px')}; + padding: 8px; + ` : ''} - `} ` type Props = { @@ -102,7 +97,7 @@ export const HeaderGroup = styled.div` ` export const HeaderLogo = styled(Logo)` - ${({ isMatchPage }) => (isMatchPage ? css` + ${() => (isMatchPage() ? css` width: ${client.styles.matchLogoWidth}rem; height: ${client.styles.matchLogoHeight}rem; @@ -125,9 +120,7 @@ export const HeaderLogo = styled(Logo)` position: absolute; } ` : ''} - `)} - - + `)} ` type PositionProps = { @@ -140,8 +133,8 @@ type PositionProps = { export const Position = styled.div` position: absolute; - top: ${({ isMatchPage, top = 1.14 }) => ( - isMatchPage + top: ${({ top = 1.14 }) => ( + isMatchPage() ? client.styles.matchLogoTopMargin ?? top : top )}rem; diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx index 19107b58..c75e2aa3 100644 --- a/src/features/Search/styled.tsx +++ b/src/features/Search/styled.tsx @@ -55,7 +55,7 @@ type FormProps = { const expandedStyles = css` ${InputWrapper} { width: 19.3rem; - background: #292929; + background: ${({ theme }) => theme.colors.inputs}; border-radius: 10px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); ${isMobileDevice @@ -177,7 +177,7 @@ export const Results = styled.div` top: 2rem; width: 19.3rem; padding: 1.226rem 0.95rem; - background-color: #333333; + background-color: ${({ theme }) => theme.colors.modalBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; z-index: 3; diff --git a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx index ce0b30b3..0a55fee4 100644 --- a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx +++ b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx @@ -154,7 +154,6 @@ export const ScModal = styled(BaseModal)` left: 4.7rem; min-width: 14.9%; max-height: 290px; - background-color: #333333; border-radius: 0px; padding: 0; overflow-y: auto; diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index 0d550ab1..a75f3907 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -140,7 +140,6 @@ export const StreamPlayer = (props: Props) => { onPlaying={onPlaying} onWaiting={onWaiting} onError={onError} - crossOrigin='use-credentials' /> {isMobileDevice && isFullscreen && mainControlsVisible && profile && ( diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx index edf14b05..e2cfca76 100644 --- a/src/features/Theme/config.tsx +++ b/src/features/Theme/config.tsx @@ -1,27 +1,4 @@ -export const lightTheme = { - colors: { - background: '', - black: '', - black40: '', - black70: '', - button: '', - buttonHover: '', - dateButton: '', - dateFilter: '', - error: '', - inputs: '', - loader: '', - primary: '', - secondary: '', - shadow: '', - white: '', - white50: '', - white70: '', - }, - name: 'light' as Name, -} - -export const defaultTheme: CustomTheme = { +export const defaultTheme = { colors: { background: ` radial-gradient( @@ -35,11 +12,21 @@ export const defaultTheme: CustomTheme = { black70: 'rgba(0, 0, 0, 0.7)', button: '#294FC3', buttonHover: '#3255be', + comboboxBackground: '#3F3F3F', + comboboxItemHover: '#999999', dateButton: 'rgba(255, 255, 255, 0.5)', dateFilter: '#656565', error: 'rgba(235, 87, 87, 1)', inputs: '#3F3F3F', + liveMatchPlaylistBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F', + liveMatchPlaylistBtnHover: '#555555', loader: '#FFFFFF', + loaderAuth: '#FFFFFF', + matchCardBackground: '#3F3F3F', + matchHeaderBackground: '#2B2A28', + modalBackground: '#333333', + packageBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F', + playerActionBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F', primary: ` linear-gradient( 180deg, @@ -49,8 +36,15 @@ export const defaultTheme: CustomTheme = { ), #0033CC `, + searchBtnHover: '#3b3b3b', secondary: '#999999', shadow: '0px 1px 1px rgba(0, 0, 0, 0.3)', + unsubscribeItemBackground: `linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0) 100% + ), + #3f3f3f`, white: '#FFFFFF', white50: 'rgba(255, 255, 255, 0.5)', white70: 'rgba(255, 255, 255, 0.7)', @@ -78,6 +72,7 @@ export const facrTheme: CustomTheme = { ...defaultTheme.colors, button: '#00257A', inputs: 'transparent', + loaderAuth: '#00257A', }, name: 'facr', } @@ -88,13 +83,26 @@ export const tunisTheme: CustomTheme = { ...defaultTheme.colors, background: '#1D1D1D', button: '#0E8F84', - buttonHover: '#09aa9d', + buttonHover: '#0E8F84', + comboboxBackground: '#263233', + comboboxItemHover: '#0E8F84', dateFilter: '#ffffff80', + error: '#FF4E77', inputs: '#3A4849', + liveMatchPlaylistBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3A4849', + liveMatchPlaylistBtnHover: '#0E8F84', + loaderAuth: '#0B2E4D', + matchCardBackground: '#3A4849', + matchHeaderBackground: '#030F1B', + modalBackground: '#263233', + packageBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3A4849', + playerActionBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3A4849', + searchBtnHover: '#0E8F84', + unsubscribeItemBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3A4849', }, - name: 'tunis', + name: 'tunisia', } -type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunis' +type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' -export type CustomTheme = typeof lightTheme +export type CustomTheme = typeof defaultTheme diff --git a/src/features/Theme/index.tsx b/src/features/Theme/index.tsx index ad899315..e52ede12 100644 --- a/src/features/Theme/index.tsx +++ b/src/features/Theme/index.tsx @@ -5,8 +5,12 @@ import { useMemo, useEffect, } from 'react' + import { ThemeProvider } from 'styled-components' -import { client } from 'config/clients' + +import { client as clientBase } from 'config/clients' +import { client as clientAuth } from 'features/AuthServiceApp/config/clients' +import { ClientNames } from 'config/clients/types' import { CustomTheme, @@ -15,7 +19,6 @@ import { lffTheme, tunisTheme, } from './config' -import { ClientNames } from '../../config/clients/types' type Props = { children: ReactNode, @@ -24,6 +27,13 @@ type Props = { export const Theme = ({ children }: Props) => { const [theme, setTheme] = useState(defaultTheme) + const client = useMemo(() => { + if (process.env.REACT_APP_TYPE === 'auth-service') { + return clientAuth + } + return clientBase + }, []) + const switchTheme = useCallback(() => { switch (client.name) { case ClientNames.Lff: @@ -39,7 +49,7 @@ export const Theme = ({ children }: Props) => { setTheme(defaultTheme) break } - }, []) + }, [client]) useEffect(() => { switchTheme() diff --git a/src/features/TournamentList/components/TournamentMobile/styled.tsx b/src/features/TournamentList/components/TournamentMobile/styled.tsx index 433f92f2..3a103dc1 100644 --- a/src/features/TournamentList/components/TournamentMobile/styled.tsx +++ b/src/features/TournamentList/components/TournamentMobile/styled.tsx @@ -28,7 +28,7 @@ export const CardWrapper = styled.div<{ display: flex; align-items: center; - background-color: ${({ open, theme: { colors } }) => (open ? colors.button : '#3f3f3f')}; + background-color: ${({ open, theme: { colors } }) => (open ? colors.button : colors.matchCardBackground)}; cursor: pointer; ${isMobileDevice ? css` diff --git a/src/features/TournamentsPopup/styled.tsx b/src/features/TournamentsPopup/styled.tsx index 6d51b03d..45700829 100644 --- a/src/features/TournamentsPopup/styled.tsx +++ b/src/features/TournamentsPopup/styled.tsx @@ -17,7 +17,6 @@ export const ScModalContainer = styled(BaseModal)` width: 679px; max-height: 95vh; padding: 0; - background-color: #1E2127; border-radius: 5px; overflow-y: auto; diff --git a/src/features/UserAccount/components/BankCard/styled.tsx b/src/features/UserAccount/components/BankCard/styled.tsx index 830c7113..8502e52b 100644 --- a/src/features/UserAccount/components/BankCard/styled.tsx +++ b/src/features/UserAccount/components/BankCard/styled.tsx @@ -17,7 +17,7 @@ export const CardNumberWrapper = styled.div` display: flex; align-items: center; justify-content: space-between; - background-color: #3F3F3F; + background-color: ${({ theme }) => theme.colors.inputs}; border-radius: 2px; margin-bottom: 10px; overflow: hidden; diff --git a/src/features/UserAccount/components/CancelSubPopup/styled.tsx b/src/features/UserAccount/components/CancelSubPopup/styled.tsx index 56fa69ff..a9ecd012 100644 --- a/src/features/UserAccount/components/CancelSubPopup/styled.tsx +++ b/src/features/UserAccount/components/CancelSubPopup/styled.tsx @@ -16,7 +16,6 @@ export const Modal = styled(BaseModal)` max-width: 642px; max-height: 340px; padding-top: 40px; - background-color: #333333; border-radius: 5px; ${isMobileDevice @@ -165,12 +164,7 @@ export const Text = styled.span` export const ScCancelSub = styled.div` max-width: 562px; height: 59px; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ), - #3f3f3f; + background: ${({ theme }) => theme.colors.unsubscribeItemBackground}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; font-weight: 500; diff --git a/src/features/UserAccount/components/ChangeCardPopup/styled.tsx b/src/features/UserAccount/components/ChangeCardPopup/styled.tsx index 93d0cb17..0934c679 100644 --- a/src/features/UserAccount/components/ChangeCardPopup/styled.tsx +++ b/src/features/UserAccount/components/ChangeCardPopup/styled.tsx @@ -8,7 +8,6 @@ export const Modal = styled(BaseModal)` ${ModalWindow} { padding: 0; - background-color: #333333; border-radius: 5px; ${isMobileDevice diff --git a/src/features/UserAccount/components/PageBankCards/styled.tsx b/src/features/UserAccount/components/PageBankCards/styled.tsx index 6ffe722c..cd1d9b81 100644 --- a/src/features/UserAccount/components/PageBankCards/styled.tsx +++ b/src/features/UserAccount/components/PageBankCards/styled.tsx @@ -51,7 +51,6 @@ export const Modal = styled(ModalBase)` background-color: rgba(0, 0, 0, 0.7); ${ModalWindow} { padding: 40px 86px; - background: #333333; border-radius: 5px; } ` diff --git a/src/features/UserAccount/components/PageSubscriptions/styled.tsx b/src/features/UserAccount/components/PageSubscriptions/styled.tsx index f61868f4..4e501ffa 100644 --- a/src/features/UserAccount/components/PageSubscriptions/styled.tsx +++ b/src/features/UserAccount/components/PageSubscriptions/styled.tsx @@ -145,7 +145,7 @@ export const ScCancelButton = styled.button` padding: 0; background-color: transparent; cursor: pointer; - background: #294FC4; + background: ${({ theme }) => theme.colors.button}; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 5px; width: 100%; diff --git a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx b/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx index 90c1a8a1..dfcf5d78 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx @@ -15,6 +15,8 @@ import { SaveUserInfo } from 'requests' import { readToken } from 'helpers/token' +import { client } from 'config/clients' + import { useUserInfoForm } from './useUserInfoForm' import { useValidateForm } from './useValidateForm' @@ -110,7 +112,7 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => { } const resetPassword = useCallback(() => { - window.location.href = `${AUTH_SERVICE}/change_password?token=${token}` + window.location.href = `${AUTH_SERVICE}/change_password?client_id=${client.auth.clientId}&token=${token}` }, [token]) return { diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index da2b2ac8..80e31e3c 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/index.tsx @@ -113,15 +113,13 @@ export const PersonalInfoForm = (props: Props) => { withError={false} /> - {loader ? : ( - - - - )} + + {loader ? : } + { > - {!isLffClient && !isInSportsClient && ( + {!isLffClient && !isInSportsClient && !isTunisClient && ( ((props: Props, re const { className, controls, - crossOrigin, height, hidden, muted, @@ -61,7 +60,7 @@ export const VideoPlayer = forwardRef((props: Props, re onError={onError} onWaiting={onWaiting} onPlaying={onPlaying} - crossOrigin={crossOrigin} + crossOrigin='use-credentials' controls={controls} /> ) diff --git a/src/helpers/getSwitchScoreIconName/index.tsx b/src/helpers/getSwitchScoreIconName/index.tsx index 3a777b93..446c9bff 100644 --- a/src/helpers/getSwitchScoreIconName/index.tsx +++ b/src/helpers/getSwitchScoreIconName/index.tsx @@ -1,15 +1,18 @@ import { isMobileDevice } from 'config/userAgent' import { client } from 'config/clients' +import { ClientNames } from '../../config/clients/types' export const getSwitchScoreIconName = () => { switch (true) { - case client.name === 'lff' && !isMobileDevice: + case client.name === ClientNames.Lff && !isMobileDevice: return 'score-switch-lff' - case client.name === 'lff' && isMobileDevice: + case client.name === ClientNames.Lff && isMobileDevice: return 'score-switch-lff-mobile' - case client.name !== 'lff' && !isMobileDevice: + case client.name === ClientNames.Tunisia: + return 'score-switch-tunisia' + case client.name !== ClientNames.Lff && !isMobileDevice: return 'score-switch' - case client.name !== 'lff' && isMobileDevice: + case client.name !== ClientNames.Lff && isMobileDevice: return 'score-switch-mobile' default: return 'score-switch' diff --git a/src/helpers/isMatchPage/index.tsx b/src/helpers/isMatchPage/index.tsx index 2969aecb..ba8e3fa0 100644 --- a/src/helpers/isMatchPage/index.tsx +++ b/src/helpers/isMatchPage/index.tsx @@ -1,6 +1,5 @@ import toNumber from 'lodash/toNumber' import isUndefined from 'lodash/isUndefined' -import includes from 'lodash/includes' export const isMatchPage = () => { const splitPath = window.location.pathname.split('/') @@ -16,5 +15,3 @@ export const isMatchPageRFEF = () => { return pageType === '1rfef' } - -export const isDiwanInsportsTvPage = () => includes(window.location.host, 'diwan') diff --git a/src/pages/DiwanInsportsTv/index.tsx b/src/pages/DiwanInsportsTv/index.tsx deleted file mode 100644 index a2a77b1b..00000000 --- a/src/pages/DiwanInsportsTv/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Fragment } from 'react' - -import { isMobileDevice } from 'config' -import { joinMatchLexics } from 'config/lexics/joinMatch' - -import { T9n } from 'features/T9n' -import { useLexicsConfig } from 'features/LexicsStore' - -import { useAuthStore } from 'features/AuthStore' - -import { getCurrentYear } from 'helpers' - -import { - Wrapper, - TunisiaLogo, - HeaderWrapper, - Footer, - BlockWrapper, - MatchInfo, - LigueImgWrapper, - Season, - MainInfoTitle, - MainInfoButton, - MainInfoContainer, - MainInfoText, - FooterRights, - ClubsLogo, - InsportsLogo, - ScGradient, - LigueImg, -} from './styled' - -export const DiwanInsportsTv = () => { - useLexicsConfig(joinMatchLexics) - const { login } = useAuthStore() - - const currentYear = getCurrentYear() - - return ( - - - - {isMobileDevice && } - - - - - - - - - - - - - - - - - - - - - {!isMobileDevice && ( - - - - - )} - - - - - - ) -} diff --git a/src/pages/DiwanInsportsTv/styled.tsx b/src/pages/DiwanInsportsTv/styled.tsx deleted file mode 100644 index da2d4e71..00000000 --- a/src/pages/DiwanInsportsTv/styled.tsx +++ /dev/null @@ -1,301 +0,0 @@ -import styled, { css } from 'styled-components/macro' - -import { devices, isMobileDevice } from 'config' - -import { ButtonSolid } from 'features/Common' - -export const Wrapper = styled.div` - width: 100vw; - height: 100vh; - color: white; - display: flex; - flex-direction: column; - justify-content: space-between; - ${isMobileDevice - ? css` - height: 100%; - ` - : ''}; -` - -export const HeaderWrapper = styled.div` - padding: 20px 0; - padding-left: 20%; - width: 100%; - background: rgba(19, 21, 27, 0.7); - backdrop-filter: blur(20px); - display: flex; - align-items: center; - - @media ${devices.laptop} { - padding-left: 5%; - } - - ${isMobileDevice - ? css` - background: #000000; - ` - : ''}; -` - -export const TunisiaLogo = styled.div` - background-image: url(/images/tunis-logo.svg); - background-size: contain; - background-repeat: no-repeat; - width: 229px; - height: 49px; - margin-bottom: 50px; - - ${isMobileDevice - ? css` - width: 66px; - height: 14px; - margin-bottom: 0; - ` - : ''}; -` - -export const InsportsLogo = styled.div` - background-image: url(/images/insports-logo.svg); - background-size: contain; - background-repeat: no-repeat; - width: 80px; - height: 25px; - margin-right: 25px; - position: relative; - - - - ${isMobileDevice - ? css` - width: 57px; - height: 18px; - - ::after { - content: ''; - position: absolute; - width: 0.5px; - height: 25px; - background: #FFFFFF; - right: -13px; - top: -3px; - opacity: 0.6; - } - ` - : ''}; -` - -export const ClubsLogo = styled.div` - background-image: url(/images/tunis_clubs.svg); - background-size: contain; - background-repeat: no-repeat; - width: 408px; - height: 86px; -` - -export const MainInfoContainer = styled.div` - ${isMobileDevice - ? css` - margin-top: 50px; - height: 100%; - ` - : ''}; -` - -export const BlockWrapper = styled.div` - height: 100%; - display: flex; - align-items: center; - padding-left: 20%; - width: 100%; - position: relative; - - @media ${devices.laptop} { - padding-left: 5%; - } - @media ${devices.mobile} { - padding-left: 5.4rem; - } - ${isMobileDevice - ? css` - flex-direction: column; - padding: 5.4rem; - @media screen and (orientation: landscape){ - padding-top: 20px; - height: auto; - } - ` - : ''}; -` - -export const ScGradient = styled.div` - content: ''; - position: absolute; - width: 620px; - height: 310px; - border-radius: 50%; - background: rgba(29, 185, 171, 0.4); - opacity: 0.7; - filter: blur(104.135px); - top: 30%; - left: 25px; - z-index: 1; - - ${isMobileDevice - ? css` - filter: blur(50.135px); - border-radius: 40%; - width: 349px; - height: 210px; - left: -35px; - top: -71px; - ` - : ''}; - -` - -export const LigueImg = styled.div` - background-image: url(/images/landing_${() => ( - isMobileDevice - ? 'mobile_ligue_1.png' - : 'ligue_1.png' - )}); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - width: 670px; - height: 156px; - z-index: 2; - - ${isMobileDevice - ? css` - width: 288px; - height: 66px; - ` - : ''}; -` - -export const LigueImgWrapper = styled.div` - display: flex; - align-items: center; - height: 80%; - margin-right: 5%; - position: relative; - - ${isMobileDevice - ? css` - margin-right: 0; - margin-bottom: 83px; - @media screen and (orientation: landscape){ - display: block; - height: 100%; - width: 70%; - } - ` - : ''}; -` - -export const MatchInfo = styled.div` - margin-bottom: 60px; - max-width: 670px; - - ${isMobileDevice - ? css` - width: 100%; - height: 100%; - @media screen and (orientation: landscape){ - padding-top: 0; - } - ` - : ''}; -` - -export const Season = styled.div` - text-transform: uppercase; - background-color: rgba(0,0,0,0.4); - padding: 8px 25px; - color: #B9B9B9; - border-radius: 5px; - font-size: 13px; - font-weight: 600; - display: inline-flex; - margin-bottom: 50px; - - ${isMobileDevice - ? css` - margin-bottom: 15px; - padding: 0.7em 2.5rem; - font-size: 10px; - ` - : ''}; -` - -export const MainInfoTitle = styled.div` - font-weight: 600; - font-size: 2rem; - ${isMobileDevice - ? css` - font-size: 24px; - margin-bottom: 25px; - ` - : ''}; -` - -export const MainInfoButton = styled(ButtonSolid)` - width: auto; - height: 70px; - font-size: 24px; - font-weight: 600; - border-radius: 5px; - margin-bottom: 50px; - - ${isMobileDevice - ? css` - width: 100%; - font-size: 17px; - margin-bottom: 30px; - height: 40px; - ` - : ''}; -` - -export const MainInfoText = styled.div` - margin: 40px 0; - font-size: 17px; - line-height: 150%; - ${isMobileDevice - ? css` - font-size: 12px; - margin: 0 0 25px; - letter-spacing: 0.1px; - ` - : ''}; -` - -export const Footer = styled.div` - font-size: 14px; - background-color: black; - padding: 16px 0; - padding-left: 20%; - width: 100%; - @media ${devices.laptop} { - padding-left: 5%; - } - @media ${devices.mobile} { - padding-left: 35px; - } - ${isMobileDevice - ? css` - display: none; - ` - : ''}; -` - -export const FooterRights = styled.div` - opacity: .5; - ${isMobileDevice - ? css` - font-size: 12px; - ` - : ''}; -` diff --git a/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx index 9c86901f..55ffac48 100644 --- a/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx +++ b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx @@ -10,7 +10,6 @@ export const ScModal = styled(BaseModal)` background-color: rgba(0, 0, 0, 0.7); ${ModalWindow} { - background-color: #333333; border-radius: 5px; display: flex; justify-content: center;