Change special location item icon

3 files changed, 15 insertions, 12 deletions

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