<commit_before>/**
 * External dependencies
 */
import styled from 'styled-components';

/**
 * Internal dependencies
 */
import { CENTRAL_RIGHT_PADDING, INSPECTOR_WIDTH } from '../../constants';
import { useStory } from '../../app/story';
import Buttons from './buttons';

const Background = styled.div`
	background-color: ${ ( { theme } ) => theme.colors.bg.v3 };
	display: grid;
	grid:
    "header . buttons" 1fr
    / 1fr ${ CENTRAL_RIGHT_PADDING }px ${ INSPECTOR_WIDTH }px;
`;

const Head = styled.header`
	grid-area: header;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
`;

const Title = styled.input`
	color: ${ ( { theme } ) => theme.colors.fg.v1 };
	margin: 0;
	font-size: 19px;
	line-height: 20px;
	background: none !important;
	border: 0px none !important;
	color: #fff !important;
	text-align: center;
`;

const ButtonCell = styled.header`
	grid-area: buttons;
`;

function HeaderLayout() {
	const { state: { title }, actions: { setTitle } } = useStory();

	return (
		<Background>
			<Head>
				<Title
					value={ title }
					type={ 'text' }
					onChange={ ( evt ) => setTitle( evt.target.value ) }
				/>
			</Head>
			<ButtonCell>
				<Buttons />
			</ButtonCell>
		</Background>
	);
}

export default HeaderLayout;
<commit_msg>Make sure that Auto draft is set to the title.<commit_after>/**
 * External dependencies
 */
import styled from 'styled-components';

/**
 * Internal dependencies
 */
import { CENTRAL_RIGHT_PADDING, INSPECTOR_WIDTH } from '../../constants';
import { useStory } from '../../app/story';
import Buttons from './buttons';

const Background = styled.div`
	background-color: ${ ( { theme } ) => theme.colors.bg.v3 };
	display: grid;
	grid:
    "header . buttons" 1fr
    / 1fr ${ CENTRAL_RIGHT_PADDING }px ${ INSPECTOR_WIDTH }px;
`;

const Head = styled.header`
	grid-area: header;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
`;

const Title = styled.input`
	color: ${ ( { theme } ) => theme.colors.fg.v1 };
	margin: 0;
	font-size: 19px;
	line-height: 20px;
	background: none !important;
	border: 0px none !important;
	color: #fff !important;
	text-align: center;
`;

const ButtonCell = styled.header`
	grid-area: buttons;
`;

function HeaderLayout() {
	const { state: { title, postStatus }, actions: { setTitle } } = useStory();
	// TODO Make sure that Auto Draft checks translations.
	const titleFormatted = ( postStatus === 'auto-draft' && title === 'Auto Draft' ) ? '' : title;

	return (
		<Background>
			<Head>
				<Title
					value={ titleFormatted }
					type={ 'text' }
					onChange={ ( evt ) => setTitle( evt.target.value ) }
					placeholder={ 'Add title' }
				/>
			</Head>
			<ButtonCell>
				<Buttons />
			</ButtonCell>
		</Background>
	);
}

export default HeaderLayout;

{'fraction_non_alphanumeric': 0.16112897463379777, 'fraction_numerical': 0.009289031797070382, 'mean_word_length': 3.3681747269890794, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '4819796', 'n_tokens_mistral': 1048, 'n_tokens_neox': 956, 'n_words': 247}