Merge branch 'fix-automatic-bridge'

3 files changed, 107 insertions, 118 deletions

diff --git a/gui/src/renderer/components/BridgeLocations.tsx b/gui/src/renderer/components/BridgeLocations.tsx
index 2eed268e2f..355b462222 100644
--- a/gui/src/renderer/components/BridgeLocations.tsx
+++ b/gui/src/renderer/components/BridgeLocations.tsx
@@ -1,13 +1,8 @@
 import * as React from 'react';
-import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
-import { useBoolean } from '../lib/utilityHooks';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
-import * as AppButton from './AppButton';
-import ImageView from './ImageView';
 import LocationList, {
   LocationSelection,
   LocationSelectionType,
@@ -16,21 +11,11 @@ import LocationList, {
   SpecialLocationIcon,
   SpecialLocations,
 } from './LocationList';
-import { ModalAlert, ModalAlertType } from './Modal';
 
 export enum SpecialBridgeLocationType {
   closestToExit = 0,
 }
 
-const StyledInfoIcon = styled(ImageView)({
-  marginRight: '9px',
-});
-
-const StyledAutomaticLabel = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
 interface IBridgeLocationsProps {
   source: IRelayLocationRedux[];
   locale: string;
@@ -46,8 +31,6 @@ const BridgeLocations = React.forwardRef(function BridgeLocationsT(
   props: IBridgeLocationsProps,
   ref: React.Ref<LocationList<SpecialBridgeLocationType>>,
 ) {
-  const [automaticInfoVisible, showAutomaticInfo, hideAutomaticInfo] = useBoolean(false);
-
   const selectedValue:
     | LocationSelection<SpecialBridgeLocationType>
     | undefined = props.selectedValue
@@ -57,52 +40,30 @@ const BridgeLocations = React.forwardRef(function BridgeLocationsT(
     : undefined;
 
   return (
-    <>
-      <LocationList
-        ref={ref}
-        defaultExpandedLocations={props.defaultExpandedLocations}
-        selectedValue={selectedValue}
-        selectedElementRef={props.selectedElementRef}
-        onSelect={props.onSelect}>
-        <SpecialLocations>
-          <SpecialLocation
-            icon={SpecialLocationIcon.geoLocation}
-            value={SpecialBridgeLocationType.closestToExit}>
-            <StyledAutomaticLabel>
-              {messages.gettext('Automatic')}
-              <StyledInfoIcon
-                source="icon-info"
-                width={18}
-                tintColor={colors.white}
-                tintHoverColor={colors.white80}
-                onClick={showAutomaticInfo}
-              />
-            </StyledAutomaticLabel>
-          </SpecialLocation>
-        </SpecialLocations>
-        <RelayLocations
-          source={props.source}
-          locale={props.locale}
-          onWillExpand={props.onWillExpand}
-          onTransitionEnd={props.onTransitionEnd}
-        />
-      </LocationList>
-
-      <ModalAlert
-        isOpen={automaticInfoVisible}
-        message={messages.pgettext(
-          'select-location-view',
-          'The app selects a random bridge server, but servers have a higher probability the closer they are to you.',
-        )}
-        type={ModalAlertType.info}
-        buttons={[
-          <AppButton.BlueButton key="back" onClick={hideAutomaticInfo}>
-            {messages.gettext('Got it!')}
-          </AppButton.BlueButton>,
-        ]}
-        close={hideAutomaticInfo}
+    <LocationList
+      ref={ref}
+      defaultExpandedLocations={props.defaultExpandedLocations}
+      selectedValue={selectedValue}
+      selectedElementRef={props.selectedElementRef}
+      onSelect={props.onSelect}>
+      <SpecialLocations>
+        <SpecialLocation
+          icon={SpecialLocationIcon.geoLocation}
+          value={SpecialBridgeLocationType.closestToExit}
+          info={messages.pgettext(
+            'select-location-view',
+            'The app selects a random bridge server, but servers have a higher probability the closer they are to you.',
+          )}>
+          {messages.gettext('Automatic')}
+        </SpecialLocation>
+      </SpecialLocations>
+      <RelayLocations
+        source={props.source}
+        locale={props.locale}
+        onWillExpand={props.onWillExpand}
+        onTransitionEnd={props.onTransitionEnd}
       />
-    </>
+    </LocationList>
   );
 });
 
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 7b2b0e9b20..729cb59f3c 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -16,7 +16,13 @@ import {
   IRelayLocationRelayRedux,
 } from '../redux/settings/reducers';
 import * as Cell from './cell';
-import LocationRow from './LocationRow';
+import InfoButton from './InfoButton';
+import LocationRow, {
+  StyledLocationRowButton,
+  StyledLocationRowContainer,
+  StyledLocationRowIcon,
+  StyledLocationRowLabel,
+} from './LocationRow';
 
 export enum LocationSelectionType {
   relay = 'relay',
@@ -216,43 +222,50 @@ export function SpecialLocations<T>(props: ISpecialLocationsProps<T>) {
   );
 }
 
-const StyledSpecialLocationCellButton = styled(Cell.CellButton)({
-  paddingLeft: '18px',
-});
-
-const StyledSpecialLocationCellLabel = styled(Cell.Label)({
-  fontFamily: 'Open Sans',
-  fontWeight: 400,
-  fontSize: '16px',
+const StyledLocationRowContainerWithMargin = styled(StyledLocationRowContainer)({
+  marginBottom: 1,
 });
 
 const StyledSpecialLocationIcon = styled(Cell.Icon)({
+  flex: 0,
+  marginLeft: '2px',
   marginRight: '8px',
 });
 
+const StyledSpecialLocationInfoButton = styled(InfoButton)({
+  margin: 0,
+  padding: '0 25px',
+});
+
 interface ISpecialLocationProps<T> {
   icon: SpecialLocationIcon;
   value: T;
   isSelected?: boolean;
   onSelect?: (value: T) => void;
+  info?: string;
   forwardedRef?: React.Ref<HTMLButtonElement>;
 }
 
 export class SpecialLocation<T> extends React.Component<ISpecialLocationProps<T>> {
   public render() {
     return (
-      <StyledSpecialLocationCellButton
-        ref={this.props.forwardedRef}
-        selected={this.props.isSelected}
-        onClick={this.onSelect}>
-        <StyledSpecialLocationIcon
-          source={this.props.isSelected ? 'icon-tick' : this.props.icon}
-          tintColor={colors.white}
-          height={24}
-          width={24}
+      <StyledLocationRowContainerWithMargin>
+        <StyledLocationRowButton onClick={this.onSelect} selected={this.props.isSelected ?? false}>
+          <StyledSpecialLocationIcon
+            source={this.props.isSelected ? 'icon-tick' : this.props.icon}
+            tintColor={colors.white}
+            height={22}
+            width={22}
+          />
+          <StyledLocationRowLabel>{this.props.children}</StyledLocationRowLabel>
+        </StyledLocationRowButton>
+        <StyledLocationRowIcon
+          as={StyledSpecialLocationInfoButton}
+          message={this.props.info}
+          selected={this.props.isSelected ?? false}
+          aria-label={messages.pgettext('accessibility', 'info')}
         />
-        <StyledSpecialLocationCellLabel>{this.props.children}</StyledSpecialLocationCellLabel>
-      </StyledSpecialLocationCellButton>
+      </StyledLocationRowContainerWithMargin>
     );
   }
 
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index f3d0927c6f..4e083328c5 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -13,52 +13,66 @@ import RelayStatusIndicator from './RelayStatusIndicator';
 
 interface IButtonColorProps {
   selected: boolean;
-  disabled: boolean;
-  location: RelayLocation;
+  disabled?: boolean;
+  location?: RelayLocation;
 }
 
 const buttonColor = (props: IButtonColorProps) => {
-  const background =
-    'hostname' in props.location
-      ? colors.blue20
-      : 'city' in props.location
-      ? colors.blue40
-      : colors.blue;
-  const backgroundHover = 'country' in props.location ? colors.blue80 : colors.blue80;
+  let background = colors.blue;
+  if (props.selected) {
+    background = colors.green;
+  } else if (props.location) {
+    if ('hostname' in props.location) {
+      background = colors.blue20;
+    } else if ('city' in props.location) {
+      background = colors.blue40;
+    }
+  }
+
+  let backgroundHover = colors.blue80;
+  if (props.selected || props.disabled) {
+    backgroundHover = background;
+  } else if (props.location) {
+    backgroundHover = colors.blue80;
+  }
 
   return {
-    backgroundColor: props.selected ? colors.green : background,
+    backgroundColor: background,
     ':not(:disabled):hover': {
-      backgroundColor: props.selected
-        ? colors.green
-        : props.disabled
-        ? background
-        : backgroundHover,
+      backgroundColor: backgroundHover,
     },
   };
 };
 
-const Container = styled(Cell.Container)({
+export const StyledLocationRowContainer = styled(Cell.Container)({
   display: 'flex',
   padding: 0,
   background: 'none',
 });
 
-const Button = styled.button(buttonColor, (props: { location: RelayLocation }) => {
-  const paddingLeft = 'hostname' in props.location ? 50 : 'city' in props.location ? 34 : 18;
+export const StyledLocationRowButton = styled.button(
+  buttonColor,
+  (props: { location?: RelayLocation }) => {
+    const paddingLeft =
+      props.location && 'hostname' in props.location
+        ? 50
+        : props.location && 'city' in props.location
+        ? 34
+        : 18;
 
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: '44px',
-    flex: 1,
-    border: 'none',
-    padding: `0 10px 0 ${paddingLeft}px`,
-    margin: 0,
-  };
-});
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: '44px',
+      flex: 1,
+      border: 'none',
+      padding: `0 10px 0 ${paddingLeft}px`,
+      margin: 0,
+    };
+  },
+);
 
-const StyledChevronButton = styled(ChevronButton)(buttonColor, {
+export const StyledLocationRowIcon = styled.button(buttonColor, {
   position: 'relative',
   alignSelf: 'stretch',
   paddingLeft: '22px',
@@ -77,7 +91,7 @@ const StyledChevronButton = styled(ChevronButton)(buttonColor, {
   },
 });
 
-const Label = styled(Cell.Label)(normalText, {
+export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
   fontWeight: 400,
 });
 
@@ -120,18 +134,19 @@ function LocationRow(props: IProps, ref: React.Ref<HTMLDivElement>) {
 
   return (
     <>
-      <Container ref={ref} disabled={props.disabled}>
-        <Button
+      <StyledLocationRowContainer ref={ref} disabled={props.disabled}>
+        <StyledLocationRowButton
           ref={buttonRef}
           onClick={handleClick}
           selected={props.selected}
           location={props.location}
           disabled={props.disabled}>
           <RelayStatusIndicator active={props.active} selected={props.selected} />
-          <Label>{props.name}</Label>
-        </Button>
+          <StyledLocationRowLabel>{props.name}</StyledLocationRowLabel>
+        </StyledLocationRowButton>
         {hasChildren ? (
-          <StyledChevronButton
+          <StyledLocationRowIcon
+            as={ChevronButton}
             onClick={toggleCollapse}
             up={props.expanded ?? false}
             selected={props.selected}
@@ -145,7 +160,7 @@ function LocationRow(props: IProps, ref: React.Ref<HTMLDivElement>) {
             )}
           />
         ) : null}
-      </Container>
+      </StyledLocationRowContainer>
 
       {hasChildren && (
         <Accordion