Fix margins and padding of items in NavigationBarAttachment

2 files changed, 40 insertions, 8 deletions

diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 6ba67ddcdf..2c170724ed 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -19,7 +19,6 @@ import {
   NavigationScrollbars,
   TitleBarItem,
 } from '../NavigationBar';
-import SearchBar from '../SearchBar';
 import LocationList from './LocationList';
 import { useRelayListContext } from './RelayListContext';
 import { ScopeBarItem } from './ScopeBar';
@@ -39,8 +38,10 @@ import {
   StyledFilter,
   StyledFilterIconButton,
   StyledFilterRow,
+  StyledHeaderSubTitle,
   StyledNavigationBarAttachment,
   StyledScopeBar,
+  StyledSearchBar,
 } from './SelectLocationStyles';
 import { SpacePreAllocationView } from './SpacePreAllocationView';
 
@@ -127,10 +128,30 @@ export default function SelectLocation() {
 
             <StyledNavigationBarAttachment>
               {allowEntrySelection && (
-                <StyledScopeBar selectedIndex={locationType} onChange={changeLocationType}>
-                  <ScopeBarItem>{messages.pgettext('select-location-view', 'Entry')}</ScopeBarItem>
-                  <ScopeBarItem>{messages.pgettext('select-location-view', 'Exit')}</ScopeBarItem>
-                </StyledScopeBar>
+                <>
+                  <StyledScopeBar selectedIndex={locationType} onChange={changeLocationType}>
+                    <ScopeBarItem>
+                      {messages.pgettext('select-location-view', 'Entry')}
+                    </ScopeBarItem>
+                    <ScopeBarItem>{messages.pgettext('select-location-view', 'Exit')}</ScopeBarItem>
+                  </StyledScopeBar>
+
+                  {tunnelProtocol === 'openvpn' ? (
+                    <StyledHeaderSubTitle>
+                      {messages.pgettext(
+                        'select-location-view',
+                        'While connected, your traffic will be routed through two secure locations, the entry point (a bridge server) and the exit point (a VPN server).',
+                      )}
+                    </StyledHeaderSubTitle>
+                  ) : (
+                    <StyledHeaderSubTitle>
+                      {messages.pgettext(
+                        'select-location-view',
+                        'While connected, your traffic will be routed through two secure locations, the entry point and the exit point (needs to be two different VPN servers).',
+                      )}
+                    </StyledHeaderSubTitle>
+                  )}
+                </>
               )}
 
               {showFilters && (
@@ -179,7 +200,7 @@ export default function SelectLocation() {
                 </StyledFilterRow>
               )}
 
-              <SearchBar searchTerm={searchTerm} onSearch={updateSearchTerm} />
+              <StyledSearchBar 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 9bee5023e7..21edd2668e 100644
--- a/gui/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { tinyText } from '../common-styles';
+import SearchBar from '../SearchBar';
+import { HeaderSubTitle } from '../SettingsHeader';
 import { ScopeBar } from './ScopeBar';
 
 export const StyledContent = styled.div({
@@ -16,7 +18,7 @@ export const StyledScopeBar = styled(ScopeBar)({
 });
 
 export const StyledNavigationBarAttachment = styled.div({
-  padding: '0px 16px 14px',
+  padding: '0 16px 14px',
 });
 
 export const StyledFilterIconButton = styled.button({
@@ -31,7 +33,7 @@ export const StyledFilterIconButton = styled.button({
 export const StyledFilterRow = styled.div({
   ...tinyText,
   color: colors.white,
-  margin: '0px 6px 14px',
+  margin: '0 6px 14px',
 });
 
 export const StyledFilter = styled.div({
@@ -53,3 +55,12 @@ export const StyledClearFilterButton = styled.div({
   cursor: 'default',
   backgroundColor: 'transparent',
 });
+
+export const StyledHeaderSubTitle = styled(HeaderSubTitle)({
+  display: 'block',
+  margin: '0 6px 14px',
+});
+
+export const StyledSearchBar = styled(SearchBar)({
+  margin: '0 6px',
+});