diff --git a/src/components/Responses/Response.tsx b/src/components/Responses/Response.tsx
index 117b8fb5..485e74ed 100644
--- a/src/components/Responses/Response.tsx
+++ b/src/components/Responses/Response.tsx
@@ -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 (
-
+
response.toggle()}
type={type}
@@ -42,6 +42,6 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
)}
-
+
);
});
diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index 8aa2a0b7..b1cd0533 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -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;
+`;