diff --git a/src/common-elements/Dropdown/styled.ts b/src/common-elements/Dropdown/styled.ts index c0390763..9633c7ea 100644 --- a/src/common-elements/Dropdown/styled.ts +++ b/src/common-elements/Dropdown/styled.ts @@ -58,8 +58,8 @@ export const Dropdown = styled(DropdownComponent)<{ background: white; color: #263238; font-family: ${props => props.theme.typography.headings.fontFamily}; - font-size: 0.929em; - line-height: 1.5em; + font-size: 13px; + line-height: 20px; cursor: pointer; transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index 0b87ee66..58324c5d 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -10,6 +10,7 @@ export const OperationEndpointWrap = styled.div` export const ServerRelativeURL = styled.span` font-family: ${props => props.theme.typography.code.fontFamily}; + font-size: ${props => props.theme.typography.code.fontSize}; margin-left: 10px; flex: 1; overflow-x: hidden; @@ -46,7 +47,7 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({ className: `http-verb ${props.type}`, }))<{ type: string; compact?: boolean }>` - font-size: ${props => (props.compact ? '0.8em' : '0.929em')}; + font-size: 12px; line-height: ${props => (props.compact ? '18px' : '20px')}; color: #ffffff; padding: ${props => (props.compact ? '2px 8px' : '3px 10px')}; diff --git a/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx b/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx index f35b53c6..73e59f89 100644 --- a/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx +++ b/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx @@ -49,10 +49,10 @@ export class GenericChildrenSwitcher extends React.Component< const Wrapper = ({ children }) => this.props.label ? ( - + <> {this.props.label} - {children} - + {children} + ) : ( children ); diff --git a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx index 5e852396..276f4e6b 100644 --- a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx +++ b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx @@ -42,10 +42,10 @@ export class MediaTypesSwitch extends React.Component { const Wrapper = ({ children }) => this.props.withLabel ? ( - + <> Content type - {children} - + {children} + ) : ( children ); diff --git a/src/components/PayloadSamples/MediaTypeSamples.tsx b/src/components/PayloadSamples/MediaTypeSamples.tsx index 6224e3d7..b2eae66a 100644 --- a/src/components/PayloadSamples/MediaTypeSamples.tsx +++ b/src/components/PayloadSamples/MediaTypeSamples.tsx @@ -53,8 +53,8 @@ export class MediaTypeSamples extends React.Component + Example - Example {this.props.renderDropdown({ value: options[activeIdx].value, options, diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts index 0b280f93..ff194e71 100644 --- a/src/components/PayloadSamples/styled.elements.ts +++ b/src/components/PayloadSamples/styled.elements.ts @@ -15,11 +15,7 @@ export const MimeLabel = styled.div` export const DropdownLabel = styled.span` font-family: ${({ theme }) => theme.typography.headings.fontFamily}; - font-size: 12px; - position: absolute; - z-index: 1; - top: -11px; - left: 12px; + font-size: 13px; font-weight: ${({ theme }) => theme.typography.fontWeightBold}; color: ${({ theme }) => transparentize(0.3, theme.rightPanel.textColor)}; `; diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx index 812bbccd..ca61ffb9 100644 --- a/src/components/Responses/ResponseTitle.tsx +++ b/src/components/Responses/ResponseTitle.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Code } from './styled.elements'; +import { Code, ResponseButton } from './styled.elements'; import { ShelfIcon } from '../../common-elements'; import { Markdown } from '../Markdown/Markdown'; @@ -24,7 +24,7 @@ function ResponseTitleComponent({ onClick, }: ResponseTitleProps): React.ReactElement { return ( - + ); } diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts index 7e456870..0593217f 100644 --- a/src/components/Responses/styled.elements.ts +++ b/src/components/Responses/styled.elements.ts @@ -50,3 +50,7 @@ export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))` export const Code = styled.strong` vertical-align: top; `; + +export const ResponseButton = styled.button` + font-size: ${props => props.theme.typography.fontSize}; +`; diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index fb5c1634..a5e76a74 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -325,7 +325,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -338,7 +338,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -656,7 +656,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -669,7 +669,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -974,7 +974,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -987,7 +987,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -1354,7 +1354,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -1367,7 +1367,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -1697,7 +1697,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -1710,7 +1710,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -2011,7 +2011,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -2024,7 +2024,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -2350,7 +2350,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -2363,7 +2363,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -2719,7 +2719,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -2732,7 +2732,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -3050,7 +3050,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -3063,7 +3063,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", @@ -3368,7 +3368,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontFamily": "Source Code Pro", "fontSize": "13px", "fontWeight": "400", - "lineHeight": "1.5em", + "lineHeight": "24px", "wrap": false, }, "fontFamily": "\\"Euclid Circular A\\", Akzidenz, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif", @@ -3381,7 +3381,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "fontWeight": "400", "lineHeight": "1.6em", }, - "lineHeight": "1.5em", + "lineHeight": "24px", "links": Object { "color": "#016BF8", "hover": "#016BF8", diff --git a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap index 3ed81611..f4c389d0 100644 --- a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap @@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
diff --git a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap index a7af0b4f..9b9ac40b 100644 --- a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap @@ -1,23 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SecurityRequirement should render SecurityDefs 1`] = ` -"

petstore_auth

Get access to data while protecting your account credentials. +"

petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -

GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" +
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +

GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" `; -exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; +exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; exports[`SecurityRequirement should render authDefinition 2`] = ` -"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. +"

Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," +
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," `; diff --git a/src/theme.ts b/src/theme.ts index 2f87b695..c6eed793 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -159,7 +159,7 @@ const defaultTheme: ThemeInterface = { }, typography: { fontSize: '16px', - lineHeight: '1.5em', + lineHeight: '24px', fontWeightRegular: '400', fontWeightBold: '600', fontWeightLight: '300',