diff --git a/packages/apps/src/SideBar/Endpoints.tsx b/packages/apps/src/SideBar/Endpoints.tsx index edaf710788..d0cabfdb31 100644 --- a/packages/apps/src/SideBar/Endpoints.tsx +++ b/packages/apps/src/SideBar/Endpoints.tsx @@ -132,7 +132,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem return (
@@ -167,7 +167,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem className='endpointCustom' isError={!isUrlValid} isFull - label={t('Custom url')} + label={t('custom endpoint')} onChange={_onChangeCustom} value={apiUrl} /> @@ -181,6 +181,8 @@ export default React.memo(styled(Endpoints)` } .endpointType { + margin-top: 0.25rem; + &+.endpointType { margin-top: 1rem; } @@ -189,7 +191,9 @@ export default React.memo(styled(Endpoints)` .endpointGroup { border-radius: 0.25rem; cursor: pointer; + margin: 0 0 0.25rem 0; padding: 0.375rem; + position: relative; &.isOpen, &.isSelected { @@ -198,6 +202,7 @@ export default React.memo(styled(Endpoints)` } } + &.isSelected, &:hover { background: #fffefd; } diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx index e8a2af3df3..7254038273 100644 --- a/packages/react-components/src/Toggle.tsx +++ b/packages/react-components/src/Toggle.tsx @@ -75,6 +75,10 @@ export default React.memo(styled(Toggle)` &:not(.isDisabled) { cursor: pointer; + + > label { + cursor: pointer; + } } &.isChecked { diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index eeee07f9b4..90949dd2ee 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -57,6 +57,10 @@ export default createGlobalStyle` } } + .ui--highlight--shadow { + box-shadow: 0 0 1px ${getHighlight} !important; + } + .ui--highlight--stroke { stroke: ${getHighlight} !important; }