From 94216e5f69fa2b78832ea9a6342dc5da50bfcdc1 Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Mon, 23 Oct 2023 17:09:51 +0200
Subject: [PATCH] Updated Response style

---
 src/components/Responses/Response.tsx       |  6 +++---
 src/components/Responses/styled.elements.ts | 21 +++++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

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 (
-    <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>
   );
 });
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;
+`;