Changed style to adapt to woosmap ref doc

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(
+    background-image: repeating-linear-gradient(
-      to bottom,
+      0deg,
-      transparent 0%,
+      ${props => props.theme.schema.linesColor},
-      transparent 22px,
+      ${props => props.theme.schema.linesColor} 3px,
-      ${props => props.theme.schema.linesColor} 22px,
+      transparent 3px,
-      ${props => props.theme.schema.linesColor} 100%
+      transparent 5px,
+      ${props => props.theme.schema.linesColor} 5px
     );
+    background-position: 0 10px;
+    padding-top: 0;
   }
 
   tr.last > & {
-    background-image: linear-gradient(
+    background-image: repeating-linear-gradient(
-      to bottom,
+      0deg,
-      ${props => props.theme.schema.linesColor} 0%,
+      ${props => props.theme.schema.linesColor},
-      ${props => props.theme.schema.linesColor} 22px,
+      ${props => props.theme.schema.linesColor} 3px,
-      transparent 22px,
+      transparent 3px,
-      transparent 100%
+      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')};
 `;

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;
 `;
 

src/common-elements/headers.ts

@@ -35,17 +35,19 @@ export const H3 = styled.h2`
   ${extensionsHook('H3')};
 `;
 
-export const RightPanelHeader = styled.h3`
+export const RightPanelHeader = styled.div`
-  color: ${({ theme }) => theme.rightPanel.textColor};
+  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);
+  color: rgb(96, 106, 119);
-  font-weight: normal;
+  font-weight: bold;
   text-transform: uppercase;
   font-size: 0.929em;
   line-height: 20px;

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

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

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 0 10px;
-    margin: 0 -5px;
+    border-bottom: 4px solid rgb(97, 110, 124);
-
     > li {
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
+      background-color: rgb(82, 96, 109);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
       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};
+        color: white;
-        background: ${({ theme }) => theme.rightPanel.textColor};
+        background: rgb(50, 63, 75);
-        &:focus {
+        border-bottom: 4px solid rgb(89, 195, 255);
-          outline: auto;
+        margin-bottom: -4px;
-        }
       }
 
       &:only-child {
         flex: none;
         min-width: 100px;
       }
+    }
 
-      &.tab-success {
+    > li:first-of-type {
-        color: ${props => props.theme.colors.responses.success.tabTextColor};
+      border-top-left-radius: 4px;
-      }
+    }
 
-      &.tab-redirect {
+    > li:last-of-type {
-        color: ${props => props.theme.colors.responses.redirect.tabTextColor};
+      border-top-right-radius: 4px;
-      }
-
-      &.tab-info {
-        color: ${props => props.theme.colors.responses.info.tabTextColor};
-      }
-
-      &.tab-error {
-        color: ${props => props.theme.colors.responses.error.tabTextColor};
-      }
     }
   }
   > .react-tabs__tab-panel {
     background: ${({ theme }) => theme.codeBlock.backgroundColor};
     & > div,
     & > pre {
-      padding: ${props => props.theme.spacing.unit * 4}px;
+      margin-top: 10px;
-      margin: 0;
     }
 
     & > 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;
     }
   }
 `;

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')};
+  border-radius: ${props => (props.$inverted ? '0' : '4px')};
-  background-color: ${props =>
+  background-color: rgb(50, 63, 75);
-    props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
   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 }>`

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>

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 {

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 }) =>

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 ? (
+      this.props.withLabel ? <DropdownWrapper>{children}</DropdownWrapper> : children;
-        <DropdownWrapper>
-          <DropdownLabel>Content type</DropdownLabel>
-          {children}
-        </DropdownWrapper>
-      ) : (
-        children
-      );
 
     return (
       <>

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,

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

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
     );

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;
+`;

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
     );

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;
+`;

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'}
+          size={'1.3em'}
-          color={type}
+          color={'rgb(102, 102, 102)'}
           direction={opened ? 'down' : 'right'}
           float={'left'}
         />
       )}
-      <Code>{code} </Code>
-      <Markdown compact={true} inline={true} source={title} />
     </button>
   );
 }

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;
+  display: flex;
-  border: 0;
+  font-size: 14px;
+  justify-content: space-between;
+  align-items: center;
+  white-space: normal;
   width: 100%;
   text-align: left;
-  padding: 10px;
+  padding: 10px 20px;
-  border-radius: 2px;
+  border-radius: 4px;
-  margin-bottom: 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;
+`;

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;

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>

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,