<commit_before>import React, { FC } from "react"
import styled from "styled-components"
import {
  ArrowLeftIcon,
  BorderBox,
  Box,
  Flex,
  FlexProps,
  Icon,
  Path,
  Sans,
  Separator,
  Title,
  color,
} from "@artsy/palette"
import { RouterLink } from "v2/Artsy/Router/RouterLink"
import { Media } from "v2/Utils/Responsive"
import { DETAIL_BOX_ANIMATION } from "./Details"

interface BorderedFlexProps extends FlexProps {
  bordered?: boolean
}
const BorderedFlex = styled(Flex)<BorderedFlexProps>`
  ${props =>
    props.bordered ? `border-right: 1px solid ${color("black10")};` : ""}
  height: 100%;
`

const ConversationHeaderContainer = styled(Flex)`
  position: fixed;
  top: 59px;
  left: 0;
  right: 0;
  border-bottom: 1px solid ${color("black10")};
  background: white;
`

interface DetailsProps {
  showDetails: boolean
  setShowDetails: (boolean) => void
}
interface ConversationHeaderProps extends DetailsProps {
  partnerName: string
}
export const ConversationHeader: FC<ConversationHeaderProps> = ({
  partnerName,
  showDetails,
  setShowDetails,
}) => {
  return (
    <ConversationHeaderContainer
      height="55px"
      px={2}
      alignItems="center"
      justifyContent="space-between"
      width="100%"
    >
      <RouterLink to={`/user/conversations`}>
        <ArrowLeftIcon />
      </RouterLink>
      <Sans size="3t" weight="medium">
        Conversation with {partnerName}
      </Sans>
      <DetailIcon showDetails={showDetails} setShowDetails={setShowDetails} />
    </ConversationHeaderContainer>
  )
}

export const EmptyInboxHeader: FC<{}> = () => {
  return (
    // TODO: Once Palette is updated, customize border for BorderBox.
    <BorderBox height="85px" py={1} alignItems="flex-end">
      <Sans size="6" weight="medium">
        Inbox
      </Sans>
    </BorderBox>
  )
}

interface MobileInboxHeaderProps extends FlexProps, DetailsProps {}

export const MobileInboxHeader: FC<Partial<MobileInboxHeaderProps>> = props => {
  return (
    <Flex
      justifyContent="flex-end"
      flexDirection="column"
      height="85px"
      {...props}
    >
      <Sans size="6" weight="medium" ml={1}>
        Inbox
      </Sans>
      <Separator mt={1} />
    </Flex>
  )
}<commit_msg>Migrate to Flex for conversations empty state header<commit_after>import React, { FC } from "react"
import styled from "styled-components"
import {
  ArrowLeftIcon,
  Box,
  Flex,
  FlexProps,
  Icon,
  Path,
  Sans,
  Separator,
  Title,
  color,
} from "@artsy/palette"
import { RouterLink } from "v2/Artsy/Router/RouterLink"
import { Media } from "v2/Utils/Responsive"
import { DETAIL_BOX_ANIMATION } from "./Details"

interface BorderedFlexProps extends FlexProps {
  bordered?: boolean
}
const BorderedFlex = styled(Flex)<BorderedFlexProps>`
  ${props =>
    props.bordered ? `border-right: 1px solid ${color("black10")};` : ""}
  height: 100%;
`

const ConversationHeaderContainer = styled(Flex)`
  position: fixed;
  top: 59px;
  left: 0;
  right: 0;
  border-bottom: 1px solid ${color("black10")};
  background: white;
`

interface DetailsProps {
  showDetails: boolean
  setShowDetails: (boolean) => void
}
interface ConversationHeaderProps extends DetailsProps {
  partnerName: string
}
export const ConversationHeader: FC<ConversationHeaderProps> = ({
  partnerName,
  showDetails,
  setShowDetails,
}) => {
  return (
    <ConversationHeaderContainer
      height="55px"
      px={2}
      alignItems="center"
      justifyContent="space-between"
      width="100%"
    >
      <RouterLink to={`/user/conversations`}>
        <ArrowLeftIcon />
      </RouterLink>
      <Sans size="3t" weight="medium">
        Conversation with {partnerName}
      </Sans>
      <DetailIcon showDetails={showDetails} setShowDetails={setShowDetails} />
    </ConversationHeaderContainer>
  )
}

export const EmptyInboxHeader: FC<{}> = () => {
  return (
    <Flex
      height="85px"
      px={2}
      py={1}
      alignItems="flex-end"
      borderBottom={`1px solid ${color("black10")}`}
    >
      <Sans size="6" weight="medium">
        Inbox
      </Sans>
    </Flex>
  )
}

interface MobileInboxHeaderProps extends FlexProps, DetailsProps {}

export const MobileInboxHeader: FC<Partial<MobileInboxHeaderProps>> = props => {
  return (
    <Flex
      justifyContent="flex-end"
      flexDirection="column"
      height="85px"
      {...props}
    >
      <Sans size="6" weight="medium" ml={1}>
        Inbox
      </Sans>
      <Separator mt={1} />
    </Flex>
  )
}
{'fraction_non_alphanumeric': 0.13302242949145016, 'fraction_numerical': 0.014656895403064623, 'mean_word_length': 3.377065111758989, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3013904', 'n_tokens_mistral': 1523, 'n_tokens_neox': 1461, 'n_words': 321}