Change special location item icon

4 files changed, 15 insertions, 18 deletions

diff --git a/gui/assets/images/icon-nearest.svg b/gui/assets/images/icon-nearest.svg
deleted file mode 100644
index badbf3674d..0000000000
--- a/gui/assets/images/icon-nearest.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon-nearest</title>
-    <desc>Mullvad VPN app</desc>
-    <defs></defs>
-        <path d="M20.9450712,11 L23,11 C23.5522847,11 24,11.4477153 24,12 C24,12.5522847 23.5522847,13 23,13 L20.9450712,13 C20.4839224,17.1716166 17.1716166,20.4839224 13,20.9450712 L13,23 C13,23.5522847 12.5522847,24 12,24 C11.4477153,24 11,23.5522847 11,23 L11,20.9450712 C6.82838339,20.4839224 3.5160776,17.1716166 3.05492878,13 L1,13 C0.44771525,13 0,12.5522847 0,12 C0,11.4477153 0.44771525,11 1,11 L3.05492878,11 C3.5160776,6.82838339 6.82838339,3.5160776 11,3.05492878 L11,1 C11,0.44771525 11.4477153,0 12,0 C12.5522847,0 13,0.44771525 13,1 L13,3.05492878 C17.1716166,3.5160776 20.4839224,6.82838339 20.9450712,11 Z M18.9291111,11 C18.4905984,7.93430884 16.0656912,5.50940162 13,5.07088886 L13,7 C13,7.55228475 12.5522847,8 12,8 C11.4477153,8 11,7.55228475 11,7 L11,5.07088886 C7.93430884,5.50940162 5.50940162,7.93430884 5.07088886,11 L7,11 C7.55228475,11 8,11.4477153 8,12 C8,12.5522847 7.55228475,13 7,13 L5.07088886,13 C5.50940162,16.0656912 7.93430884,18.4905984 11,18.9291111 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,18.9291111 C16.0656912,18.4905984 18.4905984,16.0656912 18.9291111,13 L17,13 C16.4477153,13 16,12.5522847 16,12 C16,11.4477153 16.4477153,11 17,11 L18.9291111,11 Z" id="icon-nearest" fill="#FFFFFF" fill-rule="nonzero"></path>
-</svg>
diff --git a/gui/src/config.json b/gui/src/config.json
index 8db99ed2fb..c1ddcd6cac 100644
--- a/gui/src/config.json
+++ b/gui/src/config.json
@@ -17,6 +17,7 @@
     "yellow": "rgb(255, 213, 36)",
     "black": "rgb(0, 0, 0)",
     "white": "rgb(255, 255, 255)",
+    "white90": "rgba(255, 255, 255, 0.9)",
     "white80": "rgba(255, 255, 255, 0.8)",
     "white60": "rgba(255, 255, 255, 0.6)",
     "white50": "rgba(255, 255, 255, 0.5)",
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index 549fec4e70..1060121b9e 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,13 +1,19 @@
 import styled from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
 
 import { colors } from '../../config.json';
 import * as Cell from './cell';
 
-const StyledRelayStatus = styled.div<{ $active: boolean }>((props) => ({
+const indicatorStyles: Styles<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = {
   width: '16px',
   height: '16px',
   borderRadius: '8px',
   margin: '0 12px 0 4px',
+};
+
+const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (props) => ({
   backgroundColor: props.$active ? colors.green90 : colors.red95,
 }));
 
@@ -28,3 +34,7 @@ export default function RelayStatusIndicator(props: IProps) {
     <StyledRelayStatus $active={props.active} />
   );
 }
+
+export const SpecialLocationIndicator = styled.div(indicatorStyles, {
+  backgroundColor: colors.white90,
+});
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index 2e658c6046..60b1e0c666 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -6,10 +6,9 @@ import { messages } from '../../../shared/gettext';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useSelector } from '../../redux/store';
-import * as Cell from '../cell';
 import ImageView from '../ImageView';
 import InfoButton from '../InfoButton';
-import RelayStatusIndicator from '../RelayStatusIndicator';
+import { SpecialLocationIndicator } from '../RelayStatusIndicator';
 import {
   getButtonColor,
   StyledHoverInfoButton,
@@ -36,12 +35,6 @@ export default function SpecialLocationList<T>({ source, ...props }: SpecialLoca
   );
 }
 
-const StyledSpecialLocationIcon = styled(Cell.Icon)({
-  flex: 0,
-  marginLeft: '2px',
-  marginRight: '8px',
-});
-
 const StyledSpecialLocationInfoButton = styled(InfoButton)({ padding: '0 25px', margin: 0 });
 const StyledSpecialLocationSideButton = styled(ImageView)({ padding: '0 3px' });
 
@@ -73,13 +66,12 @@ export interface SpecialLocationRowInnerProps<T>
 export function AutomaticLocationRow(
   props: SpecialLocationRowInnerProps<SpecialBridgeLocationType>,
 ) {
-  const icon = props.source.selected ? 'icon-tick' : 'icon-nearest';
   const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
   const background = getButtonColor(props.source.selected, 0, props.source.disabled);
   return (
     <StyledLocationRowContainerWithMargin ref={selectedRef}>
       <StyledLocationRowButton onClick={props.onSelect} $level={0} {...background}>
-        <StyledSpecialLocationIcon source={icon} tintColor={colors.white} height={22} width={22} />
+        <SpecialLocationIndicator />
         <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
       </StyledLocationRowButton>
       <StyledLocationRowIcon
@@ -129,7 +121,7 @@ export function CustomBridgeLocationRow(
         $level={0}
         disabled={props.source.disabled}
         {...background}>
-        <RelayStatusIndicator active selected={props.source.selected} />
+        <SpecialLocationIndicator />
         <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
       </StyledLocationRowButton>
       <StyledHoverInfoButton