reskin documentation

src/common-elements/fields-layout.ts

@@ -12,7 +12,7 @@ export const PropertiesTableCaption = styled.caption`
 
 export const PropertyCell = styled.td<{ kind?: string }>`
   border-left: 1px solid ${props => props.theme.schema.linesColor};
-  border-bottom: 1px solid #e3e8ee;
+  border-top: 1px solid #e3e8ee;
   box-sizing: border-box;
   position: relative;
   padding: 10px 10px 10px 0;
@@ -55,7 +55,7 @@ export const PropertyCell = styled.td<{ kind?: string }>`
   }
 
   tr.expanded & {
-    border-bottom: none;
+    border-top: none;
   }
 `;
 
@@ -68,7 +68,8 @@ export const PropertyNameCell = styled(PropertyCell)`
   line-height: 20px;
   white-space: nowrap;
   font-size: 0.929em;
-  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-weight: bold;
+  font-family: Courier,monospace;
 
   &.deprecated {
     ${deprecatedCss};
@@ -80,13 +81,13 @@ export const PropertyNameCell = styled(PropertyCell)`
 `;
 
 export const PropertyDetailsCell = styled.td`
-  border-bottom: 1px solid #e3e8ee;
+  border-top: 1px solid #e3e8ee;
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
 
   tr.expanded & {
-    border-bottom: none;
+    border-top: none;
   }
 `;
 
@@ -126,6 +127,10 @@ export const PropertiesTable = styled.table`
   border-spacing: 0;
   width: 100%;
 
+  tr:first-child td {
+    border-top: none;
+  }
+
   > tr {
     vertical-align: middle;
   }

src/common-elements/fields.ts

@@ -18,6 +18,8 @@ export const ClickablePropertyNameCell = styled(PropertyNameCell)`
 
 export const FieldLabel = styled.span`
   vertical-align: middle;
+  text-transform: uppercase;
+  font-family: ${({ theme }) => theme.typography.headings.fontFamily};
   font-size: ${({ theme }) => theme.typography.code.fontSize};
   line-height: 20px;
 `;

src/common-elements/panels.ts

@@ -15,7 +15,7 @@ export const MiddlePanel = styled.div`
 export const Section = styled.div.attrs(props => ({
   [SECTION_ATTR]: props.id,
 })) <{ underlined?: boolean }>`
-  padding: 0 0 ${props => props.theme.spacing.sectionVertical}px 0;
+  padding: 20px 0 ${props => props.theme.spacing.sectionVertical}px 0;
   border-bottom: 1px solid #e3e8ee;
   &:last-child {
     min-height: calc(100vh + 1px);

src/components/Endpoint/Endpoint.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ShelfIcon } from '../../common-elements';
 import { OperationModel } from '../../services';
 import { Markdown } from '../Markdown/Markdown';
 import { OptionsContext } from '../OptionsProvider';
@@ -48,16 +47,9 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
       <OptionsContext.Consumer>
         {options => (
           <OperationEndpointWrap>
-            <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
+            <EndpointInfo expanded={expanded} inverted={inverted}>
               <HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
               <ServerRelativeURL>{operation.path}</ServerRelativeURL>
-              <ShelfIcon
-                float={'right'}
-                color={inverted ? 'black' : 'white'}
-                size={'20px'}
-                direction={expanded ? 'up' : 'down'}
-                style={{ marginRight: '-25px' }}
-              />
             </EndpointInfo>
             <ServersOverlay expanded={expanded}>
               {operation.servers.map(server => (

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: 60px 0px 0px 0px;
 `;
 
 export const ServerRelativeURL = styled.span`
@@ -17,8 +17,7 @@ export const ServerRelativeURL = styled.span`
 export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>`
   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.codeSample.backgroundColor};
+  background-color: #3c4257;
   display: flex;
   white-space: nowrap;
   align-items: center;
@@ -36,10 +35,9 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
 
 export const HttpVerb = styled.span.attrs((props: { type: string }) => ({
   className: `http-verb ${props.type}`,
-}))<{ type: string }>`
+})) <{ type: string }>`
   font-size: 0.929em;
   line-height: 20px;
-  background-color: ${(props: any) => props.theme.colors.http[props.type] || '#999999'};
   color: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;

src/components/RequestSamples/RequestSamples.tsx

@@ -4,7 +4,7 @@ import { OperationModel, RedocNormalizedOptions } from '../../services';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 
-import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
+import { Tab, TabList, TabPanel, Tabs } from '../../common-elements';
 import { OptionsContext } from '../OptionsProvider';
 
 export interface RequestSamplesProps {
@@ -24,15 +24,10 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
     const samples = operation.codeSamples;
 
     const hasSamples = hasBodySample || samples.length > 0;
-    const hideTabList =
-      samples.length + (hasBodySample ? 1 : 0) === 1
-        ? this.context.hideSingleRequestSampleTab
-        : false;
+    const hideTabList = true;
     return (
       (hasSamples && (
         <div>
-          <RightPanelHeader> Request samples </RightPanelHeader>
-
           <Tabs defaultIndex={0}>
             <TabList hidden={hideTabList}>
               {hasBodySample && <Tab key="payload"> Payload </Tab>}

src/components/ResponseSamples/ResponseSamples.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { OperationModel } from '../../services/models';
 
-import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
+import { Tab, TabList, TabPanel, Tabs } from '../../common-elements';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 
 export interface ResponseSamplesProps {
@@ -23,8 +23,6 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
     return (
       (responses.length > 0 && (
         <div>
-          <RightPanelHeader> Response samples </RightPanelHeader>
-
           <Tabs defaultIndex={0}>
             <TabList>
               {responses.map(response => (

src/components/Responses/Response.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { ResponseModel } from '../../services/models';
 import { ResponseDetails } from './ResponseDetails';
-import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements';
+import { ResponseDetailsWrap } from './styled.elements';
 
 @observer
 export class ResponseView extends React.Component<{ response: ResponseModel }> {
@@ -12,7 +12,7 @@ export class ResponseView extends React.Component<{ response: ResponseModel }> {
   };
 
   render() {
-    const { headers, type, summary, description, code, expanded, content } = this.props.response;
+    const { headers, description, expanded, content } = this.props.response;
     const mimes =
       content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined);
 
@@ -20,14 +20,6 @@ export class ResponseView extends React.Component<{ response: ResponseModel }> {
 
     return (
       <div>
-        <StyledResponseTitle
-          onClick={this.toggle}
-          type={type}
-          empty={empty}
-          title={summary || ''}
-          code={code}
-          opened={expanded}
-        />
         {expanded &&
           !empty && (
             <ResponseDetailsWrap>

src/components/Responses/ResponseTitle.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { ShelfIcon } from '../../common-elements';
 import { Markdown } from '../Markdown/Markdown';
 
 export interface ResponseTitleProps {
@@ -15,17 +14,9 @@ export interface ResponseTitleProps {
 
 export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
   render() {
-    const { title, type, empty, code, opened, className, onClick } = this.props;
+    const { title, empty, code, className, onClick } = this.props;
     return (
       <div className={className} onClick={(!empty && onClick) || undefined}>
-        {!empty && (
-          <ShelfIcon
-            size={'1.5em'}
-            color={type}
-            direction={opened ? 'up' : 'down'}
-            float={'left'}
-          />
-        )}
         <strong>{code} </strong>
         <Markdown compact={true} inline={true} source={title} />
       </div>

src/components/Responses/ResponsesList.tsx

@@ -1,16 +1,7 @@
 import * as React from 'react';
 import { ResponseModel } from '../../services/models';
-import styled from '../../styled-components';
 import { ResponseView } from './Response';
 
-const ResponsesHeader = styled.h3`
-  font-size: 18px;
-  padding: 0.2em 0;
-  margin: 3em 0 1.1em;
-  color: #253137;
-  font-weight: normal;
-`;
-
 export interface ResponseListProps {
   responses: ResponseModel[];
 }
@@ -25,7 +16,6 @@ export class ResponsesList extends React.PureComponent<ResponseListProps> {
 
     return (
       <div>
-        <ResponsesHeader> Responses </ResponsesHeader>
         {responses.map(response => {
           return <ResponseView key={response.code} response={response} />;
         })}

src/services/models/Response.ts

@@ -26,7 +26,7 @@ export class ResponseModel {
     infoOrRef: Referenced<OpenAPIResponse>,
     options: RedocNormalizedOptions,
   ) {
-    this.expanded = options.expandResponses === 'all' || options.expandResponses[code];
+    this.expanded = true;
 
     const info = parser.deref(infoOrRef);
     parser.exitRef(infoOrRef);

src/theme.ts

@@ -4,7 +4,7 @@ const defaultTheme: ThemeInterface = {
   spacing: {
     unit: 5,
     sectionHorizontal: ({ spacing }) => spacing.unit * 8,
-    sectionVertical: ({ spacing }) => spacing.unit * 8,
+    sectionVertical: ({ spacing }) => spacing.unit * 20,
   },
   breakpoints: {
     small: '50rem',
@@ -81,7 +81,7 @@ const defaultTheme: ThemeInterface = {
     typeNameColor: theme => theme.colors.text.secondary,
     typeTitleColor: theme => theme.schema.typeNameColor,
     requireLabelColor: theme => theme.colors.error.main,
-    labelsTextSize: '0.9em',
+    labelsTextSize: '0.7em',
     nestingSpacing: '1em',
     nestedBackground: '#ffffff',
     arrow: {
@@ -90,7 +90,7 @@ const defaultTheme: ThemeInterface = {
     },
   },
   typography: {
-    fontSize: '16px',
+    fontSize: '14px',
     lineHeight: '1.6em',
     fontWeightRegular: '400',
     fontWeightBold: '600',
@@ -144,7 +144,7 @@ const defaultTheme: ThemeInterface = {
     textColor: '#ffffff',
   },
   codeSample: {
-    backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
+    backgroundColor: '#4f566b',
   },
 };