Fix disabled location text color

3 files changed, 22 insertions, 3 deletions

diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx
index 91b9faa31e..c8ad23f071 100644
--- a/gui/src/renderer/components/CityRow.tsx
+++ b/gui/src/renderer/components/CityRow.tsx
@@ -34,6 +34,12 @@ const StyledChevronButton = styled(ChevronButton)({
   marginLeft: '18px',
 });
 
+const Label = styled(Cell.Label)({
+  '[disabled] &': {
+    color: colors.white20,
+  },
+});
+
 export default class CityRow extends Component<IProps> {
   private buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -85,7 +91,7 @@ export default class CityRow extends Component<IProps> {
             active={this.props.hasActiveRelays}
             selected={this.props.selected}
           />
-          <Cell.Label>{this.props.name}</Cell.Label>
+          <Label>{this.props.name}</Label>
 
           {hasChildren && (
             <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />
diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx
index 7d07f5776e..198a195309 100644
--- a/gui/src/renderer/components/CountryRow.tsx
+++ b/gui/src/renderer/components/CountryRow.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Component, Styles, View } from 'reactxp';
 import styled from 'styled-components';
+import { colors } from '../../config.json';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
 import Accordion from './Accordion';
 import * as Cell from './Cell';
@@ -40,6 +41,12 @@ const StyledChevronButton = styled(ChevronButton)({
   marginLeft: '18px',
 });
 
+const Label = styled(Cell.Label)({
+  '[disabled] &': {
+    color: colors.white20,
+  },
+});
+
 export default class CountryRow extends Component<IProps> {
   private buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -97,7 +104,7 @@ export default class CountryRow extends Component<IProps> {
             active={this.props.hasActiveRelays}
             selected={this.props.selected}
           />
-          <Cell.Label>{this.props.name}</Cell.Label>
+          <Label>{this.props.name}</Label>
           {hasChildren ? (
             <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />
           ) : null}
diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx
index ff1614d846..8069679cbc 100644
--- a/gui/src/renderer/components/RelayRow.tsx
+++ b/gui/src/renderer/components/RelayRow.tsx
@@ -20,6 +20,12 @@ const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({
   backgroundColor: !props.selected ? colors.blue20 : undefined,
 }));
 
+const Label = styled(Cell.Label)({
+  '[disabled] &': {
+    color: colors.white20,
+  },
+});
+
 export default class RelayRow extends Component<IProps> {
   public static compareProps(oldProps: IProps, nextProps: IProps) {
     return (
@@ -42,7 +48,7 @@ export default class RelayRow extends Component<IProps> {
         disabled={!this.props.active}>
         <RelayStatusIndicator active={this.props.active} selected={this.props.selected} />
 
-        <Cell.Label>{this.props.hostname}</Cell.Label>
+        <Label>{this.props.hostname}</Label>
       </Button>
     );
   }