Improve appearance for Automatic button in bridge selector

2 files changed, 56 insertions, 82 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>
     );
   }