diff options
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/config.json | 1 | ||||
| -rw-r--r-- | gui/src/renderer/components/RelayStatusIndicator.tsx | 12 | ||||
| -rw-r--r-- | gui/src/renderer/components/select-location/SpecialLocationList.tsx | 14 |
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 |
