Ott 1766 facr header styles (#522)

* fix(1766): added facr home header page header styles

* fix(1766): shadow around search only when focused

src/config/clients/facr.tsx

@@ -1,3 +1,5 @@
+import { css } from 'styled-components/macro'
+
 import type { ClientConfig } from './types'
 import { PROCEDURES } from '../procedures'
 
@@ -22,6 +24,13 @@ export const facr: ClientConfig = {
   },
   styles: {
     background: '',
+    homePageHeader: css`
+      background: linear-gradient(
+      45.42deg,
+      #00257A 51.04%,
+      #000000 80.83%),
+      #000000;
+    `,
     logo: 'facr-logo.svg',
     logoHeight: 3.35,
     logoWidth: 2.45,

src/config/clients/types.tsx

@@ -1,8 +1,12 @@
+import { css } from 'styled-components/macro'
+
 import type { Languages } from 'config/languages'
 
 type ProcedureName = string
 type RequestParameters = any
 
+type StyledCss = ReturnType<typeof css>
+
 export type ClientConfig = {
   auth: {
     clientId: string,
@@ -13,6 +17,7 @@ export type ClientConfig = {
   requests?: Record<ProcedureName, RequestParameters>,
   styles: {
     background?: string,
+    homePageHeader?: StyledCss,
     logo: string,
     logoHeight?: number,
     logoWidth?: number,

src/features/Common/Input/index.tsx

@@ -27,7 +27,6 @@ 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,
@@ -51,7 +50,6 @@ export const Input = ({
   labelLexic,
   labelWidth,
   maxLength,
-  noShadow,
   onBlur,
   onChange,
   onFocus,
@@ -72,7 +70,6 @@ export const Input = ({
         wrapperWidth={wrapperWidth}
         hasRightIcon={editIcon}
         error={error}
-        noShadow={noShadow}
       >
         <Label>
           <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>

src/features/Common/Input/styled.tsx

@@ -9,7 +9,6 @@ import { isMobileDevice } from 'config/userAgent'
 export type WrapperProps = {
   error?: string | null,
   hasRightIcon?: boolean,
-  noShadow?: boolean,
   wrapperWidth?: number,
 }
 
@@ -24,11 +23,7 @@ export const wrapperStyles = css<WrapperProps>`
   display: flex;
   align-items: center;
   background-color: #3F3F3F;
-  box-shadow: ${({ noShadow }) => (
-    noShadow
-      ? ''
-      : '0px 1px 1px rgba(0, 0, 0, 0.3)'
-  )};
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-radius: 2px;
   border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))};
   border-width: 1px;
@@ -123,7 +118,7 @@ const inputStyles = css<InputProps>`
       margin-left: 15px;
     `
     : ''};
-  
+
   @media ${devices.tablet} {
     font-size: 1.8rem;
   }
@@ -177,7 +172,7 @@ export const Column = styled.div<ColumnProps>`
         max-width: 100%;
       }
     `
-    : ''}  
+    : ''}
 `
 
 type ErrorProps = {
@@ -225,7 +220,7 @@ export const Icon = styled.div<{ image: string }>`
     ? css`
       width: 18px;
       height: 18px;
-      right: 11px; 
+      right: 11px;
     `
     : ''}
 `

src/features/ProfileHeader/index.tsx

@@ -2,8 +2,6 @@ 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'
@@ -34,7 +32,6 @@ export const ProfileHeader = ({
   profileId,
 }: Props) => {
   const color = useProfileColor(profileId)
-  const noShadow = !isNull(headerImage)
   return (
     <Fragment>
       <HeaderStyled
@@ -47,7 +44,7 @@ export const ProfileHeader = ({
             <Link to={PAGES.home}>
               <HeaderLogo />
             </Link>
-            <Search noShadow={noShadow} />
+            <Search />
           </HeaderGroup>
         </Position>
 

src/features/ProfileHeader/styled.tsx

@@ -4,9 +4,19 @@ import { isMobileDevice } from 'config/userAgent'
 import isUndefined from 'lodash/isUndefined'
 
 import { Logo } from 'features/Logo'
+import { client } from 'config/clients'
 
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
+const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => css`
+  background: linear-gradient(
+    187deg,
+    ${color} -4.49%,
+    #000000 68.29%),
+    #000000;
+  z-index: 10;
+`
+
 type HeaderProps = {
   color?: string,
   headerImage?: string | null,
@@ -19,14 +29,8 @@ export const HeaderStyled = styled.header<HeaderProps>`
   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} -4.49%,
-        rgba(0, 0, 0, 0) 68.29%),
-        #000000;
-      z-index: 10;`
+    ? css`background: url(${headerImage});`
+    : client.styles.homePageHeader || defaultHeaderStyles(color)
   )}
   ${isMobileDevice
     ? css`

src/features/Search/index.tsx

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

src/features/Search/styled.tsx

@@ -57,6 +57,7 @@ const expandedStyles = css`
     width: 19.3rem;
     background: #292929;
     border-radius: 10px;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
     ${isMobileDevice
     ? css`
       max-width: 100%;
@@ -87,6 +88,7 @@ export const Form = styled.form<FormProps>`
     margin: 0;
     padding-left: 0.567rem;
     background-color: transparent;
+    box-shadow: none;
     ${isMobileDevice
     ? css`
      height: 32px;