update style

This commit is contained in:
Ray Ventura 2019-06-24 00:30:25 -07:00
parent 5270737a98
commit 8df116284f
13 changed files with 63 additions and 71 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -3,9 +3,9 @@ import * as React from 'react';
import { ShelfIcon } from '../../common-elements/shelfs'; import { ShelfIcon } from '../../common-elements/shelfs';
import { IMenuItem, OperationModel } from '../../services'; import { IMenuItem, OperationModel } from '../../services';
import { shortenHTTPVerb } from '../../utils/openapi';
import { MenuItems } from './MenuItems'; import { MenuItems } from './MenuItems';
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements'; import { MenuItemLabel, MenuItemLi, MenuItemTitle } from './styled.elements';
export interface MenuItemProps { export interface MenuItemProps {
item: IMenuItem; item: IMenuItem;
@ -88,7 +88,6 @@ class OperationMenuItemContent extends React.Component<OperationMenuItemContentP
const { item } = this.props; const { item } = this.props;
return ( return (
<MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}> <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}>
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
<MenuItemTitle width="calc(100% - 38px)"> <MenuItemTitle width="calc(100% - 38px)">
{item.name} {item.name}
{this.props.children} {this.props.children}

View File

@ -5,7 +5,6 @@ import { IMenuItem, MenuStore } from '../../services/MenuStore';
import { MenuItems } from './MenuItems'; import { MenuItems } from './MenuItems';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar'; import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import { RedocAttribution } from './styled.elements';
@observer @observer
export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> { 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} /> <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> </PerfectScrollbarWrap>
); );
} }

View File

@ -6,7 +6,7 @@ import styled, { css } from '../../styled-components';
export const OperationBadge = styled.span.attrs((props: { type: string }) => ({ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
className: `operation-type ${props.type}`, className: `operation-type ${props.type}`,
}))<{ type: string }>` })) <{ type: string }>`
width: 32px; width: 32px;
display: inline-block; display: inline-block;
height: ${props => props.theme.typography.code.fontSize}; 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 { function menuItemActiveBg(depth, { theme }): string {
if (depth > 1) { if (depth > 1) {
return darken(0.1, theme.menu.backgroundColor); return '';
} else if (depth === 1) { } else if (depth === 1) {
return darken(0.05, theme.menu.backgroundColor); return darken(0.05, theme.menu.backgroundColor);
} else { } else {
@ -108,7 +108,7 @@ export const menuItemDepth = {
} }
`, `,
2: css` 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, { className: classnames('-depth' + props.depth, {
active: props.active, active: props.active,
}), }),
}))<MenuItemLabelType>` })) <MenuItemLabelType>`
cursor: pointer; 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; 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 }) => ${({ depth, type, theme }) =>
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''} (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
display: flex; display: flex;

View File

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

View File

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