Use new Button in select location view

2 files changed, 11 insertions, 15 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index c7af9a306b..381ba6495f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -4,7 +4,8 @@ import { sprintf } from 'sprintf-js';
 import { strings } from '../../../shared/constants';
 import { Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { FilterChip, Flex, IconButton, LabelTiny } from '../../lib/components';
+import { Button, FilterChip, Flex, IconButton, LabelTiny } from '../../lib/components';
+import { FlexColumn } from '../../lib/components/flex-column';
 import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-locations';
 import { useHistory } from '../../lib/history';
@@ -33,7 +34,6 @@ import { LocationType, SpecialBridgeLocationType, SpecialLocation } from './sele
 import { useSelectLocationContext } from './SelectLocationContainer';
 import {
   StyledContent,
-  StyledDaitaSettingsButton,
   StyledNavigationBarAttachment,
   StyledScopeBar,
   StyledSearchBar,
@@ -409,7 +409,7 @@ function DisabledEntrySelection() {
   }, [push]);
 
   return (
-    <StyledSelectionUnavailable>
+    <FlexColumn $gap="large" $margin={{ horizontal: 'large', bottom: 'tiny' }}>
       <StyledSelectionUnavailableText>
         {sprintf(
           messages.pgettext(
@@ -419,11 +419,13 @@ function DisabledEntrySelection() {
           { daita: strings.daita, multihop, directOnly },
         )}
       </StyledSelectionUnavailableText>
-      <StyledDaitaSettingsButton onClick={navigateToDaitaSettings}>
-        {sprintf(messages.pgettext('select-location-view', 'Open %(daita)s settings'), {
-          daita: strings.daita,
-        })}
-      </StyledDaitaSettingsButton>
-    </StyledSelectionUnavailable>
+      <Button onClick={navigateToDaitaSettings}>
+        <Button.Text>
+          {sprintf(messages.pgettext('select-location-view', 'Open %(daita)s settings'), {
+            daita: strings.daita,
+          })}
+        </Button.Text>
+      </Button>
+    </FlexColumn>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
index 5ab08368a3..8064a05c56 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -4,7 +4,6 @@ import { Colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
 import SearchBar from '../SearchBar';
-import { SmallButton } from '../SmallButton';
 import { ScopeBar } from './ScopeBar';
 
 export const StyledContent = styled.div({
@@ -66,8 +65,3 @@ export const StyledSelectionUnavailableText = styled(Cell.CellFooterText)({
 export const StyledAllLocationsTitle = styled(Cell.Label)(normalText, {
   fontWeight: 'normal',
 });
-
-export const StyledDaitaSettingsButton = styled(SmallButton)({
-  marginLeft: 0,
-  marginTop: '24px',
-});