summaryrefslogtreecommitdiffhomepage
path: root/gui
diff options
context:
space:
mode:
Diffstat (limited to 'gui')
-rw-r--r--gui/src/renderer/components/CityRow.tsx7
-rw-r--r--gui/src/renderer/components/CountryRow.tsx14
-rw-r--r--gui/src/renderer/components/LocationList.tsx27
-rw-r--r--gui/src/renderer/components/RelayRow.tsx3
-rw-r--r--gui/src/renderer/components/RelayStatusIndicator.tsx37
-rw-r--r--gui/src/renderer/components/SelectLocation.tsx150
-rw-r--r--gui/src/renderer/components/SelectLocationStyles.tsx37
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',
+});
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.