diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx index d91dab7c..10b888f3 100644 --- a/src/components/Callbacks/CallbackTitle.tsx +++ b/src/components/Callbacks/CallbackTitle.tsx @@ -32,7 +32,10 @@ export class CallbackTitle extends React.PureComponent { } } -const CallbackTitleWrapper = styled.div` +const CallbackTitleWrapper = styled.button` + border: 0; + width: 100%; + text-align: left; & > * { vertical-align: middle; } @@ -45,7 +48,7 @@ const CallbackTitleWrapper = styled.div` `; const CallbackName = styled.span<{ deprecated?: boolean }>` - text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')}; + text-decoration: ${(props) => (props.deprecated ? 'line-through' : 'none')}; margin-right: 8px; `; diff --git a/src/components/Callbacks/styled.elements.ts b/src/components/Callbacks/styled.elements.ts index 522423bb..03dd3ff3 100644 --- a/src/components/Callbacks/styled.elements.ts +++ b/src/components/Callbacks/styled.elements.ts @@ -1,5 +1,6 @@ import styled from '../../styled-components'; import { CallbackTitle } from './CallbackTitle'; +import { darken } from 'polished'; export const StyledCallbackTitle = styled(CallbackTitle)` padding: 10px; @@ -8,6 +9,7 @@ export const StyledCallbackTitle = styled(CallbackTitle)` line-height: 1.5em; background-color: ${({ theme }) => theme.colors.gray[100]}; cursor: pointer; + outline-color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.colors.gray[100])}; `; export const CallbackDetailsWrap = styled.div`