<commit_before>import React, { PureComponent } from 'react'
import styled, { css } from 'styled-components'

import Margin from 'src/dashboard-refactor/components/Margin'
import { Icon } from 'src/dashboard-refactor/styled-components'

import styles, { fonts } from 'src/dashboard-refactor/styles'
import colors from 'src/dashboard-refactor/colors'

const textStyles = `
    font-family: ${fonts.primary.name};
    font-weight: ${fonts.primary.weight.normal};
    font-size: 10px;
    line-height: 15px;
    color: ${fonts.primary.colors.primary};
    cursor: text;
`

const OuterContainer = styled.div`
    height: min-content
    width: 100%;
    padding: 1px;
    background-color: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const InnerContainer = styled.div<{ displayTopBorder?: boolean }>`
    height: 24px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    ${(props) =>
        props.displayTopBorder &&
        css`
            border-top: 0.5px solid ${colors.lighterGrey};
        `}
`

const Input = styled.input<{ isFocused }>`
    ${textStyles}
    width: 100%
    border: none;
    ${(props) => {
        const { primary, secondary } = fonts.primary.colors
        return css`&::placeholder {
            color: ${props.isFocused ? secondary : primary};
            ${textStyles}`
    }}}
    &:focus {
        outline: none;
    }
`

const TextSpan = styled.span<{ bold?: boolean }>`
    ${textStyles}
    ${(props) =>
        props.bold &&
        css`
            font-weight: ${styles.fonts.primary.weight.bold};
        `}
`

const IconContainer = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: start;
`

const StyledIcon = styled(Icon)`
    color: #3a2f45;
`
export interface ListsSidebarSearchBarProps {
    isSearchBarFocused: boolean
    hasPerfectMatch: boolean
    searchQuery?: string
    onListsSidebarSearchBarFocus(): void
    onListsSidebarSearchBarInputChange(): void
    onListsSidebarSearchBarInputClear(): void
}

export default class ListsSidebarSearchBar extends PureComponent<
    ListsSidebarSearchBarProps
> {
    inputRef = React.createRef<HTMLInputElement>()
    componentDidMount = () => {
        if (this.props.isSearchBarFocused) this.inputRef.current.focus()
    }
    renderCreateNew = () => {
        const { searchQuery } = this.props
        return (
            <InnerContainer horizontal="8px" displayTopBorder>
                <Margin right="8px">
                    <TextSpan>Create New:</TextSpan>
                </Margin>
                <TextSpan bold>{searchQuery}</TextSpan>
            </InnerContainer>
        )
    }
    render(): JSX.Element {
        const {
            searchQuery,
            isSearchBarFocused,
            onListsSidebarSearchBarFocus,
            onListsSidebarSearchBarInputChange,
            onListsSidebarSearchBarInputClear,
        } = this.props
        return (
            <OuterContainer>
                <Margin horizontal="8px">
                    <InnerContainer
                        onClick={onListsSidebarSearchBarFocus}
                        horizontal="8px"
                    >
                        <IconContainer>
                            <Margin right="12px">
                                <StyledIcon
                                    heightAndWidth="12px"
                                    path="/img/searchIcon.svg"
                                />
                            </Margin>
                        </IconContainer>
                        <Input
                            placeholder="Search or add collection"
                            isFocused={isSearchBarFocused}
                            ref={this.inputRef}
                            onChange={onListsSidebarSearchBarInputChange}
                            value={searchQuery}
                        />
                        {!!searchQuery && (
                            <IconContainer>
                                <Margin left="12px">
                                    <Icon
                                        heightAndWidth="12px"
                                        path="/img/cross_grey.svg"
                                        onClick={
                                            onListsSidebarSearchBarInputClear
                                        }
                                    />
                                </Margin>
                            </IconContainer>
                        )}
                    </InnerContainer>
                    {!!this.props.searchQuery &&
                        !this.props.hasPerfectMatch &&
                        this.renderCreateNew()}
                </Margin>
            </OuterContainer>
        )
    }
}<commit_msg>Remove Margin component from search bar render<commit_after>import React, { PureComponent } from 'react'
import styled, { css } from 'styled-components'

import Margin from 'src/dashboard-refactor/components/Margin'
import { Icon } from 'src/dashboard-refactor/styled-components'

import styles, { fonts } from 'src/dashboard-refactor/styles'
import colors from 'src/dashboard-refactor/colors'

const textStyles = `
    font-family: ${fonts.primary.name};
    font-weight: ${fonts.primary.weight.normal};
    font-size: 10px;
    line-height: 15px;
    color: ${fonts.primary.colors.primary};
    cursor: text;
`

const OuterContainer = styled.div`
    height: min-content;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const InnerContainer = styled.div<{ displayTopBorder?: boolean }>`
    height: 24px;
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    ${(props) =>
        props.displayTopBorder &&
        css`
            border-top: 0.5px solid ${colors.lighterGrey};
        `}
`

const Input = styled.input<{ isFocused: boolean }>`
    ${textStyles}
    width: 100%
    border: none;
    ${(props) => {
        const { primary, secondary } = fonts.primary.colors
        return css`&::placeholder {
            ${textStyles}
            color: ${props.isFocused ? secondary : primary};
            `
    }}}
    &:focus {
        outline: none;
    }
`

const TextSpan = styled.span<{ bold?: boolean }>`
    ${textStyles}
    ${(props) =>
        props.bold &&
        css`
            font-weight: ${styles.fonts.primary.weight.bold};
        `}
`

const IconContainer = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: start;
`

const StyledIcon = styled(Icon)`
    color: #3a2f45;
`
export interface ListsSidebarSearchBarProps {
    isSearchBarFocused: boolean
    hasPerfectMatch: boolean
    searchQuery?: string
    onListsSidebarSearchBarFocus(): void
    onListsSidebarSearchBarInputChange(): void
    onListsSidebarSearchBarInputClear(): void
}

export default class ListsSidebarSearchBar extends PureComponent<
    ListsSidebarSearchBarProps
> {
    inputRef = React.createRef<HTMLInputElement>()
    componentDidMount = () => {
        if (this.props.isSearchBarFocused) this.inputRef.current.focus()
    }
    renderCreateNew = () => {
        const { searchQuery } = this.props
        return (
            <InnerContainer horizontal="8px" displayTopBorder>
                <Margin right="8px">
                    <TextSpan>Create New:</TextSpan>
                </Margin>
                <TextSpan bold>{searchQuery}</TextSpan>
            </InnerContainer>
        )
    }
    render(): JSX.Element {
        const {
            searchQuery,
            isSearchBarFocused,
            onListsSidebarSearchBarFocus,
            onListsSidebarSearchBarInputChange,
            onListsSidebarSearchBarInputClear,
        } = this.props
        return (
            <OuterContainer>
                <InnerContainer
                    onClick={onListsSidebarSearchBarFocus}
                    horizontal="8px"
                >
                    <IconContainer>
                        <Margin right="12px">
                            <StyledIcon
                                heightAndWidth="12px"
                                path="/img/searchIcon.svg"
                            />
                        </Margin>
                    </IconContainer>
                    <Input
                        placeholder="Search or add collection"
                        isFocused={isSearchBarFocused}
                        ref={this.inputRef}
                        onChange={onListsSidebarSearchBarInputChange}
                        value={searchQuery}
                    />
                    {!!searchQuery && (
                        <IconContainer>
                            <Margin left="12px">
                                <Icon
                                    heightAndWidth="12px"
                                    path="/img/cross_grey.svg"
                                    onClick={onListsSidebarSearchBarInputClear}
                                />
                            </Margin>
                        </IconContainer>
                    )}
                </InnerContainer>
                {!!this.props.searchQuery &&
                    !this.props.hasPerfectMatch &&
                    this.renderCreateNew()}
            </OuterContainer>
        )
    }
}
{'fraction_non_alphanumeric': 0.09953632148377126, 'fraction_numerical': 0.006594538897475528, 'mean_word_length': 1.5021912864140243, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 13, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6745900', 'n_tokens_mistral': 2581, 'n_tokens_neox': 2466, 'n_words': 467}