From 28e8de2b4cdda3bdf359f1a3cc078fcbb6827207 Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Mon, 23 Oct 2023 15:12:36 +0200
Subject: [PATCH 1/8] Changed style to adapt to woosmap ref doc

---
 src/common-elements/fields-layout.ts          | 41 ++++++++------
 src/common-elements/fields.ts                 |  1 -
 src/common-elements/headers.ts                | 14 ++---
 src/common-elements/panels.ts                 |  1 -
 src/common-elements/samples.tsx               |  5 +-
 src/common-elements/tabs.ts                   | 53 ++++++++-----------
 src/components/Endpoint/styled.elements.ts    |  8 +--
 src/components/Fields/Field.tsx               |  3 --
 src/components/JsonViewer/style.ts            |  3 ++
 src/components/Markdown/styled.elements.tsx   |  3 ++
 .../MediaTypeSwitch/MediaTypesSwitch.tsx      | 11 +---
 .../PayloadSamples/MediaTypeSamples.tsx       |  3 +-
 .../PayloadSamples/styled.elements.ts         | 11 ++--
 .../RequestSamples/RequestSamples.tsx         |  5 +-
 .../RequestSamples/styled.elements.ts         |  8 +++
 .../ResponseSamples/ResponseSamples.tsx       |  5 +-
 .../ResponseSamples/styled.elements.ts        |  8 +++
 src/components/Responses/ResponseTitle.tsx    | 13 ++---
 src/components/Responses/styled.elements.ts   | 22 +++++---
 .../SecurityRequirement/styled.elements.ts    |  2 +
 src/components/SideMenu/SideMenu.tsx          |  2 -
 src/components/SideMenu/styled.elements.ts    |  2 +-
 22 files changed, 125 insertions(+), 99 deletions(-)
 create mode 100644 src/components/RequestSamples/styled.elements.ts
 create mode 100644 src/components/ResponseSamples/styled.elements.ts

diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
index 9e7fce0b..2c5c4dcc 100644
--- a/src/common-elements/fields-layout.ts
+++ b/src/common-elements/fields-layout.ts
@@ -9,10 +9,10 @@ export const PropertiesTableCaption = styled.caption`
 `;
 
 export const PropertyCell = styled.td<{ kind?: string }>`
-  border-left: 1px solid ${props => props.theme.schema.linesColor};
+  border-left: 1px dashed ${props => props.theme.schema.linesColor};
   box-sizing: border-box;
   position: relative;
-  padding: 10px 10px 10px 0;
+  padding: 10px;
 
   ${media.lessThan('small')`
     display: block;
@@ -28,23 +28,29 @@ export const PropertyCell = styled.td<{ kind?: string }>`
   }
 
   tr:first-of-type > & {
-    background-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      transparent 22px,
-      ${props => props.theme.schema.linesColor} 22px,
-      ${props => props.theme.schema.linesColor} 100%
+    background-image: repeating-linear-gradient(
+      0deg,
+      ${props => props.theme.schema.linesColor},
+      ${props => props.theme.schema.linesColor} 3px,
+      transparent 3px,
+      transparent 5px,
+      ${props => props.theme.schema.linesColor} 5px
     );
+    background-position: 0 10px;
+    padding-top: 0;
   }
 
   tr.last > & {
-    background-image: linear-gradient(
-      to bottom,
-      ${props => props.theme.schema.linesColor} 0%,
-      ${props => props.theme.schema.linesColor} 22px,
-      transparent 22px,
-      transparent 100%
+    background-image: repeating-linear-gradient(
+      0deg,
+      ${props => props.theme.schema.linesColor},
+      ${props => props.theme.schema.linesColor} 3px,
+      transparent 3px,
+      transparent 5px,
+      ${props => props.theme.schema.linesColor} 5px
     );
+    background-size: 1px 22px;
+    padding-bottom: 0;
   }
 
   tr.last + tr > & {
@@ -97,7 +103,7 @@ export const PropertyNameCell = styled(PropertyCell)`
 `;
 
 export const PropertyDetailsCell = styled.td`
-  border-bottom: 1px solid #9fb4be;
+  border-bottom: 1px solid rgb(228, 231, 235);
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
@@ -109,12 +115,15 @@ export const PropertyDetailsCell = styled.td`
   ${media.lessThan('small')`
     padding: 0 20px;
     border-bottom: none;
-    border-left: 1px solid ${props => props.theme.schema.linesColor};
+    border-left: 1px dashed ${props => props.theme.schema.linesColor};
 
     tr.last > & {
       border-left: none;
     }
   `}
+  tr:first-of-type > & {
+    padding-top: 0;
+  }
 
   ${extensionsHook('PropertyDetailsCell')};
 `;
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index 23ab5a81..a5c378ee 100644
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@@ -75,7 +75,6 @@ export const RequiredLabel = styled(FieldLabel).attrs({
   color: ${props => props.theme.schema.requireLabelColor};
   font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;
-  margin-left: 20px;
   line-height: 1;
 `;
 
diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts
index e5be1649..607019a3 100644
--- a/src/common-elements/headers.ts
+++ b/src/common-elements/headers.ts
@@ -35,17 +35,19 @@ export const H3 = styled.h2`
   ${extensionsHook('H3')};
 `;
 
-export const RightPanelHeader = styled.h3`
-  color: ${({ theme }) => theme.rightPanel.textColor};
-
+export const RightPanelHeader = styled.div`
+  color: #ffffff;
+  padding: 10px;
+  font-weight: 700;
+  border-radius: 4px 4px 0 0;
+  background: rgb(50, 63, 75);
   ${extensionsHook('RightPanelHeader')};
 `;
 
 export const UnderlinedHeader = styled.h5`
-  border-bottom: 1px solid rgba(38, 50, 56, 0.3);
   margin: 1em 0 1em 0;
-  color: rgba(38, 50, 56, 0.5);
-  font-weight: normal;
+  color: rgb(96, 106, 119);
+  font-weight: bold;
   text-transform: uppercase;
   font-size: 0.929em;
   line-height: 20px;
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index cacdb685..582426da 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -41,7 +41,6 @@ export const Section = styled.div.attrs(props => ({
       width: 100%;
       display: block;
       content: '';
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }
   `) ||
     ''}
diff --git a/src/common-elements/samples.tsx b/src/common-elements/samples.tsx
index ce4a9632..0d3858ae 100644
--- a/src/common-elements/samples.tsx
+++ b/src/common-elements/samples.tsx
@@ -39,6 +39,9 @@ export const StyledPre = styled(PrismDiv).attrs({
   font-size: ${props => props.theme.typography.code.fontSize};
   overflow-x: auto;
   margin: 0;
-
+  padding: 10px;
+  border-radius: 4px;
+  background-color: rgb(50, 63, 75);
+  contain: content;
   white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
 `;
diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts
index fe41e34f..e33907da 100644
--- a/src/common-elements/tabs.ts
+++ b/src/common-elements/tabs.ts
@@ -6,70 +6,59 @@ import styled from '../styled-components';
 export { Tab, TabList, TabPanel } from 'react-tabs';
 
 export const Tabs = styled(ReactTabs)`
+  padding: 10px 20px 20px;
+  color: rgb(245, 247, 250);
+  border-radius: 0 0 4px 4px;
+  background-color: rgb(82, 96, 109);
+
   > ul {
     list-style: none;
     padding: 0;
-    margin: 0;
-    margin: 0 -5px;
-
+    margin: 0 0 10px;
+    border-bottom: 4px solid rgb(97, 110, 124);
     > li {
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
-      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+      background-color: rgb(82, 96, 109);
       cursor: pointer;
       text-align: center;
       outline: none;
       color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
-      margin: 0
-        ${({ theme }) => `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`};
-      border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
-      border-radius: 5px;
       min-width: 60px;
       font-size: 0.9em;
       font-weight: bold;
 
       &.react-tabs__tab--selected {
-        color: ${props => props.theme.colors.text.primary};
-        background: ${({ theme }) => theme.rightPanel.textColor};
-        &:focus {
-          outline: auto;
-        }
+        color: white;
+        background: rgb(50, 63, 75);
+        border-bottom: 4px solid rgb(89, 195, 255);
+        margin-bottom: -4px;
       }
 
       &:only-child {
         flex: none;
         min-width: 100px;
       }
+    }
 
-      &.tab-success {
-        color: ${props => props.theme.colors.responses.success.tabTextColor};
-      }
+    > li:first-of-type {
+      border-top-left-radius: 4px;
+    }
 
-      &.tab-redirect {
-        color: ${props => props.theme.colors.responses.redirect.tabTextColor};
-      }
-
-      &.tab-info {
-        color: ${props => props.theme.colors.responses.info.tabTextColor};
-      }
-
-      &.tab-error {
-        color: ${props => props.theme.colors.responses.error.tabTextColor};
-      }
+    > li:last-of-type {
+      border-top-right-radius: 4px;
     }
   }
   > .react-tabs__tab-panel {
     background: ${({ theme }) => theme.codeBlock.backgroundColor};
     & > div,
     & > pre {
-      padding: ${props => props.theme.spacing.unit * 4}px;
-      margin: 0;
+      margin-top: 10px;
     }
 
     & > div > pre {
-      padding: 0;
+      padding: 10px;
     }
   }
 `;
@@ -101,7 +90,7 @@ export const SmallTabs = styled(Tabs)`
   > .react-tabs__tab-panel {
     & > div,
     & > pre {
-      padding: ${props => props.theme.spacing.unit * 2}px 0;
+      padding: ${props => props.theme.spacing.unit * 2}px 10px;
     }
   }
 `;
diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
index 01fbd4ae..2acdb814 100644
--- a/src/components/Endpoint/styled.elements.ts
+++ b/src/components/Endpoint/styled.elements.ts
@@ -3,7 +3,7 @@ import styled from '../../styled-components';
 export const OperationEndpointWrap = styled.div`
   cursor: pointer;
   position: relative;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 `;
 
 export const ServerRelativeURL = styled.span`
@@ -21,9 +21,8 @@ export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boo
   text-align: left;
   cursor: pointer;
   padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
-  border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
-  background-color: ${props =>
-    props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
+  border-radius: ${props => (props.$inverted ? '0' : '4px')};
+  background-color: rgb(50, 63, 75);
   display: flex;
   white-space: nowrap;
   align-items: center;
@@ -54,6 +53,7 @@ export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boo
   text-transform: uppercase;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   margin: 0;
+  border-radius: 16px;
 `;
 
 export const ServersOverlay = styled.div<{ $expanded: boolean }>`
diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
index d142c9a5..d953b958 100644
--- a/src/components/Fields/Field.tsx
+++ b/src/components/Fields/Field.tsx
@@ -9,7 +9,6 @@ import {
 import { FieldDetails } from './FieldDetails';
 import {
   InnerPropertiesWrap,
-  PropertyBullet,
   PropertyCellWithInner,
   PropertyDetailsCell,
   PropertyNameCell,
@@ -69,7 +68,6 @@ export class Field extends React.Component<FieldProps> {
         kind={kind}
         title={name}
       >
-        <PropertyBullet />
         <button
           onClick={this.toggle}
           onKeyPress={this.handleKeyPress}
@@ -82,7 +80,6 @@ export class Field extends React.Component<FieldProps> {
       </ClickablePropertyNameCell>
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
-        <PropertyBullet />
         <span className="property-name">{name}</span>
         {labels}
       </PropertyNameCell>
diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts
index 4fcb9ea4..67dfb4bd 100644
--- a/src/components/JsonViewer/style.ts
+++ b/src/components/JsonViewer/style.ts
@@ -10,7 +10,10 @@ export const jsonStyles = css`
   font-size: ${props => props.theme.typography.code.fontSize};
 
   white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+  border-radius: 4px;
   contain: content;
+  background-color: rgb(50, 63, 75);
+  padding: 10px;
   overflow-x: auto;
 
   .callback-function {
diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
index b04a0261..a2de2fc5 100644
--- a/src/components/Markdown/styled.elements.tsx
+++ b/src/components/Markdown/styled.elements.tsx
@@ -35,6 +35,9 @@ export const StyledMarkdownBlock = styled(
     &:last-child {
       margin-bottom: 0;
     }
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   ${({ $compact }) =>
diff --git a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx
index 5e852396..42c9418c 100644
--- a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx
+++ b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { DropdownOption, DropdownProps } from '../../common-elements/Dropdown';
 import { MediaContentModel, MediaTypeModel, SchemaModel } from '../../services/models';
-import { DropdownLabel, DropdownWrapper } from '../PayloadSamples/styled.elements';
+import { DropdownWrapper } from '../PayloadSamples/styled.elements';
 
 export interface MediaTypeChildProps {
   schema: SchemaModel;
@@ -41,14 +41,7 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
     });
 
     const Wrapper = ({ children }) =>
-      this.props.withLabel ? (
-        <DropdownWrapper>
-          <DropdownLabel>Content type</DropdownLabel>
-          {children}
-        </DropdownWrapper>
-      ) : (
-        children
-      );
+      this.props.withLabel ? <DropdownWrapper>{children}</DropdownWrapper> : children;
 
     return (
       <>
diff --git a/src/components/PayloadSamples/MediaTypeSamples.tsx b/src/components/PayloadSamples/MediaTypeSamples.tsx
index 6224e3d7..3c920dbe 100644
--- a/src/components/PayloadSamples/MediaTypeSamples.tsx
+++ b/src/components/PayloadSamples/MediaTypeSamples.tsx
@@ -6,7 +6,7 @@ import { DropdownOption, DropdownProps } from '../../common-elements';
 import { MediaTypeModel } from '../../services/models';
 import { Markdown } from '../Markdown/Markdown';
 import { Example } from './Example';
-import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
+import { DropdownWrapper, NoSampleLabel } from './styled.elements';
 
 export interface PayloadSamplesProps {
   mediaType: MediaTypeModel;
@@ -54,7 +54,6 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
       return (
         <SamplesWrapper>
           <DropdownWrapper>
-            <DropdownLabel>Example</DropdownLabel>
             {this.props.renderDropdown({
               value: options[activeIdx].value,
               options,
diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts
index b9dd40c1..20f01022 100644
--- a/src/components/PayloadSamples/styled.elements.ts
+++ b/src/components/PayloadSamples/styled.elements.ts
@@ -4,12 +4,13 @@ import { Dropdown } from '../../common-elements/Dropdown';
 
 export const MimeLabel = styled.div`
   padding: 0.9em;
-  background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
+  background-color: rgb(50, 63, 75);
   margin: 0 0 10px 0;
   display: block;
   font-family: ${({ theme }) => theme.typography.headings.fontFamily};
   font-size: 0.929em;
   line-height: 1.5em;
+  border-radius: 4px;
 `;
 
 export const DropdownLabel = styled.span`
@@ -20,10 +21,11 @@ export const DropdownLabel = styled.span`
   top: -11px;
   left: 12px;
   font-weight: ${({ theme }) => theme.typography.fontWeightBold};
-  color: ${({ theme }) => transparentize(0.3, theme.rightPanel.textColor)};
+  color: ${({ theme }) => transparentize(0.1, theme.rightPanel.textColor)};
 `;
 
 export const DropdownWrapper = styled.div`
+  margin-top: 15px;
   position: relative;
 `;
 
@@ -39,15 +41,16 @@ export const InvertedSimpleDropdown = styled(Dropdown)`
   }
   margin: 0 0 10px 0;
   display: block;
-  background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
+  background-color: rgb(50, 63, 75);
   border: none;
   padding: 0.9em 1.6em 0.9em 0.9em;
+  border-radius: 4px;
+  overflow: hidden;
   box-shadow: none;
   &:hover,
   &:focus-within {
     border: none;
     box-shadow: none;
-    background-color: ${({ theme }) => transparentize(0.3, theme.rightPanel.backgroundColor)};
   }
 `;
 
diff --git a/src/components/RequestSamples/RequestSamples.tsx b/src/components/RequestSamples/RequestSamples.tsx
index 7a06d89f..f567c8ae 100644
--- a/src/components/RequestSamples/RequestSamples.tsx
+++ b/src/components/RequestSamples/RequestSamples.tsx
@@ -7,6 +7,7 @@ import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
 import { OptionsContext } from '../OptionsProvider';
 import { l } from '../../services/Labels';
+import { RequestSamplesWrap } from './styled.elements';
 
 export interface RequestSamplesProps {
   operation: OperationModel;
@@ -26,7 +27,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
     const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false;
     return (
       (hasSamples && (
-        <div>
+        <RequestSamplesWrap>
           <RightPanelHeader> {l('requestSamples')} </RightPanelHeader>
 
           <Tabs defaultIndex={0}>
@@ -49,7 +50,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
               </TabPanel>
             ))}
           </Tabs>
-        </div>
+        </RequestSamplesWrap>
       )) ||
       null
     );
diff --git a/src/components/RequestSamples/styled.elements.ts b/src/components/RequestSamples/styled.elements.ts
new file mode 100644
index 00000000..a8a31287
--- /dev/null
+++ b/src/components/RequestSamples/styled.elements.ts
@@ -0,0 +1,8 @@
+import styled from '../../styled-components';
+
+export const RequestSamplesWrap = styled.div`
+  position: relative;
+  margin-bottom: 10px;
+  background-color: rgb(82, 96, 109);
+  border-radius: 4px;
+`;
diff --git a/src/components/ResponseSamples/ResponseSamples.tsx b/src/components/ResponseSamples/ResponseSamples.tsx
index 72384fe5..0d7119ad 100644
--- a/src/components/ResponseSamples/ResponseSamples.tsx
+++ b/src/components/ResponseSamples/ResponseSamples.tsx
@@ -6,6 +6,7 @@ import { OperationModel } from '../../services/models';
 import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { l } from '../../services/Labels';
+import { ResponseSamplesWrap } from './styled.elements';
 
 export interface ResponseSamplesProps {
   operation: OperationModel;
@@ -23,7 +24,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
 
     return (
       (responses.length > 0 && (
-        <div>
+        <ResponseSamplesWrap>
           <RightPanelHeader> {l('responseSamples')} </RightPanelHeader>
 
           <Tabs defaultIndex={0}>
@@ -42,7 +43,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
               </TabPanel>
             ))}
           </Tabs>
-        </div>
+        </ResponseSamplesWrap>
       )) ||
       null
     );
diff --git a/src/components/ResponseSamples/styled.elements.ts b/src/components/ResponseSamples/styled.elements.ts
new file mode 100644
index 00000000..77fed05b
--- /dev/null
+++ b/src/components/ResponseSamples/styled.elements.ts
@@ -0,0 +1,8 @@
+import styled from '../../styled-components';
+
+export const ResponseSamplesWrap = styled.div`
+  position: relative;
+  margin-bottom: 10px;
+  background-color: rgb(82, 96, 109);
+  border-radius: 4px;
+`;
diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx
index 812bbccd..643e8056 100644
--- a/src/components/Responses/ResponseTitle.tsx
+++ b/src/components/Responses/ResponseTitle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Code } from './styled.elements';
+import { Code, ResponseTitleWrap } from './styled.elements';
 import { ShelfIcon } from '../../common-elements';
 import { Markdown } from '../Markdown/Markdown';
 
@@ -16,7 +16,6 @@ export interface ResponseTitleProps {
 
 function ResponseTitleComponent({
   title,
-  type,
   empty,
   code,
   opened,
@@ -30,16 +29,18 @@ function ResponseTitleComponent({
       aria-expanded={opened}
       disabled={empty}
     >
+      <ResponseTitleWrap>
+        <Code>{code} </Code>
+        <Markdown compact={true} inline={true} source={title} />
+      </ResponseTitleWrap>
       {!empty && (
         <ShelfIcon
-          size={'1.5em'}
-          color={type}
+          size={'1.3em'}
+          color={'rgb(102, 102, 102)'}
           direction={opened ? 'down' : 'right'}
           float={'left'}
         />
       )}
-      <Code>{code} </Code>
-      <Markdown compact={true} inline={true} source={title} />
     </button>
   );
 }
diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index 65a3c9cc..9cebc6e6 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -3,17 +3,20 @@ import styled from '../../styled-components';
 import { ResponseTitle } from './ResponseTitle';
 
 export const StyledResponseTitle = styled(ResponseTitle)`
-  display: block;
-  border: 0;
+  display: flex;
+  font-size: 14px;
+  justify-content: space-between;
+  align-items: center;
+  white-space: normal;
   width: 100%;
   text-align: left;
-  padding: 10px;
-  border-radius: 2px;
-  margin-bottom: 4px;
+  padding: 10px 20px;
+  border-radius: 4px;
+  margin-bottom: 10px;
   line-height: 1.5em;
   cursor: pointer;
+  border: 1px solid ${props => props.theme.colors.responses[props.type].color};
 
-  color: ${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};
@@ -38,7 +41,7 @@ cursor: default;
 `;
 
 export const ResponseDetailsWrap = styled.div`
-  padding: 10px;
+  padding: 5px 10px 25px;
 `;
 
 export const HeadersCaption = styled(UnderlinedHeader).attrs({
@@ -52,3 +55,8 @@ export const HeadersCaption = styled(UnderlinedHeader).attrs({
 export const Code = styled.strong`
   vertical-align: top;
 `;
+export const ResponseTitleWrap = styled.div`
+  display: flex;
+  gap: 5px;
+  align-items: baseline;
+`;
diff --git a/src/components/SecurityRequirement/styled.elements.ts b/src/components/SecurityRequirement/styled.elements.ts
index 9c501df2..10771db6 100644
--- a/src/components/SecurityRequirement/styled.elements.ts
+++ b/src/components/SecurityRequirement/styled.elements.ts
@@ -102,6 +102,8 @@ export const Wrap = styled.div<{ $expanded?: boolean }>`
   width: 100%;
   display: flex;
   margin: 1em 0;
+  padding-bottom: 1em;
+  border-bottom: 1px solid rgb(228, 231, 235);
   flex-direction: ${p => (p.$expanded ? 'column' : 'row')};
   ${media.lessThan('small')`
     flex-direction: column;
diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
index 58dd34c5..3750d34c 100644
--- a/src/components/SideMenu/SideMenu.tsx
+++ b/src/components/SideMenu/SideMenu.tsx
@@ -8,7 +8,6 @@ import { MenuItems } from './MenuItems';
 
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
 import { RedocAttribution } from './styled.elements';
-import RedoclyLogo from './Logo';
 
 @observer
 export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
@@ -28,7 +27,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
         <MenuItems items={store.items} onActivate={this.activate} root={true} />
         <RedocAttribution>
           <a target="_blank" rel="noopener noreferrer" href="https://redocly.com/redoc/">
-            <RedoclyLogo />
             API docs by Redocly
           </a>
         </RedocAttribution>
diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
index 0caf809e..7b0a9622 100644
--- a/src/components/SideMenu/styled.elements.ts
+++ b/src/components/SideMenu/styled.elements.ts
@@ -183,7 +183,7 @@ export const RedocAttribution = styled.div`
     position: fixed;
     width: ${theme.sidebar.width};
     bottom: 0;
-    background: ${theme.sidebar.backgroundColor};
+    opacity: 0.5;
 
     a,
     a:visited,

From 270b86abc32af4a8796edb23d160a016d26987b6 Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Mon, 23 Oct 2023 15:23:14 +0200
Subject: [PATCH 2/8] fixed empty reponse style

---
 src/components/Responses/styled.elements.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index 9cebc6e6..8aa2a0b7 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -25,7 +25,7 @@ export const StyledResponseTitle = styled(ResponseTitle)`
     (props.empty &&
       `
 cursor: default;
-&::before {
+&::after {
   content: "—";
   font-weight: bold;
   width: 1.5em;

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 3/8] 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;
+`;

From 38e6fd6c3820081382cf6e6a12e371ca1b613823 Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Tue, 24 Oct 2023 08:59:57 +0200
Subject: [PATCH 4/8] slightly adapt style

---
 src/common-elements/headers.ts                        | 2 ++
 src/common-elements/panels.ts                         | 6 ++++++
 src/components/Parameters/Parameters.tsx              | 4 +++-
 src/components/Schema/ArraySchema.tsx                 | 1 +
 src/components/SecurityRequirement/styled.elements.ts | 3 +--
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts
index 607019a3..3bb7161d 100644
--- a/src/common-elements/headers.ts
+++ b/src/common-elements/headers.ts
@@ -51,6 +51,8 @@ export const UnderlinedHeader = styled.h5`
   text-transform: uppercase;
   font-size: 0.929em;
   line-height: 20px;
+  border-bottom: 1px solid rgb(228, 231, 235);
+  padding-bottom: 0.8em;
 
   ${extensionsHook('UnderlinedHeader')};
 `;
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index 582426da..dd308a27 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -12,6 +12,12 @@ export const MiddlePanel = styled.div<{ $compact?: boolean }>`
       theme.spacing.sectionHorizontal
     }px`};
   `};
+  ${({ $compact, theme }) =>
+    media.lessThan('small', true)`
+    padding: ${`${$compact ? 0 : theme.spacing.sectionVertical / 2}px ${
+      theme.spacing.sectionHorizontal / 2
+    }px`};
+  `};
 `;
 
 export const Section = styled.div.attrs(props => ({
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx
index 5270d240..08ff2b1f 100644
--- a/src/components/Parameters/Parameters.tsx
+++ b/src/components/Parameters/Parameters.tsx
@@ -101,7 +101,9 @@ export function BodyContent(props: {
       {({ schema }) => {
         return (
           <>
-            {description !== undefined && <Markdown source={description} />}
+            {description !== undefined && <p></p> && (
+              <Markdown className={'description-body-request'} source={description} />
+            )}
             {schema?.type === 'object' && (
               <ConstraintsView constraints={schema?.constraints || []} />
             )}
diff --git a/src/components/Schema/ArraySchema.tsx b/src/components/Schema/ArraySchema.tsx
index 84bd716a..148a361c 100644
--- a/src/components/Schema/ArraySchema.tsx
+++ b/src/components/Schema/ArraySchema.tsx
@@ -10,6 +10,7 @@ import { ObjectSchema } from './ObjectSchema';
 
 const PaddedSchema = styled.div`
   padding-left: ${({ theme }) => theme.spacing.unit * 2}px;
+  padding-top: ${({ theme }) => theme.spacing.unit * 2}px;
 `;
 
 export class ArraySchema extends React.PureComponent<SchemaProps> {
diff --git a/src/components/SecurityRequirement/styled.elements.ts b/src/components/SecurityRequirement/styled.elements.ts
index 10771db6..8f44ae9c 100644
--- a/src/components/SecurityRequirement/styled.elements.ts
+++ b/src/components/SecurityRequirement/styled.elements.ts
@@ -102,8 +102,7 @@ export const Wrap = styled.div<{ $expanded?: boolean }>`
   width: 100%;
   display: flex;
   margin: 1em 0;
-  padding-bottom: 1em;
-  border-bottom: 1px solid rgb(228, 231, 235);
+  padding-bottom: 0.8em;
   flex-direction: ${p => (p.$expanded ? 'column' : 'row')};
   ${media.lessThan('small')`
     flex-direction: column;

From 7a59f57afd48581edd7c19f7eb380f10fc1e35d3 Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Tue, 24 Oct 2023 09:12:30 +0200
Subject: [PATCH 5/8] slightly adapt style

---
 src/common-elements/panels.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index dd308a27..80dc1c2b 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -63,6 +63,13 @@ export const RightPanel = styled.div`
     padding: ${props =>
       `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
   `};
+  ${media.lessThan('small', true)`
+    width: 100%;
+    padding: ${props =>
+      `${props.theme.spacing.sectionVertical / 2}px ${
+        props.theme.spacing.sectionHorizontal / 2
+      }px`};
+  `};
 `;
 
 export const DarkRightPanel = styled(RightPanel)`

From c2a2b4174251b25a2cc31b335d109f186ea3a25e Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Tue, 24 Oct 2023 12:03:44 +0200
Subject: [PATCH 6/8] slightly adapt style

---
 src/common-elements/fields-layout.ts          | 2 +-
 src/common-elements/fields.ts                 | 2 +-
 src/components/Parameters/Parameters.tsx      | 5 ++++-
 src/components/Parameters/styled.elements.tsx | 5 +++++
 4 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Parameters/styled.elements.tsx

diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
index 2c5c4dcc..8ca50deb 100644
--- a/src/common-elements/fields-layout.ts
+++ b/src/common-elements/fields-layout.ts
@@ -50,7 +50,6 @@ export const PropertyCell = styled.td<{ kind?: string }>`
       ${props => props.theme.schema.linesColor} 5px
     );
     background-size: 1px 22px;
-    padding-bottom: 0;
   }
 
   tr.last + tr > & {
@@ -172,6 +171,7 @@ export const PropertiesTable = styled.table`
     display: block;
     > tr, > tbody > tr {
       display: block;
+      padding-bottom:10px;
     }
   `}
 
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index a5c378ee..d83e5ef5 100644
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@@ -49,7 +49,7 @@ export const ClickablePropertyNameCell = styled(PropertyNameCell)`
 `;
 
 export const FieldLabel = styled.span`
-  vertical-align: middle;
+  vertical-align: top;
   font-size: ${({ theme }) => theme.typography.code.fontSize};
   line-height: 20px;
 `;
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx
index 08ff2b1f..99693313 100644
--- a/src/components/Parameters/Parameters.tsx
+++ b/src/components/Parameters/Parameters.tsx
@@ -13,6 +13,7 @@ import { Markdown } from '../Markdown/Markdown';
 import { ConstraintsView } from '../Fields/FieldConstraints';
 import { RequiredLabel } from '../../common-elements/fields';
 import styled from '../../styled-components';
+import { ParameterDescriptionWrap } from './styled.elements';
 
 function safePush(obj, prop, item) {
   if (!obj[prop]) {
@@ -102,7 +103,9 @@ export function BodyContent(props: {
         return (
           <>
             {description !== undefined && <p></p> && (
-              <Markdown className={'description-body-request'} source={description} />
+              <ParameterDescriptionWrap>
+                <Markdown source={description} />
+              </ParameterDescriptionWrap>
             )}
             {schema?.type === 'object' && (
               <ConstraintsView constraints={schema?.constraints || []} />
diff --git a/src/components/Parameters/styled.elements.tsx b/src/components/Parameters/styled.elements.tsx
new file mode 100644
index 00000000..d3c52bb7
--- /dev/null
+++ b/src/components/Parameters/styled.elements.tsx
@@ -0,0 +1,5 @@
+import styled from '../../styled-components';
+
+export const ParameterDescriptionWrap = styled.div`
+  padding-bottom: 10px;
+`;

From 9852b8411a360b037292629596f919c52d3976c0 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Mon, 12 May 2025 14:34:57 +0200
Subject: [PATCH 7/8] Reapply style change after merge

---
 src/components/Fields/Field.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
index 8ac4ef7c..62a67a78 100644
--- a/src/components/Fields/Field.tsx
+++ b/src/components/Fields/Field.tsx
@@ -9,7 +9,6 @@ import {
 import { FieldDetails } from './FieldDetails';
 import {
   InnerPropertiesWrap,
-  PropertyBullet,
   PropertyCellWithInner,
   PropertyDetailsCell,
   PropertyNameCell,
@@ -74,7 +73,6 @@ export class Field extends React.Component<FieldProps> {
         kind={kind}
         title={name}
       >
-        <PropertyBullet />
         <button
           onClick={this.toggle}
           onKeyPress={this.handleKeyPress}
@@ -91,7 +89,6 @@ export class Field extends React.Component<FieldProps> {
       </ClickablePropertyNameCell>
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
-        <PropertyBullet />
         {!hidePropertiesPrefix &&
           fieldParentsName.map(
             name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking

From 90c8f3131e0d08b3446dbe0f928d0d8a2f2a9e37 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Mon, 12 May 2025 17:07:47 +0200
Subject: [PATCH 8/8] Display Security Scheme Name instead of ID

---
 src/components/SecurityRequirement/SecurityRequirement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index d578284e..f4e993cf 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@@ -58,7 +58,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
         operationSecuritySchemes.map((scheme, idx) => (
           <SecurityDetailsStyle key={idx}>
             <h5>
-              <LockIcon /> {AUTH_TYPES[scheme.type] || scheme.type}: {scheme.id}
+              <LockIcon /> {AUTH_TYPES[scheme.type] || scheme.type}: {scheme.displayName}
             </h5>
             <Markdown source={scheme.description || ''} />
             <SecurityDetails