Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 21:54:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

VD-151: Various styling fixes

Browse Source
This commit is contained in:
Wouter van den Hoven 2020-07-02 14:34:10 +02:00
parent a084f3a041
commit 422123135c
4 changed files with 4 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ApiLogo/ApiLogo.tsx
View File

@ -19,7 +19,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />; const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
return ( return (
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}> <LogoWrap style={{ backgroundColor: logoInfo.backgroundColor, padding: '25px 0 20px 0' }}>
{logoHref ? LinkWrap(logoHref)(logo) : logo} {logoHref ? LinkWrap(logoHref)(logo) : logo}
</LogoWrap> </LogoWrap>
); );

12
src/components/Redoc/Redoc.tsx
View File

@ -12,7 +12,6 @@ import { SideMenu } from '../SideMenu/SideMenu';
import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar'; import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar';
import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements'; import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements';
import { SearchBox } from '../SearchBox/SearchBox';
import { StoreProvider } from '../StoreBuilder'; import { StoreProvider } from '../StoreBuilder';
export interface RedocProps { export interface RedocProps {
@ -34,7 +33,7 @@ export class Redoc extends React.Component<RedocProps> {
render() { render() {
const { const {
store: { spec, menu, options, search, marker }, store: { spec, menu, options },
} = this.props; } = this.props;
const store = this.props.store; const store = this.props.store;
return ( return (
@ -44,15 +43,6 @@ export class Redoc extends React.Component<RedocProps> {
<RedocWrap className="redoc-wrap"> <RedocWrap className="redoc-wrap">
<StickyResponsiveSidebar menu={menu} className="menu-content"> <StickyResponsiveSidebar menu={menu} className="menu-content">
<ApiLogo info={spec.info} /> <ApiLogo info={spec.info} />
{(!options.disableSearch && (
<SearchBox
search={search!}
marker={marker}
getItemById={menu.getItemById}
onActivate={menu.activateAndScroll}
/>
)) ||
null}
<SideMenu menu={menu} /> <SideMenu menu={menu} />
</StickyResponsiveSidebar> </StickyResponsiveSidebar>
<ApiContentWrap className="api-content"> <ApiContentWrap className="api-content">

6
src/components/SideMenu/SideMenu.tsx
View File

@ -6,7 +6,6 @@ import { OptionsContext } from '../OptionsProvider';
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 }> {
@ -24,11 +23,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" rel="noopener noreferrer" href="https://github.com/Redocly/redoc">
Documentation Powered by ReDoc
</a>
</RedocAttribution>
</PerfectScrollbarWrap> </PerfectScrollbarWrap>
); );
} }

4
src/theme.ts
View File

@ -4,7 +4,7 @@ const defaultTheme: ThemeInterface = {
spacing: { spacing: {
unit: 5, unit: 5,
sectionHorizontal: ({ spacing }) => spacing.unit * 8, sectionHorizontal: ({ spacing }) => spacing.unit * 8,
sectionVertical: ({ spacing }) => spacing.unit * 8, sectionVertical: ({ spacing }) => spacing.unit * 2,
}, },
breakpoints: { breakpoints: {
small: '50rem', small: '50rem',
@ -14,7 +14,7 @@ const defaultTheme: ThemeInterface = {
colors: { colors: {
tonalOffset: 0.3, tonalOffset: 0.3,
primary: { primary: {
main: '#32329f', main: '#030c38',
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),