Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-10 08:12:23 +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 { ResponseDetails } from './ResponseDetails';
import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements';
import { ResponseDetailsWrap, ResponseWrap, StyledResponseTitle } from './styled.elements';
export interface ResponseViewProps {
response: ResponseModel;
@ -28,7 +28,7 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
);
return (
<div>
<ResponseWrap $type={type}>
<StyledResponseTitle
onClick={() => response.toggle()}
type={type}
@ -42,6 +42,6 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
<ResponseDetails response={response} />
</ResponseDetailsWrap>
)}
</div>
</ResponseWrap>
);
});

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

@ -12,15 +12,10 @@ export const StyledResponseTitle = styled(ResponseTitle)`
text-align: left;
padding: 10px 20px;
border-radius: 4px;
margin-bottom: 10px;
background: none;
border: none;
line-height: 1.5em;
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.empty &&
`
@ -41,7 +36,10 @@ cursor: default;
`;
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({
@ -60,3 +58,10 @@ export const ResponseTitleWrap = styled.div`
gap: 5px;
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;
`;