diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index b2a45fde97..4eb5e1d145 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -14,7 +14,12 @@ export const ServerRelativeURL = styled.span` text-overflow: ellipsis; `; -export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>` +export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>` + outline: 0; + color: inherit; + width: 100%; + text-align: left; + cursor: pointer; padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; background-color: ${props => @@ -32,6 +37,9 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean .${ServerRelativeURL} { color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')} } + &:focus { + box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(128, 128, 128, 0.15); + } `; export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({ diff --git a/src/components/SelectOnClick/SelectOnClick.tsx b/src/components/SelectOnClick/SelectOnClick.tsx index 9856905c2f..1cd966d309 100644 --- a/src/components/SelectOnClick/SelectOnClick.tsx +++ b/src/components/SelectOnClick/SelectOnClick.tsx @@ -4,14 +4,19 @@ import { ClipboardService } from '../../services'; export class SelectOnClick extends React.PureComponent { private child: HTMLDivElement | null; - handleClick = () => { + selectElement = () => { ClipboardService.selectElement(this.child); }; render() { const { children } = this.props; return ( -