diff options
Diffstat (limited to 'gui')
| -rw-r--r-- | gui/src/renderer/components/SelectLanguage.tsx | 87 |
1 files changed, 38 insertions, 49 deletions
diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx index 58f4a7b922..30a37a8a1d 100644 --- a/gui/src/renderer/components/SelectLanguage.tsx +++ b/gui/src/renderer/components/SelectLanguage.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; -import { Component, Styles, View } from 'reactxp'; import styled from 'styled-components'; import { colors } from '../../config.json'; import { messages } from '../../shared/gettext'; @@ -28,15 +27,9 @@ interface IState { source: Array<ISelectorItem<string>>; } -const styles = { - page: Styles.createViewStyle({ - backgroundColor: colors.darkBlue, - flex: 1, - }), - container: Styles.createViewStyle({ - flex: 1, - }), -}; +const StyledContainer = styled(Container)({ + backgroundColor: colors.darkBlue, +}); const StyledNavigationScrollbars = styled(NavigationScrollbars)({ flex: 1, @@ -46,7 +39,7 @@ const StyledSelector = (styled(Selector)({ marginBottom: 0, }) as unknown) as new <T>() => Selector<T>; -export default class SelectLanguage extends Component<IProps, IState> { +export default class SelectLanguage extends React.Component<IProps, IState> { private scrollView = React.createRef<CustomScrollbars>(); private selectedCellRef = React.createRef<SelectorCell<string>>(); @@ -67,45 +60,41 @@ export default class SelectLanguage extends Component<IProps, IState> { public render() { return ( <Layout> - <Container> - <View style={styles.page}> - <NavigationContainer> - <NavigationBar> - <NavigationItems> - <BackBarItem action={this.props.onClose}> - { - // TRANSLATORS: Back button in navigation bar - messages.pgettext('navigation-bar', 'Settings') - } - </BackBarItem> - <TitleBarItem> - { - // TRANSLATORS: Title label in navigation bar - messages.pgettext('select-language-nav', 'Select language') - } - </TitleBarItem> - </NavigationItems> - </NavigationBar> + <StyledContainer> + <NavigationContainer> + <NavigationBar> + <NavigationItems> + <BackBarItem action={this.props.onClose}> + { + // TRANSLATORS: Back button in navigation bar + messages.pgettext('navigation-bar', 'Settings') + } + </BackBarItem> + <TitleBarItem> + { + // TRANSLATORS: Title label in navigation bar + messages.pgettext('select-language-nav', 'Select language') + } + </TitleBarItem> + </NavigationItems> + </NavigationBar> - <View style={styles.container}> - <StyledNavigationScrollbars> - <SettingsHeader> - <HeaderTitle> - {messages.pgettext('select-language-nav', 'Select language')} - </HeaderTitle> - </SettingsHeader> - <StyledSelector - title="" - values={this.state.source} - value={this.props.preferredLocale} - onSelect={this.props.setPreferredLocale} - selectedCellRef={this.selectedCellRef} - /> - </StyledNavigationScrollbars> - </View> - </NavigationContainer> - </View> - </Container> + <StyledNavigationScrollbars> + <SettingsHeader> + <HeaderTitle> + {messages.pgettext('select-language-nav', 'Select language')} + </HeaderTitle> + </SettingsHeader> + <StyledSelector + title="" + values={this.state.source} + value={this.props.preferredLocale} + onSelect={this.props.setPreferredLocale} + selectedCellRef={this.selectedCellRef} + /> + </StyledNavigationScrollbars> + </NavigationContainer> + </StyledContainer> </Layout> ); } |