feat(#2415): added link to the site about company

src/config/lexics/userAccount.tsx

@@ -2,6 +2,7 @@ import { publicLexics } from './public'
 import { paymentLexics } from './payment'
 
 const navigations = {
+  about_the_project: 18170,
   bank_card: 14205,
   logout: 15058,
   my_devices: 15052,

src/config/pages.tsx

@@ -1,4 +1,5 @@
 export const PAGES = {
+  about_the_project: 'https://instatsport.com/InStatTV/ott_platform',
   home: '/',
   match: '/matches',
   player: '/players',

src/features/AuthServiceApp/components/Registration/index.tsx

@@ -20,6 +20,7 @@ import {
   ButtonSolid,
   Error,
   LanguageSelectWrapper,
+  Wrapper,
 } from '../../styled'
 import {
   Label,
@@ -27,6 +28,7 @@ import {
   ButtonOutline,
   CheckboxWrapper,
 } from './styled'
+import { CompanyInfo } from '../../../CompanyInfo'
 
 const Registration = () => {
   const history = useHistory()
@@ -51,6 +53,7 @@ const Registration = () => {
   } = useRegistrationForm()
 
   return (
+    <Wrapper>
       <CenterBlock>
         <Logo />
         <Form onSubmit={handleSubmit}>
@@ -135,6 +138,8 @@ const Registration = () => {
           />
         </Form>
       </CenterBlock>
+      <CompanyInfo textAlign='center' width='450px' />
+    </Wrapper>
   )
 }
 

src/features/CompanyInfo/config.tsx

@@ -3,4 +3,5 @@ export const lexics = [
   18082,
   18083,
   18084,
+  18170,
 ]

src/features/CompanyInfo/index.tsx

@@ -1,10 +1,11 @@
 import { T9n } from 'features/T9n'
 import { useLexicsConfig } from 'features/LexicsStore'
+import { PAGES } from 'config'
 
 import {
+  CompanyInfoLink,
   CompanyInfoText,
   CompanyInfoWrapper,
-  CompanyName,
 } from './styled'
 import { lexics } from './config'
 
@@ -21,9 +22,15 @@ export const CompanyInfo = ({
 
   return (
     <CompanyInfoWrapper style={{ maxWidth: width, textAlign }}>
-      <CompanyName>
+      <CompanyInfoText>
-        <T9n t='18081' />
+        <T9n t='18081' />{' | '}
-      </CompanyName>
+        <CompanyInfoLink
+          to={{ pathname: PAGES.about_the_project }}
+          target='_blank'
+        >
+          <T9n t='18170' />
+        </CompanyInfoLink>
+      </CompanyInfoText>
       <CompanyInfoText>
         <T9n t='18082' />
       </CompanyInfoText>

src/features/CompanyInfo/styled.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -8,14 +10,16 @@ export const CompanyInfoWrapper = styled.div`
   font-weight: 400;
   font-size: 12px;
   line-height: 15px;
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.5);
 
   ${isMobileDevice ? css`
     margin-top: 20px;
   ` : ''}
 `
 
-export const CompanyName = styled.div`
-  color: rgba(255, 255, 255, 0.8);
-`
 export const CompanyInfoText = styled.div``
+
+export const CompanyInfoLink = styled(Link)`
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: underline;
+`

src/features/UserAccount/index.tsx

@@ -52,6 +52,13 @@ const UserAccount = () => {
             <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/devices`}>
               <T9n t='my_devices' />
             </StyledLink>
+            <StyledLink
+              disabled={isProduction}
+              target='_blank'
+              to={{ pathname: PAGES.about_the_project }}
+            >
+              <T9n t='about_the_project' />
+            </StyledLink>
 
             <ScoreSwitch />
             <UnsubscribePrompt />