Do Not Merge - Woosmap custom changes

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,28 @@ 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;
   }
 
   tr.last + tr > & {
@@ -97,7 +102,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 +114,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')};
 `;
@@ -163,6 +171,7 @@ export const PropertiesTable = styled.table`
     display: block;
     > tr, > tbody > tr {
       display: block;
+      padding-bottom:10px;
     }
   `}
 

src/common-elements/fields.ts

@@ -56,7 +56,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;
 `;
@@ -82,7 +82,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,20 +35,24 @@ 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;
+  border-bottom: 1px solid rgb(228, 231, 235);
+  padding-bottom: 0.8em;
 
   ${extensionsHook('UnderlinedHeader')};
 `;

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 => ({
@@ -41,7 +47,6 @@ export const Section = styled.div.attrs(props => ({
       width: 100%;
       display: block;
       content: '';
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }
   `) ||
     ''}
@@ -58,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)`

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 -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};
-      }
-
-      &.tab-redirect {
-        color: ${props => props.theme.colors.responses.redirect.tabTextColor};
-      }
-
-      &.tab-info {
-        color: ${props => props.theme.colors.responses.info.tabTextColor};
-      }
+    > li:first-of-type {
+      border-top-left-radius: 4px;
+    }
 
-      &.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;
     }
   }
 `;

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

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

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