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

@@ -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
 

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,
+    logoHeight: 5,
-    logoWidth: 2.45,
+    logoWidth: 6.45,
-    matchLogoHeight: 2.7,
+    matchLogoHeight: 3.7,
     matchLogoTopMargin: 0.6,
-    matchLogoWidth: 1.9,
+    matchLogoWidth: 3.5,
+    userAccountLogoHeight: 3,
+    userAccountLogoWidth: 3.5,
   },
 }

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,
   },
 }

src/config/clients/types.tsx

@@ -14,6 +14,7 @@ export type ClientConfig = {
   defaultLanguage?: Languages,
   disabledPreferences?: boolean,
   requests?: Record<ProcedureName, RequestParameters>,
+  showPoweredByLogo?: boolean,
   showSearch?: boolean,
   styles: {
     background?: string,
@@ -24,5 +25,7 @@ export type ClientConfig = {
     matchLogoHeight?: number,
     matchLogoTopMargin?: number,
     matchLogoWidth?: number,
+    userAccountLogoHeight?: number,
+    userAccountLogoWidth?: number,
   },
 }

src/features/ProfileHeader/styled.tsx

@@ -66,7 +66,7 @@ export const HeaderGroup = styled.div<Props>`
 `
 
 export const HeaderLogo = styled(Logo)`
-  margin-top: 4px;
+  margin-top: ${({ isMatchPage }) => (isMatchPage ? '4px' : '10px')};
   
   ${({ isMatchPage }) => (isMatchPage ? css`
     width: ${client.styles.matchLogoWidth}rem;

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 = () => (
   <HeaderStyled>
     <CustomHeaderGroup>
       <Link to={PAGES.home}>
-        <Logo />
+        <HeaderLogo />
       </Link>
       <Link to={PAGES.home}>
         <HomeIcon />

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}`
+)

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) => {
       </ButtonWrapper>
       <PrivacyPolicyLink
         target='_blank'
-        href={`${AUTH_SERVICE}/terms-and-conditions`}
+        href={privacyLink}
       >
         <T9n t='privacy_policy_and_statement' />
       </PrivacyPolicyLink>

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 = () => {
             <PagePaymentsHistory />
           </Route>
         </ContentWrapper>
+        {client.showPoweredByLogo && <Logo />}
       </Body>
     </UserAccountWrapper>
   )

src/features/UserAccount/styled.tsx

@@ -248,3 +248,16 @@ export const InlineButton = styled.button<InlineButtonProps>`
     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;
+`