From 5aeabd7ece97da706362c70068ae0c02ad5bfae8 Mon Sep 17 00:00:00 2001 From: Serg <936x936@gmail.com> Date: Wed, 10 Nov 2021 09:52:36 +0300 Subject: [PATCH] Ott 1867 facr logo (#556) * fix(ott-1867): change facr logo * fix(ott-1867): add facr logo * fix(ott-1867): add privacy policy link * fix(ott-1867): fix auth urls * fix(ott-1867): fix pr --- Makefile | 3 - public/images/facr-logo.svg | 116 ++++++++++-------- public/images/powered-instat-logo.svg | 10 ++ src/config/clients/facr.tsx | 11 +- src/config/clients/instat.tsx | 2 + src/config/clients/types.tsx | 3 + src/features/ProfileHeader/styled.tsx | 2 +- .../UserAccount/components/Header/index.tsx | 10 +- .../components/PersonalInfoForm/config.tsx | 7 ++ .../components/PersonalInfoForm/index.tsx | 5 +- src/features/UserAccount/index.tsx | 9 +- src/features/UserAccount/styled.tsx | 13 ++ 12 files changed, 122 insertions(+), 69 deletions(-) create mode 100644 public/images/powered-instat-logo.svg diff --git a/Makefile b/Makefile index 4b67be7d..6af6f3b9 100644 --- a/Makefile +++ b/Makefile @@ -54,9 +54,6 @@ 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 index 0fdcd14e..793edb19 100644 --- a/public/images/facr-logo.svg +++ b/public/images/facr-logo.svg @@ -1,58 +1,68 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + diff --git a/public/images/powered-instat-logo.svg b/public/images/powered-instat-logo.svg new file mode 100644 index 00000000..7524b01e --- /dev/null +++ b/public/images/powered-instat-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index 8fb1cbbe..6c8a40f8 100644 --- a/src/config/clients/facr.tsx +++ b/src/config/clients/facr.tsx @@ -25,6 +25,7 @@ export const facr: ClientConfig = { [PROCEDURES.get_player_matches]: params, [PROCEDURES.get_tournament_matches]: params, }, + showPoweredByLogo: true, showSearch: false, styles: { background: '', @@ -36,10 +37,12 @@ export const facr: ClientConfig = { #000000; `, logo: 'facr-logo.svg', - logoHeight: 3.35, - logoWidth: 2.45, - matchLogoHeight: 2.7, + logoHeight: 5, + logoWidth: 6.45, + matchLogoHeight: 3.7, matchLogoTopMargin: 0.6, - matchLogoWidth: 1.9, + matchLogoWidth: 3.5, + userAccountLogoHeight: 3, + userAccountLogoWidth: 3.5, }, } diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx index e2271f15..9e960018 100644 --- a/src/config/clients/instat.tsx +++ b/src/config/clients/instat.tsx @@ -13,5 +13,7 @@ export const instat: ClientConfig = { matchLogoHeight: 1.465, matchLogoTopMargin: 1.14, matchLogoWidth: 6.37, + userAccountLogoHeight: 1.465, + userAccountLogoWidth: 6.37, }, } diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index fc2ccefa..5a6e9469 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -14,6 +14,7 @@ export type ClientConfig = { defaultLanguage?: Languages, disabledPreferences?: boolean, requests?: Record, + showPoweredByLogo?: boolean, showSearch?: boolean, styles: { background?: string, @@ -24,5 +25,7 @@ export type ClientConfig = { matchLogoHeight?: number, matchLogoTopMargin?: number, matchLogoWidth?: number, + userAccountLogoHeight?: number, + userAccountLogoWidth?: number, }, } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index c04880aa..ec6b6054 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -66,7 +66,7 @@ export const HeaderGroup = styled.div` ` export const HeaderLogo = styled(Logo)` - margin-top: 4px; + margin-top: ${({ isMatchPage }) => (isMatchPage ? '4px' : '10px')}; ${({ isMatchPage }) => (isMatchPage ? css` width: ${client.styles.matchLogoWidth}rem; diff --git a/src/features/UserAccount/components/Header/index.tsx b/src/features/UserAccount/components/Header/index.tsx index 7a1b3964..94e66067 100644 --- a/src/features/UserAccount/components/Header/index.tsx +++ b/src/features/UserAccount/components/Header/index.tsx @@ -4,6 +4,7 @@ import styled, { css } from 'styled-components/macro' import { devices, PAGES } from 'config' import { isMobileDevice } from 'config/userAgent' +import { client } from 'config/clients' import { HeaderGroup } from 'features/ProfileHeader/styled' @@ -38,17 +39,22 @@ const CustomHeaderGroup = styled(HeaderGroup)` const HomeIcon = styled.div` display: block; width: 30px; - height:30px; + height: 30px; background-size: contain; background-repeat: no-repeat; background-image: url(/images/home.png); ` +export const HeaderLogo = styled(Logo)` + width: ${client.styles.userAccountLogoWidth}rem; + height: ${client.styles.userAccountLogoHeight}rem; +` + export const Header = () => ( - + diff --git a/src/features/UserAccount/components/PersonalInfoForm/config.tsx b/src/features/UserAccount/components/PersonalInfoForm/config.tsx index 72055170..47b35dcb 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/config.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/config.tsx @@ -1,5 +1,8 @@ import map from 'lodash/map' +import { client } from 'config/clients' +import { AUTH_SERVICE } from 'config/routes' + import type { Languages } from 'config/languages' import { langsList } from 'config/languages' @@ -12,3 +15,7 @@ export const langOptions = map(langsList, (lang) => ({ id: lang.locale, name: lang.title, })) + +export const privacyLink = ( + `${AUTH_SERVICE}/terms-and-conditions?client_id=${client.auth.clientId}` +) diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index 085d9fb7..39bda269 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/index.tsx @@ -1,5 +1,4 @@ import { formIds } from 'config/form' -import { AUTH_SERVICE } from 'config/routes' import { Combobox } from 'features/Combobox' import { Input } from 'features/Common' @@ -10,7 +9,7 @@ import { ArrowLoader } from 'features/ArrowLoader' import type { Props } from './hooks/useUserInfo' import { useUserInfo } from './hooks/useUserInfo' -import { langOptions } from './config' +import { langOptions, privacyLink } from './config' import { SolidButton } from '../../styled' import { Form, @@ -111,7 +110,7 @@ export const PersonalInfoForm = (props: Props) => { diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx index b9613a6b..b7a09bf5 100644 --- a/src/features/UserAccount/index.tsx +++ b/src/features/UserAccount/index.tsx @@ -2,6 +2,7 @@ import { Route } from 'react-router-dom' import { PAGES } from 'config' import { isProduction } from 'config/env' +import { client } from 'config/clients' import { userAccountLexics } from 'config/lexics/userAccount' import { usePageLogger } from 'hooks/usePageLogger' @@ -17,12 +18,13 @@ import { PagePaymentsHistory } from './components/PagePaymentsHistory' import { ScoreSwitch } from './components/ScoreSwitch' import { LogoutButton } from './components/LogoutButton' import { - UserAccountWrapper, - ContentWrapper, - Body, Aside, + Body, + ContentWrapper, + Logo, Navigations, StyledLink, + UserAccountWrapper, } from './styled' const UserAccount = () => { @@ -69,6 +71,7 @@ const UserAccount = () => { + {client.showPoweredByLogo && } ) diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx index da752007..39cad246 100644 --- a/src/features/UserAccount/styled.tsx +++ b/src/features/UserAccount/styled.tsx @@ -248,3 +248,16 @@ export const InlineButton = styled.button` opacity: 0.5; } ` + +export const Logo = styled.div` + display: block; + background-size: contain; + background-repeat: no-repeat; + background-image: url(/images/powered-instat-logo.svg); + position: absolute; + bottom: 4rem; + right: 0; + margin-right: 2.7rem; + width: 4rem; + height: 2.5rem; +`