Convert Preferences from ReactXP

2 files changed, 139 insertions, 158 deletions

diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index a7d28e145d..0b56c53221 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { Component, View } from 'reactxp';
 import { messages } from '../../shared/gettext';
 import * as Cell from './Cell';
-import { Container, Layout } from './Layout';
+import { Layout } from './Layout';
 import {
   BackBarItem,
   NavigationBar,
@@ -11,7 +10,7 @@ import {
   NavigationScrollbars,
   TitleBarItem,
 } from './NavigationBar';
-import styles from './PreferencesStyles';
+import { StyledContainer, StyledContent, StyledSeparator } from './PreferencesStyles';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 export interface IProps {
@@ -34,166 +33,151 @@ export interface IProps {
   onClose: () => void;
 }
 
-export default class Preferences extends Component<IProps> {
+export default class Preferences extends React.Component<IProps> {
   public render() {
     return (
       <Layout>
-        <Container>
-          <View style={styles.preferences}>
-            <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('preferences-nav', 'Preferences')
-                    }
-                  </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('preferences-nav', 'Preferences')
+                  }
+                </TitleBarItem>
+              </NavigationItems>
+            </NavigationBar>
 
-              <View style={styles.preferences__container}>
-                <NavigationScrollbars>
-                  <SettingsHeader>
-                    <HeaderTitle>
-                      {messages.pgettext('preferences-view', 'Preferences')}
-                    </HeaderTitle>
-                  </SettingsHeader>
+            <NavigationScrollbars>
+              <SettingsHeader>
+                <HeaderTitle>{messages.pgettext('preferences-view', 'Preferences')}</HeaderTitle>
+              </SettingsHeader>
 
-                  <View style={styles.preferences__content}>
-                    <Cell.Container>
-                      <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Launch app on start-up')}
-                      </Cell.Label>
-                      <Cell.Switch isOn={this.props.autoStart} onChange={this.props.setAutoStart} />
-                    </Cell.Container>
-                    <View style={styles.preferences__separator} />
+              <StyledContent>
+                <Cell.Container>
+                  <Cell.Label>
+                    {messages.pgettext('preferences-view', 'Launch app on start-up')}
+                  </Cell.Label>
+                  <Cell.Switch isOn={this.props.autoStart} onChange={this.props.setAutoStart} />
+                </Cell.Container>
+                <StyledSeparator />
 
-                    <Cell.Container>
-                      <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Auto-connect')}
-                      </Cell.Label>
-                      <Cell.Switch
-                        isOn={this.props.autoConnect}
-                        onChange={this.props.setAutoConnect}
-                      />
-                    </Cell.Container>
-                    <Cell.Footer>
-                      <Cell.FooterText>
-                        {messages.pgettext(
-                          'preferences-view',
-                          'Automatically connect to a server when the app launches.',
-                        )}
-                      </Cell.FooterText>
-                    </Cell.Footer>
+                <Cell.Container>
+                  <Cell.Label>{messages.pgettext('preferences-view', 'Auto-connect')}</Cell.Label>
+                  <Cell.Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
+                </Cell.Container>
+                <Cell.Footer>
+                  <Cell.FooterText>
+                    {messages.pgettext(
+                      'preferences-view',
+                      'Automatically connect to a server when the app launches.',
+                    )}
+                  </Cell.FooterText>
+                </Cell.Footer>
 
-                    <Cell.Container>
-                      <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Local network sharing')}
-                      </Cell.Label>
-                      <Cell.Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
-                    </Cell.Container>
-                    <Cell.Footer>
-                      <Cell.FooterText>
-                        {messages.pgettext(
-                          'preferences-view',
-                          'Allows access to other devices on the same network for sharing, printing etc.',
-                        )}
-                      </Cell.FooterText>
-                    </Cell.Footer>
+                <Cell.Container>
+                  <Cell.Label>
+                    {messages.pgettext('preferences-view', 'Local network sharing')}
+                  </Cell.Label>
+                  <Cell.Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
+                </Cell.Container>
+                <Cell.Footer>
+                  <Cell.FooterText>
+                    {messages.pgettext(
+                      'preferences-view',
+                      'Allows access to other devices on the same network for sharing, printing etc.',
+                    )}
+                  </Cell.FooterText>
+                </Cell.Footer>
+
+                <Cell.Container>
+                  <Cell.Label>{messages.pgettext('preferences-view', 'Notifications')}</Cell.Label>
+                  <Cell.Switch
+                    isOn={this.props.enableSystemNotifications}
+                    onChange={this.props.setEnableSystemNotifications}
+                  />
+                </Cell.Container>
+                <Cell.Footer>
+                  <Cell.FooterText>
+                    {messages.pgettext(
+                      'preferences-view',
+                      'Enable or disable system notifications. The critical notifications will always be displayed.',
+                    )}
+                  </Cell.FooterText>
+                </Cell.Footer>
 
+                <Cell.Container>
+                  <Cell.Label>
+                    {messages.pgettext('preferences-view', 'Monochromatic tray icon')}
+                  </Cell.Label>
+                  <Cell.Switch
+                    isOn={this.props.monochromaticIcon}
+                    onChange={this.props.setMonochromaticIcon}
+                  />
+                </Cell.Container>
+                <Cell.Footer>
+                  <Cell.FooterText>
+                    {messages.pgettext(
+                      'preferences-view',
+                      'Use a monochromatic tray icon instead of a colored one.',
+                    )}
+                  </Cell.FooterText>
+                </Cell.Footer>
+
+                {this.props.enableStartMinimizedToggle ? (
+                  <React.Fragment>
                     <Cell.Container>
                       <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Notifications')}
+                        {messages.pgettext('preferences-view', 'Start minimized')}
                       </Cell.Label>
                       <Cell.Switch
-                        isOn={this.props.enableSystemNotifications}
-                        onChange={this.props.setEnableSystemNotifications}
+                        isOn={this.props.startMinimized}
+                        onChange={this.props.setStartMinimized}
                       />
                     </Cell.Container>
                     <Cell.Footer>
                       <Cell.FooterText>
                         {messages.pgettext(
                           'preferences-view',
-                          'Enable or disable system notifications. The critical notifications will always be displayed.',
+                          'Show only the tray icon when the app starts.',
                         )}
                       </Cell.FooterText>
                     </Cell.Footer>
+                  </React.Fragment>
+                ) : undefined}
 
-                    <Cell.Container>
-                      <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Monochromatic tray icon')}
-                      </Cell.Label>
-                      <Cell.Switch
-                        isOn={this.props.monochromaticIcon}
-                        onChange={this.props.setMonochromaticIcon}
-                      />
-                    </Cell.Container>
-                    <Cell.Footer>
-                      <Cell.FooterText>
-                        {messages.pgettext(
+                <Cell.Container disabled={this.props.isBeta}>
+                  <Cell.Label>{messages.pgettext('preferences-view', 'Beta program')}</Cell.Label>
+                  <Cell.Switch
+                    isOn={this.props.showBetaReleases}
+                    onChange={this.props.setShowBetaReleases}
+                  />
+                </Cell.Container>
+                <Cell.Footer>
+                  <Cell.FooterText>
+                    {this.props.isBeta
+                      ? messages.pgettext(
+                          'preferences-view',
+                          'This option is unavailable while using a beta version.',
+                        )
+                      : messages.pgettext(
                           'preferences-view',
-                          'Use a monochromatic tray icon instead of a colored one.',
+                          'Enable to get notified when new beta versions of the app are released.',
                         )}
-                      </Cell.FooterText>
-                    </Cell.Footer>
-
-                    {this.props.enableStartMinimizedToggle ? (
-                      <React.Fragment>
-                        <Cell.Container>
-                          <Cell.Label>
-                            {messages.pgettext('preferences-view', 'Start minimized')}
-                          </Cell.Label>
-                          <Cell.Switch
-                            isOn={this.props.startMinimized}
-                            onChange={this.props.setStartMinimized}
-                          />
-                        </Cell.Container>
-                        <Cell.Footer>
-                          <Cell.FooterText>
-                            {messages.pgettext(
-                              'preferences-view',
-                              'Show only the tray icon when the app starts.',
-                            )}
-                          </Cell.FooterText>
-                        </Cell.Footer>
-                      </React.Fragment>
-                    ) : undefined}
-
-                    <Cell.Container disabled={this.props.isBeta}>
-                      <Cell.Label>
-                        {messages.pgettext('preferences-view', 'Beta program')}
-                      </Cell.Label>
-                      <Cell.Switch
-                        isOn={this.props.showBetaReleases}
-                        onChange={this.props.setShowBetaReleases}
-                      />
-                    </Cell.Container>
-                    <Cell.Footer>
-                      <Cell.FooterText>
-                        {this.props.isBeta
-                          ? messages.pgettext(
-                              'preferences-view',
-                              'This option is unavailable while using a beta version.',
-                            )
-                          : messages.pgettext(
-                              'preferences-view',
-                              'Enable to get notified when new beta versions of the app are released.',
-                            )}
-                      </Cell.FooterText>
-                    </Cell.Footer>
-                  </View>
-                </NavigationScrollbars>
-              </View>
-            </NavigationContainer>
-          </View>
-        </Container>
+                  </Cell.FooterText>
+                </Cell.Footer>
+              </StyledContent>
+            </NavigationScrollbars>
+          </NavigationContainer>
+        </StyledContainer>
       </Layout>
     );
   }
diff --git a/gui/src/renderer/components/PreferencesStyles.tsx b/gui/src/renderer/components/PreferencesStyles.tsx
index 73c9691f7f..b9986f2c38 100644
--- a/gui/src/renderer/components/PreferencesStyles.tsx
+++ b/gui/src/renderer/components/PreferencesStyles.tsx
@@ -1,21 +1,18 @@
-import { Styles } from 'reactxp';
+import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { Container } from './Layout';
 
-export default {
-  preferences: Styles.createViewStyle({
-    backgroundColor: colors.darkBlue,
-    flex: 1,
-  }),
-  preferences__container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
-  preferences__content: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-    marginBottom: 2,
-  }),
-  preferences__separator: Styles.createViewStyle({
-    height: 1,
-  }),
-};
+export const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
+export const StyledContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '2px',
+});
+
+export const StyledSeparator = styled.div({
+  height: '1px',
+});