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;
}