Ott 2118 facr logo

Makefile

@@ -51,9 +51,9 @@ prod: clean
 	REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW \
 	npm run build
 
-	rsync -zavP build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/wwwroot/
-	rsync -zavP build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/wwwroot/
-	rsync -zavP build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/wwwroot/
 
 preprod: clean
 	REACT_APP_TYPE=ott \
@@ -62,7 +62,7 @@ preprod: clean
 	REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW \
 	npm run build
 
-	rsync -zavP build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/
 
 facr-prod: clean
 	REACT_APP_TYPE=ott \
@@ -71,29 +71,29 @@ facr-prod: clean
 	REACT_APP_CLIENT=facr \
 	npm run build
 
-	rsync -zavP build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/facr-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/facr-wwwroot/
-	rsync -zavP build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/facr-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/facr-wwwroot/
-	rsync -zavP build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/facr-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/facr-wwwroot/
 
 deploy-all: prod preprod facr-prod
 
 stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/
 
 a-stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/a-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/a-wwwroot/
 
 b-stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/
 
 c-stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/
 
 d-stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/
 
 e-stage: build
-	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/e-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/e-wwwroot/
 
 test:
 	npm test

src/config/clients/facr.tsx

@@ -32,7 +32,6 @@ export const facr: ClientConfig = {
     [PROCEDURES.get_player_matches]: params,
     [PROCEDURES.get_tournament_matches]: params,
   },
-  showPoweredByLogo: true,
   showSearch: false,
   styles: {
     background: '',
@@ -44,13 +43,13 @@ export const facr: ClientConfig = {
       #000000;
     `,
     logo: 'facr-logo.svg',
-    logoHeight: 5,
+    logoHeight: 4.76,
-    logoWidth: 6.45,
+    logoLeft: 1.17,
-    matchLogoHeight: 3.7,
+    logoTop: 1.74,
-    matchLogoTopMargin: 0.6,
+    logoWidth: 6.22,
-    matchLogoWidth: 3.5,
+    matchLogoHeight: 2.6,
-    userAccountLogoHeight: 3,
+    matchLogoTopMargin: 0.9,
-    userAccountLogoWidth: 3.5,
+    matchLogoWidth: 3.4,
   },
   title: 'FACR.TV - The home of Czech football streaming',
 }

src/config/clients/instat.tsx

@@ -16,12 +16,11 @@ export const instat: ClientConfig = {
     background: 'background-image: url(/images/Checker.png);',
     logo: 'logo.svg',
     logoHeight: 1.465,
+    logoLeft: 1.7,
+    logoTop: 1.5,
     logoWidth: 6.37,
     matchLogoHeight: 1.465,
-    matchLogoTopMargin: 1.14,
     matchLogoWidth: 6.37,
-    userAccountLogoHeight: 1.465,
-    userAccountLogoWidth: 6.37,
   },
   title: 'InStat TV - The Home of Sports Streaming',
 }

src/config/clients/types.tsx

@@ -27,19 +27,18 @@ export type ClientConfig = {
   name: ClientNames,
   privacyLink: string,
   requests?: Record<ProcedureName, RequestParameters>,
-  showPoweredByLogo?: boolean,
   showSearch?: boolean,
   styles: {
     background?: string,
     homePageHeader?: StyledCss,
     logo: string,
     logoHeight?: number,
+    logoLeft?: number,
+    logoTop?: number,
     logoWidth?: number,
     matchLogoHeight?: number,
     matchLogoTopMargin?: number,
     matchLogoWidth?: number,
-    userAccountLogoHeight?: number,
-    userAccountLogoWidth?: number,
   },
   title: string,
 }

src/features/HomePage/components/Header/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 
-import { PAGES } from 'config'
+import { PAGES } from 'config/pages'
+import { client } from 'config/clients'
 
 import { Menu } from 'features/Menu'
 import { ScoreSwitch } from 'features/MatchSwitches'
@@ -16,8 +17,11 @@ import {
 
 export const Header = () => (
   <HeaderStyled>
-    <Position left={1.7}>
+    <Position
-      <HeaderGroup marginTop={0.19}>
+      top={client.styles.logoTop}
+      left={client.styles.logoLeft}
+    >
+      <HeaderGroup>
         <Link to={PAGES.home}>
           <HeaderLogo />
         </Link>
@@ -26,7 +30,7 @@ export const Header = () => (
     </Position>
     <DateFilter />
     <Position right={0.71}>
-      <HeaderGroup height={2.28}>
+      <HeaderGroup>
         <ScoreSwitch />
         <Menu />
       </HeaderGroup>

src/features/Logo/index.tsx

@@ -14,15 +14,16 @@ export const Logo = styled.div<Props>`
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(/images/${client.styles.logo});
+  background-position: center;
 
   width: ${client.styles.logoWidth}rem;
   height: ${client.styles.logoHeight}rem;
-  
+
   ${isMobileDevice
     ? css`
       width: 144px;
       height: 33px;
-      
+
       @media screen and (orientation: landscape){
         width: 92px;
         height: 22px;

src/features/MatchSwitches/styled.tsx

@@ -45,7 +45,6 @@ export const Icon = styled.div<IconProps>`
   width: ${({ width = 1.7 }) => width}rem;
   height: ${({ height = 2.28 }) => height}rem;
   position: relative;
-  top: 3px;
   color: white;
   background-size: contain;
   background-repeat: no-repeat;
@@ -59,7 +58,7 @@ export const Icon = styled.div<IconProps>`
         background-image: url(/images/${iconName}-off.svg);
       `
   )};
-  
+
     ${isMobileDevice
     ? css`
         width: 51px;

src/features/ProfileHeader/index.tsx

@@ -44,8 +44,12 @@ export const ProfileHeader = ({
         color={headerColor || color}
         height={height}
       >
-        <Position isMatchPage={isMatchPage()} left={1.7}>
+        <Position
-          <HeaderGroup marginTop={0.19}>
+          isMatchPage={isMatchPage()}
+          top={client.styles.logoTop}
+          left={client.styles.logoLeft}
+        >
+          <HeaderGroup>
             <Link to={PAGES.home}>
               <HeaderLogo isMatchPage={isMatchPage()} />
             </Link>
@@ -57,7 +61,7 @@ export const ProfileHeader = ({
         {children}
 
         <Position right={0.71}>
-          <HeaderGroup height={2.28}>
+          <HeaderGroup>
             <ScoreSwitch />
             <Menu />
           </HeaderGroup>

src/features/ProfileHeader/styled.tsx

@@ -33,12 +33,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
   @media (max-width: 450px){
     height: 124px;
   }
-  
+
   ${({ color, headerImage }) => (headerImage
     ? css`background: url(${headerImage});`
     : client.styles.homePageHeader || defaultHeaderStyles(color)
   )}
-  
+
   ${isMobileDevice
     ? css`
       height: auto;
@@ -54,10 +54,10 @@ type Props = {
 
 export const HeaderGroup = styled.div<Props>`
   display: flex;
-  
+
   ${({ height }) => (height ? `height: ${height}rem` : '')};
   ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
-  
+
   ${isMobileDevice
     ? css`
       position: relative;
@@ -67,18 +67,16 @@ export const HeaderGroup = styled.div<Props>`
 `
 
 export const HeaderLogo = styled(Logo)`
-  margin-top: ${({ isMatchPage }) => (isMatchPage ? '4px' : '10px')};
-  
   ${({ isMatchPage }) => (isMatchPage ? css`
     width: ${client.styles.matchLogoWidth}rem;
     height: ${client.styles.matchLogoHeight}rem;
   ` : '')}
-  
+
   ${isMobileDevice
     ? css`
         width: 85px;
         height: 20px;
-        
+
         @media (max-width: 450px){
         left: 48vw;
         top: 5px;
@@ -93,15 +91,18 @@ type PositionProps = {
   isMatchPage?: boolean,
   left?: number,
   right?: number,
+  top?: number,
 }
 
 export const Position = styled.div<PositionProps>`
   position: absolute;
-  
+
-  top: ${({ isMatchPage }) => (
+  top: ${({ isMatchPage, top = 1.14 }) => (
-    isMatchPage ? client.styles.matchLogoTopMargin : '1.14'
+    isMatchPage
+      ? client.styles.matchLogoTopMargin ?? top
+      : top
   )}rem;
-  
+
   ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
   ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
 `

src/features/UserAccount/components/Header/index.tsx

@@ -6,14 +6,15 @@ import { devices, PAGES } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 import { client } from 'config/clients'
 
-import { HeaderGroup } from 'features/ProfileHeader/styled'
-
 import { Logo } from 'features/Logo'
 
 const HeaderStyled = styled.header`
   display: flex;
   align-items: center;
   margin-bottom: 65px;
+  width: 100%;
+  height: ${client.styles.logoHeight}rem;
+  justify-content: space-between;
 
   @media ${devices.tablet} {
     margin-bottom: 0;
@@ -21,7 +22,6 @@ const HeaderStyled = styled.header`
 
   ${isMobileDevice
     ? css`
-      justify-content: center;
       @media (max-width: 650px){
         margin-bottom: 20px;
       }
@@ -31,10 +31,6 @@ const HeaderStyled = styled.header`
     `
     : ''};
 `
-const CustomHeaderGroup = styled(HeaderGroup)`
-  width: 100%;
-  justify-content: space-between;
-`
 
 const HomeIcon = styled.div`
   display: block;
@@ -46,19 +42,25 @@ const HomeIcon = styled.div`
 `
 
 export const HeaderLogo = styled(Logo)`
-  width: ${client.styles.userAccountLogoWidth}rem;
+  position: absolute;
-  height: ${client.styles.userAccountLogoHeight}rem;
+  top: ${client.styles.logoTop}rem;
+  left: ${client.styles.logoLeft}rem;
+
+  ${isMobileDevice
+    ? css`
+      left: 50%;
+      transform: translateX(-50%);
+    `
+    : ''}
 `
 
 export const Header = () => (
   <HeaderStyled>
-    <CustomHeaderGroup>
+    <Link to={PAGES.home}>
-      <Link to={PAGES.home}>
+      <HeaderLogo />
-        <HeaderLogo />
+    </Link>
-      </Link>
+    <Link to={PAGES.home}>
-      <Link to={PAGES.home}>
+      <HomeIcon />
-        <HomeIcon />
+    </Link>
-      </Link>
-    </CustomHeaderGroup>
   </HeaderStyled>
 )

src/features/UserAccount/index.tsx

@@ -2,7 +2,6 @@ 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'
@@ -21,7 +20,6 @@ import {
   Aside,
   Body,
   ContentWrapper,
-  Logo,
   Navigations,
   StyledLink,
   UserAccountWrapper,
@@ -71,7 +69,6 @@ const UserAccount = () => {
             <PagePaymentsHistory />
           </Route>
         </ContentWrapper>
-        {client.showPoweredByLogo && <Logo />}
       </Body>
     </UserAccountWrapper>
   )

src/features/UserAccount/styled.tsx

@@ -248,16 +248,3 @@ 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;
-`