summaryrefslogtreecommitdiffhomepage
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/css/style.css1
-rw-r--r--app/components/Settings.css125
-rw-r--r--app/components/Settings.js152
-rw-r--r--app/components/SettingsStyles.js140
4 files changed, 214 insertions, 204 deletions
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index eb4353b67e..d3da3124a0 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -10,7 +10,6 @@
@import '../../components/CustomScrollbars.css';
@import '../../components/Login.css';
@import '../../components/Connect.css';
-@import '../../components/Settings.css';
@import '../../components/AdvancedSettings.css';
@import '../../components/Account.css';
@import '../../components/Support.css';
diff --git a/app/components/Settings.css b/app/components/Settings.css
deleted file mode 100644
index 9e49c814f9..0000000000
--- a/app/components/Settings.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.settings {
- background: #192E45;
- height: 100%;
-}
-
-.settings__container {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-.settings__header {
- flex: 0 0 auto;
- padding: 40px 24px 24px;
- position: relative; /* anchor for close button */
-}
-
-.settings__content {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.settings__close {
- position: absolute;
- display: block;
- border: 0;
- padding: 0;
- margin: 0;
- width: 24px;
- height: 24px;
- top: 24px;
- left: 12px;
- background-color: transparent;
- background-image: url(../assets/images/icon-close.svg);
- opacity: 0.6;
- z-index: 1; /* part of .settings__container covers the button */
-}
-
-.settings__title {
- font-family: DINPro;
- font-size: 32px;
- font-weight: 900;
- line-height: 40px;
- color: #FFFFFF;
-}
-
-.settings__cell {
- background-color:rgba(41,71,115,1);
- padding: 15px 24px;
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.settings__cell-disclosure {
- display: block;
- margin-left: 8px;
- color: rgba(255, 255, 255, 0.8);
-}
-
-.settings__cell-spacer {
- height: 24px;
-}
-
-.settings__cell--selected,
-.settings__cell--selected:hover {
- background-color: #44AD4D;
-}
-
-.settings__cell--active:hover {
- background-color: rgba(41,71,115,0.9);
-}
-
-.settings__cell + .settings__cell {
- margin-top: 1px;
-}
-
-.settings__cell-label {
- font-family: DINPro;
- font-size: 20px;
- font-weight: 900;
- line-height: 26px;
- color: #FFFFFF;
- flex: 1 0 auto;
-}
-
-.settings__cell-icon {
- width: 16px;
- flex: 0 0 auto;
- color: rgba(255, 255, 255, 0.8);
-}
-
-.settings__cell-value {
- flex: 0 0 auto;
-}
-
-.settings__account-paid-until-label {
- font-family: "Open Sans";
- font-size: 13px;
- font-weight: 800;
- line-height: 26px; /* matches .cell-label */
- color: rgba(255, 255, 255, 0.8);
- text-transform: uppercase;
-}
-
-.settings__account-paid-until-label--error {
- color: #d0021b;
-}
-
-.settings__cell-footer {
- padding: 8px 24px 24px;
- font-family: "Open Sans";
- font-size: 13px;
- font-weight: 600;
- line-height: 20px;
- color: rgba(255,255,255,0.8);
-}
-
-.settings__footer {
- padding: 24px;
-}
-
-.settings__footer .button + .button { margin-top: 16px; }
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 25a3e6df47..5c991978e9 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,9 +1,10 @@
// @flow
import moment from 'moment';
-import React, { Component } from 'react';
-import { If, Then, Else } from 'react-if';
+import React from 'react';
+import { Component, Text, Image, Button, View } from "reactxp";
import { Layout, Container, Header } from './Layout';
import CustomScrollbars from './CustomScrollbars';
+import styles from "./SettingsStyles";
import Img from './Img';
import type { AccountReduxState } from '../redux/account/reducers';
@@ -39,88 +40,83 @@ export default class Settings extends Component {
<Layout>
<Header hidden={ true } style={ 'defaultDark' } />
<Container>
- <div className="settings">
- <button className="settings__close" onClick={ this.props.onClose } />
- <div className="settings__container">
- <div className="settings__header">
- <h2 className="settings__title">Settings</h2>
- </div>
- <CustomScrollbars autoHide={ true }>
- <div className="settings__content">
- <div className="settings__main">
+ <View style={styles.settings}>
+ <Button style={styles.settings__close} onPress={ this.props.onClose } testName="settings__close">
+ <Img style={styles.settings__close_icon} source="icon-close" tintColor="currentColor"/>
+ </Button>
- { /* show account options when logged in */ }
- <If condition={ isLoggedIn }>
- <Then>
- <div className="settings__account">
+ <View style={styles.settings__container}>
+ <View style={styles.settings__header}>
+ <Text style={styles.settings__title}>Settings</Text>
+ </View>
- <div className="settings__view-account settings__cell settings__cell--active" onClick={ this.props.onViewAccount }>
- <div className="settings__cell-label">Account</div>
- <div className="settings__cell-value">
- <If condition={ isOutOfTime }>
- <Then>
- <span className="settings__account-paid-until-label settings__account-paid-until-label--error">OUT OF TIME</span>
- </Then>
- <Else>
- <span className="settings__account-paid-until-label">{ formattedExpiry }</span>
- </Else>
- </If>
- </div>
- <div className="settings__cell-disclosure">
- <Img source="icon-chevron" tintColor="currentColor" />
- </div>
- </div>
- <div className="settings__cell-spacer"></div>
- </div>
- </Then>
- </If>
+ <View style={styles.settings__content}>
+ <View style={styles.settings__main}>
+ {/* show account options when logged in */}
+ {isLoggedIn ? (
+ <View style={styles.settings_account} testName="settings__account">
+ <Button onPress={ this.props.onViewAccount } testName="settings__view_account">
+ <View style={styles.settings__cell}>
+ <Text style={styles.settings__cell_label}>Account</Text>
+ <View style={styles.settings__cell_value}>
+ {isOutOfTime ? (
+ <Text style={styles.settings__account_paid_until_label__error} testName="settings__account_paid_until_label">OUT OF TIME</Text>
+ ) : (
+ <Text style={styles.settings__account_paid_until_label} testName="settings__account_paid_until_label">{formattedExpiry}</Text>
+ )}
+ </View>
+ <Img style={styles.settings__cell_disclosure} source="icon-chevron" tintColor="currentColor"/>
+ </View>
+ </Button>
+ <View style={styles.settings__cell_spacer} />
+ </View>
+ ) : null}
- <If condition={ isLoggedIn }>
- <Then>
- <div className="settings__advanced">
- <div className="settings__cell settings__cell--active" onClick={ this.props.onViewAdvancedSettings }>
- <div className="settings__cell-label">Advanced</div>
- <div className="settings__cell-value">
- <div className="settings__cell-disclosure">
- <Img source="icon-chevron" tintColor="currentColor" />
- </div>
- </div>
- </div>
- <div className="settings__cell-spacer"></div>
- </div>
- </Then>
- </If>
+ {isLoggedIn ? (
+ <Button onPress={ this.props.onViewAdvancedSettings }>
+ <View style={styles.settings__cell}>
+ <Text style={styles.settings__cell_label}>Advanced</Text>
+ <Img style={styles.settings__cell_disclosure} source="icon-chevron" tintColor="currentColor"/>
+ </View>
+ <View style={styles.settings__cell_spacer}></View>
+ </Button>
+ ) : null}
- <div className="settings__external">
- <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'faq') }>
- <div className="settings__cell-label">FAQs</div>
- <div className="settings__cell-icon">
- <Img source="icon-extLink" tintColor="currentColor" />
- </div>
- </div>
- <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'guides') }>
- <div className="settings__cell-label">Guides</div>
- <div className="settings__cell-icon">
- <Img source="icon-extLink" tintColor="currentColor" />
- </div>
- </div>
- <div className="settings__view-support settings__cell settings__cell--active" onClick={ this.props.onViewSupport }>
- <div className="settings__cell-label">Report a problem</div>
- <div className="settings__cell-disclosure">
- <Img source="icon-extLink" tintColor="currentColor" />
- </div>
- </div>
- </div>
- </div>
+ <View style={styles.settings__external} testName="settings__external">
- <div className="settings__footer">
- <button className="settings__quit button button--negative" onClick={ this.props.onQuit }>Quit app</button>
- </div>
+ <Button onPress={ this.props.onExternalLink.bind(this, "faq") } testName="settings__external_link">
+ <View style={styles.settings__cell}>
+ <Text style={styles.settings__cell_label}>FAQs</Text>
+ <Img style={styles.settings__cell_icon} source="icon-extLink" tintColor="currentColor"/>
+ </View>
+ </Button>
- </div>
- </CustomScrollbars>
- </div>
- </div>
+ <Button onPress={ this.props.onExternalLink.bind(this, "guides") } testName="settings__external_link">
+ <View style={styles.settings__cell}>
+ <Text style={styles.settings__cell_label}>Guides</Text>
+ <Img style={styles.settings__cell_icon} source="icon-extLink" tintColor="currentColor"/>
+ </View>
+ </Button>
+
+ <Button onPress={ this.props.onViewSupport } testName="settings__view_support">
+ <View style={styles.settings__cell}>
+ <Text style={styles.settings__cell_label}>Contact support</Text>
+ <Img style={styles.settings__cell_icon} source="icon-chevron" tintColor="currentColor"/>
+ </View>
+ </Button>
+
+ </View>
+ </View>
+
+ <View style={styles.settings__footer}>
+ <Button style={styles.settings__footer_button} onPress={this.props.onQuit} testName="settings__quit">
+ <Text style={styles.settings__footer_button_label}>Quit app</Text>
+ </Button>
+ </View>
+ </View>
+ </View>
+ </View>
+>>>>>>> Settings in reactxp
</Container>
</Layout>
);
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
new file mode 100644
index 0000000000..b3cc72e84a
--- /dev/null
+++ b/app/components/SettingsStyles.js
@@ -0,0 +1,140 @@
+import { Styles } from "reactxp";
+
+const styles = {
+ settings:
+ Styles.createViewStyle({
+ backgroundColor: '#192E45',
+ height: '100%'
+ }),
+ settings__container:
+ Styles.createViewStyle({
+ flexDirection: "column",
+ height: '100%'
+ }),
+ settings__header:
+ Styles.createViewStyle({
+ flex: 0,
+ paddingTop: 12,
+ paddingBottom: 12,
+ paddingLeft: 24,
+ paddingRight: 24,
+ position: "relative" /* anchor for close button */
+ }),
+ settings__content:
+ Styles.createViewStyle({
+ flexDirection: "column",
+ flex: 1,
+ }),
+ settings__close:
+ Styles.createViewStyle({
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ marginTop: 0,
+ marginLeft: 12,
+ }),
+ settings__close_icon:
+ Styles.createViewStyle({
+ width: 24,
+ height: 24,
+ flex: 0,
+ opacity: 0.6,
+ marginRight: 8,
+ }),
+ settings__title:
+ Styles.createTextStyle({
+ fontFamily: "DINPro",
+ fontSize: 32,
+ fontWeight: "900",
+ lineHeight: 40,
+ color: "#FFFFFF"
+ }),
+ settings__cell:
+ Styles.createViewStyle({
+ backgroundColor: "rgba(41,71,115,1)",
+ paddingTop: 15,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ paddingRight: 24,
+ marginLeft: -6, //Because of button.css, when removed remove this
+ marginRight: -6, //Because of button.css, when removed remove this
+ marginTop: -1, //Because of button.css, when removed remove this
+ marginBottom: 0, //Because of button.css, when removed remove this
+ flex: 1,
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "space-between"
+ }),
+ settings__cell_disclosure:
+ Styles.createViewStyle({
+ marginLeft: 8
+ }),
+ settings__cell_spacer:
+ Styles.createViewStyle({
+ height: 24,
+ flex: 0
+ }),
+ settings__cell__active_hover:
+ Styles.createViewStyle({
+ backgroundColor: "rgba(41,71,115,0.9)"
+ }),
+ settings__cell_label:
+ Styles.createTextStyle({
+ fontFamily: "DINPro",
+ fontSize: 20,
+ fontWeight: "900",
+ lineHeight: 26,
+ color: "#FFFFFF"
+ }),
+ settings__cell_icon:
+ Styles.createViewStyle({
+ width: 16,
+ height: 16,
+ flex: 0,
+ marginRight: 8,
+ opacity: 0.8
+ }),
+ settings__account_paid_until_label:
+ Styles.createTextStyle({
+ fontFamily: "Open Sans",
+ fontSize: 13,
+ fontWeight: "800",
+ color: "rgba(255, 255, 255, 0.8)"
+ }),
+ settings__account_paid_until_label__error:
+ Styles.createViewStyle({
+ color: "#d0021b"
+ }),
+ settings__footer_button_label:
+ Styles.createTextStyle({
+ fontFamily: "DINPro",
+ fontSize: 20,
+ fontWeight: "900",
+ lineHeight: 26,
+ color: "rgba(255,255,255,0.8)"
+ }),
+ settings__footer_button:
+ Styles.createViewStyle({
+ backgroundColor: "rgba(208,2,27,1)",
+ paddingTop: 7,
+ paddingLeft: 12,
+ paddingRight: 12,
+ paddingBottom: 9,
+ borderRadius: 4,
+ justifyContent: "center",
+ alignItems: "center",
+ width: '100%',
+ }),
+ settings__footer:
+ Styles.createViewStyle({
+ width: '100%',
+ justifyContent: "center",
+ alignItems: "center",
+ paddingTop: 24,
+ paddingLeft: 24,
+ paddingRight: 24,
+ paddingBottom: 24,
+ })
+};
+
+module.exports = styles;
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.