Dim labels for locations without active relays

2 files changed, 12 insertions, 2 deletions

diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css
index 34da083707..7e107f237f 100644
--- a/app/components/SelectLocation.css
+++ b/app/components/SelectLocation.css
@@ -84,6 +84,10 @@
   color: #FFFFFF;
 }
 
+.select-location__cell-label--inactive {
+  color: rgba(255, 255, 255, 0.2);
+}
+
 .select-location__cell-icon {
   width: 24px;
   height: 24px;
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 36de7ca9cf..ac00e305d4 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -166,7 +166,10 @@ export default class SelectLocation extends Component {
                 this._relayStatusIndicator(countryHasActiveRelays) }
             </div>
 
-            <div className="select-location__cell-label">{ relayCountry.name }</div>
+            <div className={ 'select-location__cell-label' +
+              (countryHasActiveRelays ? '' : ' select-location__cell-label--inactive') }>
+              { relayCountry.name }
+            </div>
           </div>
 
           { countryHasActiveRelays && <button type="button" className="select-location__collapse-button" onClick={ handleCollapse }>
@@ -217,7 +220,10 @@ export default class SelectLocation extends Component {
             this._relayStatusIndicator(cityHasActiveRelays) }
         </div>
 
-        <div className="select-location__cell-label">{ relayCity.name }</div>
+        <div className={ 'select-location__cell-label' +
+          (cityHasActiveRelays ? '' : ' select-location__cell-label--inactive') }>
+          { relayCity.name }
+        </div>
       </div>
     );
   }