Add filter box to select location view

1 files changed, 33 insertions, 0 deletions

diff --git a/gui/src/renderer/components/SelectLocationStyles.tsx b/gui/src/renderer/components/SelectLocationStyles.tsx
index 2c317ddddc..bf0dc038e8 100644
--- a/gui/src/renderer/components/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/SelectLocationStyles.tsx
@@ -3,6 +3,7 @@ import { colors } from '../../config.json';
 import { smallText } from './common-styles';
 import { Container } from './Layout';
 import { ScopeBar } from './ScopeBar';
+import SettingsHeader from './SettingsHeader';
 
 export const StyledContainer = styled(Container)({
   backgroundColor: colors.darkBlue,
@@ -59,3 +60,35 @@ export const StyledFilterByProviderButton = styled.button({
     backgroundColor: colors.blue80,
   },
 });
+
+export const StyledSettingsHeader = styled(SettingsHeader)({
+  paddingLeft: '6px',
+  paddingBottom: '11px',
+});
+
+export const StyledProviderCountRow = styled.div({
+  ...smallText,
+  color: colors.white,
+  marginLeft: '6px',
+  marginBottom: '8px',
+});
+
+export const StyledProvidersCount = styled.div({
+  ...smallText,
+  display: 'inline-flex',
+  alignItems: 'center',
+  backgroundColor: colors.blue,
+  borderRadius: '4px',
+  padding: '3px 8px',
+  marginLeft: '6px',
+  color: colors.white,
+});
+
+export const StyledClearProvidersButton = styled.div({
+  display: 'inline-block',
+  borderWidth: 0,
+  padding: 0,
+  margin: '0 0 0 6px',
+  cursor: 'default',
+  backgroundColor: 'transparent',
+});