diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx index 3058f8d3..74e07a39 100644 --- a/src/components/Responses/ResponseTitle.tsx +++ b/src/components/Responses/ResponseTitle.tsx @@ -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 { float={'left'} /> )} - {code} + {code} ); diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts index a7058121..9af937b3 100644 --- a/src/components/Responses/styled.elements.ts +++ b/src/components/Responses/styled.elements.ts @@ -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; +`;