diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index 4241ff09..0e802d85 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -15,15 +15,16 @@ export const ServerRelativeURL = styled.span` `; export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>` + margin-top: -15px; padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; - background-color: ${props => - props.inverted ? 'transparent' : props.theme.codeSample.backgroundColor}; + background-color: ${props => props.theme.codeSample.backgroundColor}; display: flex; white-space: nowrap; align-items: center; border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; + border-radius: 4px; transition: border-color 0.25s ease; ${props => diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index e18084be..70c72fcf 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -22,7 +22,6 @@ import { Extensions } from '../Fields/Extensions'; const OperationRow = styled(Row)` backface-visibility: hidden; - background: #f8f8f8; `; const Description = styled.div` diff --git a/src/theme.ts b/src/theme.ts index 65bafcdd..925c3cbf 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -14,25 +14,25 @@ const defaultTheme: ThemeInterface = { colors: { tonalOffset: 0.3, primary: { - main: '#697CFF', + main: '#697cff', light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main), contrastText: ({ colors }) => readableColor(colors.primary.main), }, success: { - main: '#2CB72D', + main: '#2cb72d', light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main), contrastText: ({ colors }) => readableColor(colors.success.main), }, warning: { - main: '##FBC03D', + main: '#fbc03d', light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main), contrastText: '#ffffff', }, error: { - main: '#FC5B4F', + main: '#fc5b4f', light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main), contrastText: ({ colors }) => readableColor(colors.error.main), @@ -64,9 +64,9 @@ const defaultTheme: ThemeInterface = { }, }, http: { - get: '#6bbd5b', - post: '#248fb2', - put: '#9b708b', + get: '#2cb72d', + post: '#697cff', + put: '#fbc03d', options: '#d3ca12', patch: '#e09d43', delete: '#e27a7a', @@ -146,7 +146,7 @@ const defaultTheme: ThemeInterface = { textColor: '#333333', }, codeSample: { - backgroundColor: '#ffffff', + backgroundColor: '#f8f8f8', }, };