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

View File

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