Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-10 16:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated Response style

Browse Source
This commit is contained in:
gael 2023-10-23 17:09:51 +02:00
parent 270b86abc3
commit 94216e5f69
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Responses/Response.tsx
View File

@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
import type { ResponseModel, MediaTypeModel } from '../../services/models'; import type { ResponseModel, MediaTypeModel } from '../../services/models';
import { ResponseDetails } from './ResponseDetails'; import { ResponseDetails } from './ResponseDetails';
import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements'; import { ResponseDetailsWrap, ResponseWrap, StyledResponseTitle } from './styled.elements';
export interface ResponseViewProps { export interface ResponseViewProps {
response: ResponseModel; response: ResponseModel;
@ -28,7 +28,7 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
); );
return ( return (
<div> <ResponseWrap $type={type}>
<StyledResponseTitle <StyledResponseTitle
onClick={() => response.toggle()} onClick={() => response.toggle()}
type={type} type={type}
@ -42,6 +42,6 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
<ResponseDetails response={response} /> <ResponseDetails response={response} />
</ResponseDetailsWrap> </ResponseDetailsWrap>
)} )}
</div> </ResponseWrap>
); );
}); });

21
src/components/Responses/styled.elements.ts
View File

@ -12,15 +12,10 @@ export const StyledResponseTitle = styled(ResponseTitle)`
text-align: left; text-align: left;
padding: 10px 20px; padding: 10px 20px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; background: none;
border: none;
line-height: 1.5em; line-height: 1.5em;
cursor: pointer; cursor: pointer;
border: 1px solid ${props => props.theme.colors.responses[props.type].color};
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
&:focus {
outline: auto ${props => props.theme.colors.responses[props.type].color};
}
${props => ${props =>
(props.empty && (props.empty &&
` `
@ -41,7 +36,10 @@ cursor: default;
`; `;
export const ResponseDetailsWrap = styled.div` export const ResponseDetailsWrap = styled.div`
padding: 5px 10px 25px; padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 0 0 4px 4px;
overflow-x: auto;
`; `;
export const HeadersCaption = styled(UnderlinedHeader).attrs({ export const HeadersCaption = styled(UnderlinedHeader).attrs({
@ -60,3 +58,10 @@ export const ResponseTitleWrap = styled.div`
gap: 5px; gap: 5px;
align-items: baseline; align-items: baseline;
`; `;
export const ResponseWrap = styled.div<{ $type: string }>`
border: 1px solid ${props => props.theme.colors.responses[props.$type].color};
background-color: ${props => props.theme.colors.responses[props.$type].backgroundColor};
border-radius: 4px;
margin-bottom: 10px;
`;