feat(ott-1696): add header image on team and tournament profile (#512)

* feat(ott-1696): add header image on team and tournament profile

* feat(ott-1696): fix pr

* Update src/features/Common/Input/styled.tsx

Co-authored-by: Mirlan <m.maksitaliev@gmail.com>

src/features/Common/Input/index.tsx

@@ -27,6 +27,7 @@ type Props = {
   labelLexic?: string,
   labelWidth?: number,
   maxLength?: number,
+  noShadow?: boolean,
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void,
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void,
@@ -50,6 +51,7 @@ export const Input = ({
   labelLexic,
   labelWidth,
   maxLength,
+  noShadow,
   onBlur,
   onChange,
   onFocus,
@@ -70,6 +72,7 @@ export const Input = ({
         wrapperWidth={wrapperWidth}
         hasRightIcon={editIcon}
         error={error}
+        noShadow={noShadow}
       >
         <Label>
           <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>

src/features/Common/Input/styled.tsx

@@ -9,6 +9,7 @@ import { isMobileDevice } from 'config/userAgent'
 export type WrapperProps = {
   error?: string | null,
   hasRightIcon?: boolean,
+  noShadow?: boolean,
   wrapperWidth?: number,
 }
 
@@ -23,7 +24,11 @@ export const wrapperStyles = css<WrapperProps>`
   display: flex;
   align-items: center;
   background-color: #3F3F3F;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: ${({ noShadow }) => (
+    noShadow
+      ? ''
+      : '0px 1px 1px rgba(0, 0, 0, 0.3)'
+  )};
   border-radius: 2px;
   border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))};
   border-width: 1px;

src/features/ProfileHeader/index.tsx

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react'
 import { Fragment } from 'react'
 import { Link } from 'react-router-dom'
 
+import isNull from 'lodash/isNull'
+
 import { PAGES } from 'config'
 
 import { Menu } from 'features/Menu'
@@ -19,6 +21,7 @@ import {
 type Props = {
   children?: ReactNode,
   color?: string,
+  headerImage?: string | null,
   height?: number,
   profileId?: number,
 }
@@ -26,19 +29,25 @@ type Props = {
 export const ProfileHeader = ({
   children,
   color: headerColor,
+  headerImage,
   height,
   profileId,
 }: Props) => {
   const color = useProfileColor(profileId)
+  const noShadow = !isNull(headerImage)
   return (
     <Fragment>
-      <HeaderStyled color={headerColor || color} height={height}>
+      <HeaderStyled
+        headerImage={headerImage}
+        color={headerColor || color}
+        height={height}
+      >
         <Position left={1.7}>
           <HeaderGroup marginTop={0.19}>
             <Link to={PAGES.home}>
               <HeaderLogo />
             </Link>
-            <Search />
+            <Search noShadow={noShadow} />
           </HeaderGroup>
         </Position>
 

src/features/ProfileHeader/styled.tsx

@@ -9,6 +9,7 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
 type HeaderProps = {
   color?: string,
+  headerImage?: string | null,
   height?: number,
 }
 
@@ -17,12 +18,16 @@ export const HeaderStyled = styled.header<HeaderProps>`
   display: flex;
   justify-content: center;
   height: ${({ height = 8.5 }) => height}rem;
+  ${({ color, headerImage }) => (headerImage
+    ? css`background: url(${headerImage})`
+    : css`  
       background: linear-gradient(
         187deg,
-    ${({ color = DEFAULT_HEADER_COLOR }) => color} -4.49%,
+        ${color || DEFAULT_HEADER_COLOR} -4.49%,
         rgba(0, 0, 0, 0) 68.29%),
         #000000;
-  z-index: 10;
+      z-index: 10;`
+  )}
   ${isMobileDevice
     ? css`
      height: 124px;

src/features/Search/index.tsx

@@ -24,7 +24,11 @@ import {
   ClearButton,
 } from './styled'
 
-export const Search = () => {
+type Props = {
+  noShadow?: boolean,
+}
+
+export const Search = ({ noShadow }: Props) => {
   const {
     clearQuery,
     close,
@@ -54,6 +58,7 @@ export const Search = () => {
             type='search'
             value={query}
             onChange={onChange}
+            noShadow={noShadow}
           />
           {(query || isOpen) && <ClearButton onClick={clearQuery} />}
           {isFetching && (

src/features/TeamPage/hooks.tsx

@@ -48,6 +48,7 @@ export const useTeamPage = () => {
 
   return {
     fetchMatches,
+    headerImage: teamProfile?.header_image,
     profile,
     sportType,
     teamId,

src/features/TeamPage/index.tsx

@@ -16,13 +16,17 @@ const TeamPage = () => {
   usePageLogger()
   const {
     fetchMatches,
+    headerImage,
     profile,
     teamId,
   } = useTeamPage()
 
   return (
     <PageWrapper>
-      <ProfileHeader profileId={teamId}>
+      <ProfileHeader
+        headerImage={headerImage}
+        profileId={teamId}
+      >
         {profile && <ProfileCard profile={profile} />}
       </ProfileHeader>
       <Main>

src/features/TournamentPage/hooks.tsx

@@ -46,6 +46,7 @@ export const useTournamentPage = () => {
 
   return {
     fetchMatches,
+    headerImage: tournamentProfile?.header_image,
     infoItems: [country],
     profile,
     tournamentId,

src/features/TournamentPage/index.tsx

@@ -16,13 +16,17 @@ const TournamentPage = () => {
   usePageLogger()
   const {
     fetchMatches,
+    headerImage,
     profile,
     tournamentId,
   } = useTournamentPage()
 
   return (
     <PageWrapper>
-      <ProfileHeader profileId={tournamentId}>
+      <ProfileHeader
+        headerImage={headerImage}
+        profileId={tournamentId}
+      >
         {profile && <ProfileCard profile={profile} />}
       </ProfileHeader>
       <Main>

src/requests/getTeamInfo.tsx

@@ -15,6 +15,7 @@ type NameObject = {
 
 export type TeamInfo = {
   country: NameObject,
+  header_image: string | null,
   id: number,
   is_favorite: boolean,
   name_eng: string,

src/requests/getTournamentInfo.tsx

@@ -12,6 +12,7 @@ export type TournamentInfo = {
     name_eng: string,
     name_rus: string,
   },
+  header_image: string | null,
   id: number,
   is_favorite: boolean,
   name_eng: string,