fix: display response code at the top after adding a line break (#1374)

* fix: display response code at the top after adding a line break

* chore: rename component from Strong to Code
This commit is contained in:
Anna Stasiuk 2020-09-03 14:18:42 +03:00 committed by GitHub
parent 4e7c7228aa
commit c801b87d2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions

View File

@ -1,5 +1,6 @@
import * as React from 'react';
import { Code } from './styled.elements';
import { ShelfIcon } from '../../common-elements';
import { Markdown } from '../Markdown/Markdown';
@ -31,7 +32,7 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
float={'left'}
/>
)}
<strong>{code} </strong>
<Code>{code} </Code>
<Markdown compact={true} inline={true} source={title} />
</button>
);

View File

@ -16,13 +16,13 @@ export const StyledResponseTitle = styled(ResponseTitle)`
background-color: #f2f2f2;
cursor: pointer;
color: ${props => props.theme.colors.responses[props.type].color};
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
color: ${(props) => props.theme.colors.responses[props.type].color};
background-color: ${(props) => props.theme.colors.responses[props.type].backgroundColor};
&:focus {
outline: auto;
outline-color: ${props => props.theme.colors.responses[props.type].color};
outline-color: ${(props) => props.theme.colors.responses[props.type].color};
}
${props =>
${(props) =>
(props.empty &&
`
cursor: default;
@ -49,3 +49,7 @@ export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
margin-top: 1em;
caption-side: top;
`;
export const Code = styled.strong`
vertical-align: top;
`;