<commit_before>import React from 'react'
import styled, { ThemeProvider, css } from 'styled-components'
import * as icons from 'src/common-ui/components/design-library/icons'

export interface ThemeProps {
    wide?: boolean
}

export interface Props extends ThemeProps {
    mainText: string
    mainBtnText: string
    onMainBtnClick: React.MouseEventHandler
    onCloseBtnClick: React.MouseEventHandler
    location?:string
}

export class NotifBanner extends React.PureComponent<Props> {
    private get theme(): ThemeProps {
        return {
            wide: this.props.wide,
        }
    }

    render() {
        console.log(this.props.location)
        return (
            <ThemeProvider theme={this.theme}>
                <Banner>
                    <MainContent>
                        <MainText>{this.props.mainText}</MainText>
                        <MainBtn onClick={this.props.onMainBtnClick}>
                            {this.props.mainBtnText}
                        </MainBtn>
                    </MainContent>
                    <CloseBtn onClick={this.props.onCloseBtnClick} src={icons.close}/>
                </Banner>
            </ThemeProvider>
        )
    }
}

const Banner = styled.div`
    display: flex;
    flex-direction: row;
    background: #5cd9a6;
    height: 57px;

    ${(props) =>
    props.location === "inpage" ?
        css`
          width: 70px;
        `: css`
          width: 100%;
        `}
    padding: 0 20px;
    position: fixed;
    bottom: 0px;
    z-index: 1000000;
    justify-content: center;
    align-items: center;
    ${({ theme }) => (theme.wide ? `padding: 0 300px;` : '')}
`

const MainContent = styled.div`
    max-width: 770px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`
const MainText = styled.span`
    font-size: 16px;
    font-weight: bold;
    margin-right: 30px;
`
const MainBtn = styled.button`
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px white solid;
    cursor: pointer;
    border-radius: 3px;
    background: none;
    font-size: 14px;
    outline: none;
<commit_msg>fixed conditional styles<commit_after>import React from 'react'
import styled, { ThemeProvider, css } from 'styled-components'
import * as icons from 'src/common-ui/components/design-library/icons'

export interface ThemeProps {
    wide?: boolean
}

export interface Props extends ThemeProps {
    mainText: string
    mainBtnText: string
    onMainBtnClick: React.MouseEventHandler
    onCloseBtnClick: React.MouseEventHandler
    location?:string
}

export class NotifBanner extends React.PureComponent<Props> {
    private get theme(): ThemeProps {
        return {
            wide: this.props.wide,
        }
    }

    render() {
        return (
            <ThemeProvider theme={this.theme}>
                <Banner location={this.props.location}>
                    <MainContent>
                        <MainText>{this.props.mainText}</MainText>
                        <MainBtn onClick={this.props.onMainBtnClick}>
                            {this.props.mainBtnText}
                        </MainBtn>
                    </MainContent>
                    <CloseBtn onClick={this.props.onCloseBtnClick} src={icons.close}/>
                </Banner>
            </ThemeProvider>
        )
    }
}

const Banner = styled.div`
    display: flex;
    flex-direction: row;
    background: #5cd9a6;
    height: 57px;

    ${(props) => props.location === "inpage" ?
        css`
          width: 80%;
        `: css`
          width: 100%;
        `}
    padding: 0 20px;
    position: fixed;
    bottom: 0px;
    z-index: 1000000;
    justify-content: center;
    align-items: center;
`

const MainContent = styled.div`
    max-width: 770px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`
const MainText = styled.span`
    font-size: 16px;
    font-weight: bold;
    margin-right: 30px;
`
const MainBtn = styled.button`
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px white solid;
    cursor: pointer;
    border-radius: 3px;
    background: none;
    font-size: 14px;
    outline: none;

{'fraction_non_alphanumeric': 0.1115491651205937, 'fraction_numerical': 0.01948051948051948, 'mean_word_length': 2.028792134831461, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 30, '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': '4926185', 'n_tokens_mistral': 1361, 'n_tokens_neox': 1271, 'n_words': 299}