update style

src/common-elements/fields-layout.ts

@@ -12,6 +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;
   box-sizing: border-box;
   position: relative;
   padding: 10px 10px 10px 0;
@@ -52,6 +53,10 @@ export const PropertyCell = styled.td<{ kind?: string }>`
     background: none;
     border-left-color: transparent;
   }
+
+  tr.expanded & {
+    border-bottom: none;
+  }
 `;
 
 export const PropertyCellWithInner = styled(PropertyCell)`
@@ -75,7 +80,7 @@ export const PropertyNameCell = styled(PropertyCell)`
 `;
 
 export const PropertyDetailsCell = styled.td`
-  border-bottom: 1px solid #9fb4be;
+  border-bottom: 1px solid #e3e8ee;
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
@@ -124,6 +129,7 @@ export const PropertiesTable = styled.table`
   > tr {
     vertical-align: middle;
   }
+  
 
   &
     ${InnerPropertiesWrap},
@@ -140,6 +146,10 @@ export const PropertiesTable = styled.table`
     margin: ${({ theme }) => theme.schema.nestingSpacing};
     margin-right: 0;
     background: ${({ theme }) => theme.schema.nestedBackground};
+    td {
+      border-top: 1px solid #e3e8ee;
+      border-bottom: none;
+    }
   }
 
   &

src/common-elements/headers.ts

@@ -16,7 +16,7 @@ export const headerCommonMixin = level => css`
 export const H1 = styled.h1`
   ${headerCommonMixin(1)};
   color: ${({ theme }) => theme.colors.primary.main};
-
+  padding-top: 20px;
   ${extensionsHook('H1')};
 `;
 
@@ -41,13 +41,14 @@ export const RightPanelHeader = styled.h3`
 `;
 
 export const UnderlinedHeader = styled.h5`
-  border-bottom: 1px solid rgba(38, 50, 56, 0.3);
+  border-bottom: 1px solid #e3e8ee;
   margin: 1em 0 1em 0;
   color: rgba(38, 50, 56, 0.5);
   font-weight: normal;
   text-transform: uppercase;
   font-size: 0.929em;
   line-height: 20px;
+  padding: 1em 0 1em 0;
 
   ${extensionsHook('UnderlinedHeader')};
 `;

src/common-elements/panels.ts

@@ -8,15 +8,15 @@ export const MiddlePanel = styled.div`
   ${media.lessThan('medium', true)`
     width: 100%;
     padding: ${props =>
-      `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
+      `0 ${props.theme.spacing.sectionHorizontal}px ${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
   `};
 `;
 
 export const Section = styled.div.attrs(props => ({
   [SECTION_ATTR]: props.id,
-}))<{ underlined?: boolean }>`
-  padding: ${props => props.theme.spacing.sectionVertical}px 0;
-
+})) <{ underlined?: boolean }>`
+  padding: 0 0 ${props => props.theme.spacing.sectionVertical}px 0;
+  border-bottom: 1px solid #e3e8ee;
   &:last-child {
     min-height: calc(100vh + 1px);
   }
@@ -39,7 +39,6 @@ export const Section = styled.div.attrs(props => ({
       width: 100%;
       display: block;
       content: '';
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }
   `) ||
     ''}

src/components/Operation/Operation.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
 
 import { observer } from 'mobx-react';
 
@@ -60,7 +59,6 @@ export class Operation extends React.Component<OperationProps> {
                 </Description>
               )}
               <Extensions extensions={operation.extensions} />
-              <SecurityRequirements securities={operation.security} />
               <Parameters parameters={operation.parameters} body={operation.requestBody} />
               <ResponsesList responses={operation.responses} />
             </MiddlePanel>

src/components/Parameters/Parameters.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
 import { ParametersGroup } from './ParametersGroup';
 
 import { UnderlinedHeader } from '../../common-elements';
@@ -59,10 +58,10 @@ export class Parameters extends React.PureComponent<ParametersProps> {
   }
 }
 
-function DropdownWithinHeader(props) {
+function DropdownWithinHeader() {
   return (
     <UnderlinedHeader key="header">
-      Request Body schema: <DropdownOrLabel {...props} />
+      Request
     </UnderlinedHeader>
   );
 }

src/components/Redoc/Redoc.tsx

@@ -5,7 +5,6 @@ import { ThemeProvider } from '../../styled-components';
 import { OptionsProvider } from '../OptionsProvider';
 
 import { AppStore } from '../../services';
-import { ApiInfo } from '../ApiInfo/';
 import { ApiLogo } from '../ApiLogo/ApiLogo';
 import { ContentItems } from '../ContentItems/ContentItems';
 import { SideMenu } from '../SideMenu/SideMenu';
@@ -36,7 +35,7 @@ export class Redoc extends React.Component<RedocProps> {
     const {
       store: { spec, menu, options, search, marker },
     } = this.props;
-    const store = this.props.store;
+
     return (
       <ThemeProvider theme={options.theme}>
         <StoreProvider value={this.props.store}>
@@ -56,7 +55,6 @@ export class Redoc extends React.Component<RedocProps> {
                 <SideMenu menu={menu} />
               </StickyResponsiveSidebar>
               <ApiContentWrap className="api-content">
-                <ApiInfo store={store} />
                 <ContentItems items={menu.items as any} />
               </ApiContentWrap>
               <BackgroundStub />

src/components/Responses/ResponseDetails.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { ResponseModel } from '../../services/models';
 
 import { UnderlinedHeader } from '../../common-elements';
-import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
 import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
 import { Schema } from '../Schema';
 
@@ -26,10 +25,10 @@ export class ResponseDetails extends React.PureComponent<{ response: ResponseMod
     );
   }
 
-  private renderDropdown = props => {
+  private renderDropdown = () => {
     return (
       <UnderlinedHeader key="header">
-        Response Schema: <DropdownOrLabel {...props} />
+        Response
       </UnderlinedHeader>
     );
   };

src/components/SearchBox/styled.elements.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { darken } from 'polished';
 import styled from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
@@ -14,12 +13,10 @@ export const SearchInput = styled.input.attrs(() => ({
   width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
   box-sizing: border-box;
   margin: 0 ${props => props.theme.spacing.unit * 4}px;
-  padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
-    ${props => props.theme.spacing.unit * 4}px;
-  border: 0;
-  border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
+  padding: 10px ${props => props.theme.spacing.unit * 2}px 10px
+    ${props => props.theme.spacing.unit * 6}px;
+  border: 1px solid #d1d5da;
   font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-weight: bold;
   font-size: 13px;
   color: ${props => props.theme.menu.textColor};
   background-color: transparent;
@@ -41,8 +38,8 @@ export const SearchIcon = styled((props: { className?: string }) => (
   className: 'search-icon',
 })`
   position: absolute;
-  left: ${props => props.theme.spacing.unit * 4}px;
-  height: 1.8em;
+  left: ${props => props.theme.spacing.unit * 6}px;
+  height: 2.4em;
   width: 0.9em;
 
   path {

src/components/SideMenu/MenuItem.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 
 import { ShelfIcon } from '../../common-elements/shelfs';
 import { IMenuItem, OperationModel } from '../../services';
-import { shortenHTTPVerb } from '../../utils/openapi';
+
 import { MenuItems } from './MenuItems';
-import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
+import { MenuItemLabel, MenuItemLi, MenuItemTitle } from './styled.elements';
 
 export interface MenuItemProps {
   item: IMenuItem;
@@ -52,18 +52,18 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {item.type === 'operation' ? (
           <OperationMenuItemContent {...this.props} item={item as OperationModel} />
         ) : (
-          <MenuItemLabel depth={item.depth} active={item.active} type={item.type}>
-            <MenuItemTitle title={item.name}>
-              {item.name}
-              {this.props.children}
-            </MenuItemTitle>
-            {(item.depth > 0 &&
-              item.items.length > 0 && (
-                <ShelfIcon float={'right'} direction={item.expanded ? 'down' : 'right'} />
-              )) ||
-              null}
-          </MenuItemLabel>
-        )}
+            <MenuItemLabel depth={item.depth} active={item.active} type={item.type}>
+              <MenuItemTitle title={item.name}>
+                {item.name}
+                {this.props.children}
+              </MenuItemTitle>
+              {(item.depth > 0 &&
+                item.items.length > 0 && (
+                  <ShelfIcon float={'right'} direction={item.expanded ? 'down' : 'right'} />
+                )) ||
+                null}
+            </MenuItemLabel>
+          )}
         {!withoutChildren &&
           item.items &&
           item.items.length > 0 && (
@@ -88,7 +88,6 @@ class OperationMenuItemContent extends React.Component<OperationMenuItemContentP
     const { item } = this.props;
     return (
       <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}>
-        <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
         <MenuItemTitle width="calc(100% - 38px)">
           {item.name}
           {this.props.children}

src/components/SideMenu/SideMenu.tsx

@@ -5,7 +5,6 @@ import { IMenuItem, MenuStore } from '../../services/MenuStore';
 import { MenuItems } from './MenuItems';
 
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
-import { RedocAttribution } from './styled.elements';
 
 @observer
 export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
@@ -22,11 +21,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
         }}
       >
         <MenuItems items={store.items} onActivate={this.activate} root={true} />
-        <RedocAttribution>
-          <a target="_blank" href="https://github.com/Redocly/redoc">
-            Documentation Powered by ReDoc
-          </a>
-        </RedocAttribution>
       </PerfectScrollbarWrap>
     );
   }

src/components/SideMenu/styled.elements.ts

@@ -6,7 +6,7 @@ import styled, { css } from '../../styled-components';
 
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
-}))<{ type: string }>`
+})) <{ type: string }>`
   width: 32px;
   display: inline-block;
   height: ${props => props.theme.typography.code.fontSize};
@@ -64,7 +64,7 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
 
 function menuItemActiveBg(depth, { theme }): string {
   if (depth > 1) {
-    return darken(0.1, theme.menu.backgroundColor);
+    return '';
   } else if (depth === 1) {
     return darken(0.05, theme.menu.backgroundColor);
   } else {
@@ -108,7 +108,7 @@ export const menuItemDepth = {
     }
   `,
   2: css`
-    color: ${props => props.theme.menu.textColor};
+    margin-left: 20px;
   `,
 };
 
@@ -124,11 +124,11 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   className: classnames('-depth' + props.depth, {
     active: props.active,
   }),
-}))<MenuItemLabelType>`
+})) <MenuItemLabelType>`
   cursor: pointer;
-  color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)};
+  color: ${props => (props.active ? '#757de6' : props.theme.menu.textColor)};
   margin: 0;
-  padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
+  padding: 6.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
     (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
   display: flex;

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -27,7 +27,9 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: #e3e8ee;
   backface-visibility: hidden;
   contain: strict;
 

src/theme.ts

@@ -1,4 +1,4 @@
-import { darken, desaturate, lighten, readableColor, transparentize } from 'polished';
+import { darken, lighten, readableColor, transparentize } from 'polished';
 
 const defaultTheme: ThemeInterface = {
   spacing: {
@@ -14,7 +14,7 @@ const defaultTheme: ThemeInterface = {
   colors: {
     tonalOffset: 0.3,
     primary: {
-      main: '#32329f',
+      main: '#2e4369',
       light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
       dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
       contrastText: ({ colors }) => readableColor(colors.primary.main),
@@ -38,7 +38,7 @@ const defaultTheme: ThemeInterface = {
       contrastText: ({ colors }) => readableColor(colors.error.main),
     },
     text: {
-      primary: '#333333',
+      primary: '#5d7079',
       secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
     },
     border: {
@@ -76,26 +76,22 @@ const defaultTheme: ThemeInterface = {
     },
   },
   schema: {
-    linesColor: theme =>
-      lighten(
-        theme.colors.tonalOffset,
-        desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
-      ),
+    linesColor: '#ffffff',
     defaultDetailsWidth: '75%',
     typeNameColor: theme => theme.colors.text.secondary,
     typeTitleColor: theme => theme.schema.typeNameColor,
     requireLabelColor: theme => theme.colors.error.main,
     labelsTextSize: '0.9em',
     nestingSpacing: '1em',
-    nestedBackground: '#fafafa',
+    nestedBackground: '#ffffff',
     arrow: {
       size: '1.1em',
       color: theme => theme.colors.text.secondary,
     },
   },
   typography: {
-    fontSize: '14px',
-    lineHeight: '1.5em',
+    fontSize: '16px',
+    lineHeight: '1.6em',
     fontWeightRegular: '400',
     fontWeightBold: '600',
     fontWeightLight: '300',
@@ -117,14 +113,14 @@ const defaultTheme: ThemeInterface = {
       wrap: false,
     },
     links: {
-      color: ({ colors }) => colors.primary.main,
+      color: '#757de6',
       visited: ({ typography }) => typography.links.color,
-      hover: ({ typography }) => lighten(0.2, typography.links.color),
+      hover: ({ typography }) => darken(0.5, typography.links.color),
     },
   },
   menu: {
     width: '260px',
-    backgroundColor: '#fafafa',
+    backgroundColor: '#ffffff',
     textColor: '#333333',
     groupItems: {
       textTransform: 'uppercase',
@@ -134,7 +130,7 @@ const defaultTheme: ThemeInterface = {
     },
     arrow: {
       size: '1.5em',
-      color: theme => theme.menu.textColor,
+      color: '#e3e8ee',
     },
   },
   logo: {
@@ -143,7 +139,7 @@ const defaultTheme: ThemeInterface = {
     gutter: '2px',
   },
   rightPanel: {
-    backgroundColor: '#263238',
+    backgroundColor: '#ffffff',
     width: '40%',
     textColor: '#ffffff',
   },