Merge branch 'convert-select-location-from-reactxp' into master

7 files changed, 125 insertions, 150 deletions

diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx
index e186898b52..5bb74467aa 100644
--- a/gui/src/renderer/components/CityRow.tsx
+++ b/gui/src/renderer/components/CityRow.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Component, View } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
@@ -40,7 +39,7 @@ const Label = styled(Cell.Label)({
   fontSize: '16px',
 });
 
-export default class CityRow extends Component<IProps> {
+export default class CityRow extends React.Component<IProps> {
   private buttonRef = React.createRef<HTMLButtonElement>();
 
   public static compareProps(oldProps: IProps, nextProps: IProps): boolean {
@@ -81,7 +80,7 @@ export default class CityRow extends Component<IProps> {
     const hasChildren = React.Children.count(this.props.children) > 1;
 
     return (
-      <View>
+      <>
         <Button
           ref={this.buttonRef}
           onClick={this.handleClick}
@@ -107,7 +106,7 @@ export default class CityRow extends Component<IProps> {
             {this.props.children}
           </Accordion>
         )}
-      </View>
+      </>
     );
   }
 
diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx
index c284aeb40c..d09cff0e31 100644
--- a/gui/src/renderer/components/CountryRow.tsx
+++ b/gui/src/renderer/components/CountryRow.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Component, Styles, View } from 'reactxp';
 import styled from 'styled-components';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
 import Accordion from './Accordion';
@@ -23,13 +22,6 @@ interface IProps {
   children?: CityRowElement | CityRowElement[];
 }
 
-const styles = {
-  container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 0,
-  }),
-};
-
 const Button = styled(Cell.CellButton)({
   paddingRight: '16px',
   // The actual padding is 22px except for the tick icon which has 18.
@@ -46,7 +38,7 @@ const Label = styled(Cell.Label)({
   fontSize: '16px',
 });
 
-export default class CountryRow extends Component<IProps> {
+export default class CountryRow extends React.Component<IProps> {
   private buttonRef = React.createRef<HTMLButtonElement>();
 
   public static compareProps(oldProps: IProps, nextProps: IProps) {
@@ -93,7 +85,7 @@ export default class CountryRow extends Component<IProps> {
     const hasChildren = numChildren > 1 || numOnlyChildChildren > 1;
 
     return (
-      <View style={styles.container}>
+      <>
         <Button
           ref={this.buttonRef}
           onClick={this.handleClick}
@@ -118,7 +110,7 @@ export default class CountryRow extends Component<IProps> {
             {this.props.children}
           </Accordion>
         )}
-      </View>
+      </>
     );
   }
 
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index b3396fb578..bd30d5d621 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { Component, View } from 'reactxp';
 import { colors } from '../../config.json';
 import {
   compareRelayLocation,
@@ -35,7 +34,7 @@ interface ILocationListProps<SpecialValueType> {
   onSelect?: (value: LocationSelection<SpecialValueType>) => void;
 }
 
-export default class LocationList<SpecialValueType> extends Component<
+export default class LocationList<SpecialValueType> extends React.Component<
   ILocationListProps<SpecialValueType>,
   ILocationListState<SpecialValueType>
 > {
@@ -81,7 +80,7 @@ export default class LocationList<SpecialValueType> extends Component<
       selection && selection.type === LocationSelectionType.relay ? selection.value : undefined;
 
     return (
-      <View>
+      <>
         {React.Children.map(this.props.children, (child) => {
           if (React.isValidElement(child)) {
             if (child.type === SpecialLocations) {
@@ -104,7 +103,7 @@ export default class LocationList<SpecialValueType> extends Component<
           }
           return child;
         })}
-      </View>
+      </>
     );
   }
 
@@ -192,7 +191,7 @@ interface ISpecialLocationsProps<T> {
 
 export function SpecialLocations<T>(props: ISpecialLocationsProps<T>) {
   return (
-    <View>
+    <>
       {React.Children.map(props.children, (child) => {
         if (React.isValidElement(child) && child.type === SpecialLocation) {
           const isSelected = props.selectedValue === child.props.value;
@@ -207,7 +206,7 @@ export function SpecialLocations<T>(props: ISpecialLocationsProps<T>) {
           return undefined;
         }
       })}
-    </View>
+    </>
   );
 }
 
@@ -215,6 +214,12 @@ const StyledSpecialLocationCellButton = styled(Cell.CellButton)({
   paddingLeft: '18px',
 });
 
+const StyledSpecialLocationCellLabel = styled(Cell.Label)({
+  fontFamily: 'Open Sans',
+  fontWeight: 'normal',
+  fontSize: '16px',
+});
+
 const StyledSpecialLocationIcon = styled(Cell.Icon)({
   marginRight: '8px',
 });
@@ -226,7 +231,7 @@ interface ISpecialLocationProps<T> {
   onSelect?: (value: T) => void;
 }
 
-export class SpecialLocation<T> extends Component<ISpecialLocationProps<T>> {
+export class SpecialLocation<T> extends React.Component<ISpecialLocationProps<T>> {
   public render() {
     return (
       <StyledSpecialLocationCellButton selected={this.props.isSelected} onClick={this.onSelect}>
@@ -236,7 +241,7 @@ export class SpecialLocation<T> extends Component<ISpecialLocationProps<T>> {
           height={24}
           width={24}
         />
-        <Cell.Label>{this.props.children}</Cell.Label>
+        <StyledSpecialLocationCellLabel>{this.props.children}</StyledSpecialLocationCellLabel>
       </StyledSpecialLocationCellButton>
     );
   }
@@ -265,10 +270,10 @@ interface ICommonCellProps<T> {
   ref?: React.Ref<T>;
 }
 
-export class RelayLocations extends Component<IRelayLocationsProps> {
+export class RelayLocations extends React.Component<IRelayLocationsProps> {
   public render() {
     return (
-      <View>
+      <>
         {this.props.source.map((relayCountry) => {
           const countryLocation: RelayLocation = { country: relayCountry.code };
 
@@ -320,7 +325,7 @@ export class RelayLocations extends Component<IRelayLocationsProps> {
             </CountryRow>
           );
         })}
-      </View>
+      </>
     );
   }
 
diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx
index e0a8dc04fc..0b3602252b 100644
--- a/gui/src/renderer/components/RelayRow.tsx
+++ b/gui/src/renderer/components/RelayRow.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Component } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
@@ -26,7 +25,7 @@ const Label = styled(Cell.Label)({
   fontSize: '16px',
 });
 
-export default class RelayRow extends Component<IProps> {
+export default class RelayRow extends React.Component<IProps> {
   public static compareProps(oldProps: IProps, nextProps: IProps) {
     return (
       oldProps.hostname === nextProps.hostname &&
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index 4b6b5fea45..ef4567059a 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { Component, Styles, View } from 'reactxp';
 import { colors } from '../../config.json';
 import * as Cell from './Cell';
 
-const styles = {
-  relayStatus: Styles.createViewStyle({
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    marginLeft: 4,
-    marginRight: 12,
-  }),
-  inactive: Styles.createViewStyle({
-    backgroundColor: colors.red95,
-  }),
-  active: Styles.createViewStyle({
-    backgroundColor: colors.green90,
-  }),
-};
+const StyledRelayStatus = styled.div((props: { active: boolean }) => ({
+  width: '16px',
+  height: '16px',
+  borderRadius: '8px',
+  margin: '0 12px 0 4px',
+  backgroundColor: props.active ? colors.green90 : colors.red95,
+}));
 
 const TickIcon = styled(Cell.Icon)({
   marginRight: '8px',
@@ -29,12 +20,10 @@ interface IProps {
   selected: boolean;
 }
 
-export default class RelayStatusIndicator extends Component<IProps> {
-  public render() {
-    return this.props.selected ? (
-      <TickIcon tintColor={colors.white} source="icon-tick" height={24} width={24} />
-    ) : (
-      <View style={[styles.relayStatus, this.props.active ? styles.active : styles.inactive]} />
-    );
-  }
+export default function RelayStatusIndicator(props: IProps) {
+  return props.selected ? (
+    <TickIcon tintColor={colors.white} source="icon-tick" height={24} width={24} />
+  ) : (
+    <StyledRelayStatus active={props.active} />
+  );
 }
diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx
index bb416a41ae..059b9f9692 100644
--- a/gui/src/renderer/components/SelectLocation.tsx
+++ b/gui/src/renderer/components/SelectLocation.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Component, View } from 'reactxp';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
@@ -8,7 +7,7 @@ import { LocationScope } from '../redux/userinterface/reducers';
 import BridgeLocations, { SpecialBridgeLocationType } from './BridgeLocations';
 import CustomScrollbars from './CustomScrollbars';
 import ExitLocations from './ExitLocations';
-import { Container, Layout } from './Layout';
+import { Layout } from './Layout';
 import LocationList, { LocationSelection, LocationSelectionType } from './LocationList';
 import {
   CloseBarItem,
@@ -19,7 +18,12 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import { ScopeBarItem } from './ScopeBar';
-import styles, { StyledScopeBar } from './SelectLocationStyles';
+import {
+  StyledContainer,
+  StyledContent,
+  StyledNavigationBarAttachment,
+  StyledScopeBar,
+} from './SelectLocationStyles';
 import { HeaderSubTitle } from './SettingsHeader';
 
 interface IProps {
@@ -41,7 +45,7 @@ interface ISelectLocationSnapshot {
   expandedLocations: RelayLocation[];
 }
 
-export default class SelectLocation extends Component<IProps> {
+export default class SelectLocation extends React.Component<IProps> {
   private scrollView = React.createRef<CustomScrollbars>();
   private spacePreAllocationViewRef = React.createRef<SpacePreAllocationView>();
   private selectedExitLocationRef = React.createRef<React.ReactInstance>();
@@ -86,79 +90,71 @@ export default class SelectLocation extends Component<IProps> {
   public render() {
     return (
       <Layout>
-        <Container>
-          <View style={styles.select_location}>
-            <NavigationContainer>
-              <NavigationBar alwaysDisplayBarTitle={true}>
-                <NavigationItems>
-                  <CloseBarItem action={this.props.onClose} />
-                  <TitleBarItem>
-                    {
-                      // TRANSLATORS: Title label in navigation bar
-                      messages.pgettext('select-location-nav', 'Select location')
-                    }
-                  </TitleBarItem>
-                </NavigationItems>
-                <View style={styles.navigationBarAttachment}>
-                  <HeaderSubTitle>
-                    {this.props.allowBridgeSelection
-                      ? messages.pgettext(
-                          'select-location-view',
-                          'While connected, your traffic will be routed through two secure locations, the entry point (a bridge server) and the exit point (a VPN server).',
-                        )
-                      : messages.pgettext(
-                          'select-location-view',
-                          'While connected, your real location is masked with a private and secure location in the selected region.',
-                        )}
-                  </HeaderSubTitle>
-                  {this.props.allowBridgeSelection && (
-                    <StyledScopeBar
-                      defaultSelectedIndex={this.props.locationScope}
-                      onChange={this.props.onChangeLocationScope}>
-                      <ScopeBarItem>
-                        {messages.pgettext('select-location-nav', 'Entry')}
-                      </ScopeBarItem>
-                      <ScopeBarItem>
-                        {messages.pgettext('select-location-nav', 'Exit')}
-                      </ScopeBarItem>
-                    </StyledScopeBar>
-                  )}
-                </View>
-              </NavigationBar>
-              <View style={styles.container}>
-                <NavigationScrollbars ref={this.scrollView}>
-                  <SpacePreAllocationView ref={this.spacePreAllocationViewRef}>
-                    <View style={styles.content}>
-                      {this.props.locationScope === LocationScope.relay ? (
-                        <ExitLocations
-                          ref={this.exitLocationList}
-                          source={this.props.relayLocations}
-                          defaultExpandedLocations={this.getExpandedLocationsFromSnapshot()}
-                          selectedValue={this.props.selectedExitLocation}
-                          selectedElementRef={this.selectedExitLocationRef}
-                          onSelect={this.onSelectExitLocation}
-                          onWillExpand={this.onWillExpand}
-                          onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
-                        />
-                      ) : (
-                        <BridgeLocations
-                          ref={this.bridgeLocationList}
-                          source={this.props.bridgeLocations}
-                          defaultExpandedLocations={this.getExpandedLocationsFromSnapshot()}
-                          selectedValue={this.props.selectedBridgeLocation}
-                          selectedElementRef={this.selectedBridgeLocationRef}
-                          onSelect={this.onSelectBridgeLocation}
-                          onWillExpand={this.onWillExpand}
-                          onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
-                        />
+        <StyledContainer>
+          <NavigationContainer>
+            <NavigationBar alwaysDisplayBarTitle={true}>
+              <NavigationItems>
+                <CloseBarItem action={this.props.onClose} />
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('select-location-nav', 'Select location')
+                  }
+                </TitleBarItem>
+              </NavigationItems>
+              <StyledNavigationBarAttachment>
+                <HeaderSubTitle>
+                  {this.props.allowBridgeSelection
+                    ? messages.pgettext(
+                        'select-location-view',
+                        'While connected, your traffic will be routed through two secure locations, the entry point (a bridge server) and the exit point (a VPN server).',
+                      )
+                    : messages.pgettext(
+                        'select-location-view',
+                        'While connected, your real location is masked with a private and secure location in the selected region.',
                       )}
-                    </View>
-                  </SpacePreAllocationView>
-                </NavigationScrollbars>
-              </View>
-            </NavigationContainer>
-          </View>
-        </Container>
+                </HeaderSubTitle>
+                {this.props.allowBridgeSelection && (
+                  <StyledScopeBar
+                    defaultSelectedIndex={this.props.locationScope}
+                    onChange={this.props.onChangeLocationScope}>
+                    <ScopeBarItem>{messages.pgettext('select-location-nav', 'Entry')}</ScopeBarItem>
+                    <ScopeBarItem>{messages.pgettext('select-location-nav', 'Exit')}</ScopeBarItem>
+                  </StyledScopeBar>
+                )}
+              </StyledNavigationBarAttachment>
+            </NavigationBar>
+            <NavigationScrollbars ref={this.scrollView}>
+              <SpacePreAllocationView ref={this.spacePreAllocationViewRef}>
+                <StyledContent>
+                  {this.props.locationScope === LocationScope.relay ? (
+                    <ExitLocations
+                      ref={this.exitLocationList}
+                      source={this.props.relayLocations}
+                      defaultExpandedLocations={this.getExpandedLocationsFromSnapshot()}
+                      selectedValue={this.props.selectedExitLocation}
+                      selectedElementRef={this.selectedExitLocationRef}
+                      onSelect={this.onSelectExitLocation}
+                      onWillExpand={this.onWillExpand}
+                      onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
+                    />
+                  ) : (
+                    <BridgeLocations
+                      ref={this.bridgeLocationList}
+                      source={this.props.bridgeLocations}
+                      defaultExpandedLocations={this.getExpandedLocationsFromSnapshot()}
+                      selectedValue={this.props.selectedBridgeLocation}
+                      selectedElementRef={this.selectedBridgeLocationRef}
+                      onSelect={this.onSelectBridgeLocation}
+                      onWillExpand={this.onWillExpand}
+                      onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
+                    />
+                  )}
+                </StyledContent>
+              </SpacePreAllocationView>
+            </NavigationScrollbars>
+          </NavigationContainer>
+        </StyledContainer>
       </Layout>
     );
   }
@@ -236,7 +232,7 @@ interface ISpacePreAllocationView {
   children?: React.ReactNode;
 }
 
-class SpacePreAllocationView extends Component<ISpacePreAllocationView> {
+class SpacePreAllocationView extends React.Component<ISpacePreAllocationView> {
   private ref = React.createRef<HTMLDivElement>();
 
   public allocate(height: number) {
diff --git a/gui/src/renderer/components/SelectLocationStyles.tsx b/gui/src/renderer/components/SelectLocationStyles.tsx
index e9e9b5a944..6a3685ffb4 100644
--- a/gui/src/renderer/components/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/SelectLocationStyles.tsx
@@ -1,29 +1,24 @@
-import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { Container } from './Layout';
 import { ScopeBar } from './ScopeBar';
 
+export const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
 export const StyledScopeBar = styled(ScopeBar)({
   marginTop: '8px',
 });
 
-export default {
-  select_location: Styles.createViewStyle({
-    backgroundColor: colors.darkBlue,
-    flex: 1,
-  }),
-  container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
-  content: Styles.createViewStyle({
-    overflow: 'visible',
-  }),
-  navigationBarAttachment: Styles.createTextStyle({
-    marginTop: 8,
-    paddingHorizontal: 4,
-  }),
-  selectedCell: Styles.createViewStyle({
-    backgroundColor: colors.green,
-  }),
-};
+export const StyledContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'visible',
+});
+
+export const StyledNavigationBarAttachment = styled.div({
+  marginTop: '8px',
+  paddingHorizontal: '4px',
+});