Add multihop explanation

2 files changed, 13 insertions, 13 deletions

diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index b48682dcfd..6ba67ddcdf 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -19,9 +19,10 @@ import {
   NavigationScrollbars,
   TitleBarItem,
 } from '../NavigationBar';
+import SearchBar from '../SearchBar';
 import LocationList from './LocationList';
 import { useRelayListContext } from './RelayListContext';
-import { ScopeBar, ScopeBarItem } from './ScopeBar';
+import { ScopeBarItem } from './ScopeBar';
 import { useScrollPositionContext } from './ScrollPositionContext';
 import { useOnSelectBridgeLocation, useOnSelectLocation } from './select-location-hooks';
 import {
@@ -39,7 +40,7 @@ import {
   StyledFilterIconButton,
   StyledFilterRow,
   StyledNavigationBarAttachment,
-  StyledSearchBar,
+  StyledScopeBar,
 } from './SelectLocationStyles';
 import { SpacePreAllocationView } from './SpacePreAllocationView';
 
@@ -126,10 +127,10 @@ export default function SelectLocation() {
 
             <StyledNavigationBarAttachment>
               {allowEntrySelection && (
-                <ScopeBar selectedIndex={locationType} onChange={changeLocationType}>
+                <StyledScopeBar selectedIndex={locationType} onChange={changeLocationType}>
                   <ScopeBarItem>{messages.pgettext('select-location-view', 'Entry')}</ScopeBarItem>
                   <ScopeBarItem>{messages.pgettext('select-location-view', 'Exit')}</ScopeBarItem>
-                </ScopeBar>
+                </StyledScopeBar>
               )}
 
               {showFilters && (
@@ -178,7 +179,7 @@ export default function SelectLocation() {
                 </StyledFilterRow>
               )}
 
-              <StyledSearchBar searchTerm={searchTerm} onSearch={updateSearchTerm} />
+              <SearchBar searchTerm={searchTerm} onSearch={updateSearchTerm} />
             </StyledNavigationBarAttachment>
 
             <NavigationScrollbars ref={scrollViewRef}>
diff --git a/gui/src/renderer/components/select-location/SelectLocationStyles.tsx b/gui/src/renderer/components/select-location/SelectLocationStyles.tsx
index f1702d13dc..9bee5023e7 100644
--- a/gui/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { tinyText } from '../common-styles';
-import SearchBar from '../SearchBar';
+import { ScopeBar } from './ScopeBar';
 
 export const StyledContent = styled.div({
   display: 'flex',
@@ -11,8 +11,12 @@ export const StyledContent = styled.div({
   overflow: 'visible',
 });
 
+export const StyledScopeBar = styled(ScopeBar)({
+  marginBottom: '14px',
+});
+
 export const StyledNavigationBarAttachment = styled.div({
-  padding: '0px 16px 8px',
+  padding: '0px 16px 14px',
 });
 
 export const StyledFilterIconButton = styled.button({
@@ -27,7 +31,7 @@ export const StyledFilterIconButton = styled.button({
 export const StyledFilterRow = styled.div({
   ...tinyText,
   color: colors.white,
-  margin: '10px 6px 2px',
+  margin: '0px 6px 14px',
 });
 
 export const StyledFilter = styled.div({
@@ -49,8 +53,3 @@ export const StyledClearFilterButton = styled.div({
   cursor: 'default',
   backgroundColor: 'transparent',
 });
-
-export const StyledSearchBar = styled(SearchBar)({
-  marginTop: '10px',
-  marginBottom: '4px',
-});