@@ -35,23 +30,21 @@ export class RequestSamples extends React.Component
{
- {hasBodySample && Payload }
{samples.map(sample => (
{sample.label !== undefined ? sample.label : sample.lang}
))}
- {hasBodySample && (
-
-
-
- )}
{samples.map(sample => (
-
-
+
+ {isPayloadSample(sample) ? (
+
+ ) : (
+
+ )}
))}
diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx
index 647e71c874..5517bb78d9 100644
--- a/src/components/SearchBox/styled.elements.tsx
+++ b/src/components/SearchBox/styled.elements.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { darken } from 'polished';
+import { darken, getLuminance, lighten } from 'polished';
import styled from '../../styled-components';
import { MenuItemLabel } from '../SideMenu/styled.elements';
@@ -17,7 +17,12 @@ export const SearchInput = styled.input.attrs(() => ({
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)};
+ border-bottom: 1px solid
+ ${({ theme }) =>
+ (getLuminance(theme.menu.backgroundColor) > 0.5 ? darken : lighten)(
+ 0.1,
+ theme.menu.backgroundColor,
+ )};
font-family: ${({ theme }) => theme.typography.fontFamily};
font-weight: bold;
font-size: 13px;
@@ -52,11 +57,12 @@ export const SearchIcon = styled((props: { className?: string }) => (
export const SearchResultsBox = styled.div`
padding: ${props => props.theme.spacing.unit}px 0;
- background-color: #ededed;
+ background-color: ${({ theme }) => darken(0.05, theme.menu.backgroundColor)}};
+ color: ${props => props.theme.menu.textColor};
min-height: 150px;
max-height: 250px;
- border-top: 1px solid #e1e1e1;
- border-bottom: 1px solid #e1e1e1;
+ border-top: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
+ border-bottom: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
margin-top: 10px;
line-height: 1.4;
font-size: 0.9em;
@@ -65,17 +71,14 @@ export const SearchResultsBox = styled.div`
padding-top: 6px;
padding-bottom: 6px;
- &:hover {
- background-color: #e1e1e1;
+ &:hover,
+ &.active {
+ background-color: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
}
> svg {
display: none;
}
-
- &.active {
- background-color: #e1e1e1;
- }
}
`;
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index fc5f3bc02d..7f11eeed7d 100644
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/src/components/SecuritySchemes/SecuritySchemes.tsx
@@ -49,7 +49,7 @@ export class OAuthFlow extends React.PureComponent {
Scopes: