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/CustomScrollbars.css3
-rw-r--r--app/components/Settings.css125
-rw-r--r--app/components/Settings.js157
-rw-r--r--app/components/SettingsStyles.js121
-rw-r--r--app/lib/styles.js17
6 files changed, 221 insertions, 203 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/CustomScrollbars.css b/app/components/CustomScrollbars.css
index fb00d1b7cb..4604b1e413 100644
--- a/app/components/CustomScrollbars.css
+++ b/app/components/CustomScrollbars.css
@@ -20,10 +20,11 @@
transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
pointer-events: none;
opacity: 0;
+ z-index: 99;
}
.custom-scrollbars__thumb--visible {
/* thumb appears without animation */
transition: height 0.25s ease-in-out;
opacity: 1;
-} \ No newline at end of file
+}
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..effd366ba7 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, 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,92 @@ 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>
+ <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>
+
+ <View style={styles.settings__container}>
+ <View style={styles.settings__header}>
+ <Text style={styles.settings__title}>Settings</Text>
+ </View>
+
<CustomScrollbars autoHide={ true }>
- <div className="settings__content">
- <div className="settings__main">
- { /* show account options when logged in */ }
- <If condition={ isLoggedIn }>
- <Then>
- <div className="settings__account">
+ <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>
+ {/* HERE */}
+ <Img style={styles.settings__cell_disclosure} source='icon-chevron'/>
+ </View>
+ </Button>
+ <View style={styles.settings__cell_spacer} />
+ </View>
+ ) : null}
+
+ {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__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>
+ {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}
- <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>
+ <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 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>
+ <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>
- <div className="settings__footer">
- <button className="settings__quit button button--negative" onClick={ this.props.onQuit }>Quit app</button>
- </div>
+ <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>
- </div>
+ <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>
</CustomScrollbars>
- </div>
- </div>
+ </View>
+ </View>
</Container>
</Layout>
);
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
new file mode 100644
index 0000000000..d5daef85b5
--- /dev/null
+++ b/app/components/SettingsStyles.js
@@ -0,0 +1,121 @@
+import { createViewStyles, createTextStyles } from '../lib/styles';
+
+export default Object.assign(createViewStyles({
+ settings: {
+ backgroundColor: '#192E45',
+ height: '100%'
+ },
+ settings__container:{
+ flexDirection: 'column',
+ height: '100%'
+ },
+ settings__header:{
+ flex: 0,
+ paddingTop: 12,
+ paddingBottom: 12,
+ paddingLeft: 24,
+ paddingRight: 24,
+ position: 'relative' /* anchor for close button */
+ },
+ settings__content:{
+ flexDirection: 'column',
+ flex: 1,
+ },
+ settings__close:{
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ marginTop: 0,
+ marginLeft: 12,
+ },
+ settings__close_icon:{
+ width: 24,
+ height: 24,
+ flex: 0,
+ opacity: 0.6,
+ marginRight: 8,
+ },
+ settings__cell:{
+ 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:{
+ marginLeft: 8,
+ color: 'rgba(255, 255, 255, 0.8)',
+ },
+ settings__cell_spacer:{
+ height: 24,
+ flex: 0
+ },
+ settings__cell__active_hover:{
+ backgroundColor: 'rgba(41,71,115,0.9)'
+ },
+ settings__cell_icon:{
+ width: 16,
+ height: 16,
+ flex: 0,
+ color: 'rgba(255, 255, 255, 0.8)',
+ },
+ settings__account_paid_until_label__error:{
+ color: '#d0021b'
+ },
+ settings__footer_button:{
+ backgroundColor: 'rgba(208,2,27,1)',
+ paddingTop: 7,
+ paddingLeft: 12,
+ paddingRight: 12,
+ paddingBottom: 9,
+ borderRadius: 4,
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '100%',
+ },
+ settings__footer:{
+ width: '100%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: 24,
+ paddingLeft: 24,
+ paddingRight: 24,
+ paddingBottom: 24,
+ },
+}), createTextStyles({
+ settings__title:{
+ fontFamily: 'DINPro',
+ fontSize: 32,
+ fontWeight: '900',
+ lineHeight: 40,
+ color: '#FFFFFF'
+ },
+ settings__cell_label:{
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ color: '#FFFFFF'
+ },
+ settings__footer_button_label:{
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ color: 'rgba(255,255,255,0.8)'
+ },
+ settings__account_paid_until_label:{
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: '800',
+ color: 'rgba(255, 255, 255, 0.8)'
+ },
+}));
diff --git a/app/lib/styles.js b/app/lib/styles.js
new file mode 100644
index 0000000000..c75d73236b
--- /dev/null
+++ b/app/lib/styles.js
@@ -0,0 +1,17 @@
+import { Styles } from 'reactxp';
+
+export function createViewStyles(styles: { [string]: Object }) {
+ const viewStyles = {};
+ for (const style of Object.keys(styles)) {
+ viewStyles[style] = Styles.createViewStyle(styles[style]);
+ }
+ return viewStyles;
+}
+
+export function createTextStyles(styles: { [string]: Object }) {
+ const textStyles = {};
+ for (const style of Object.keys(styles)) {
+ textStyles[style] = Styles.createTextStyle(styles[style]);
+ }
+ return textStyles;
+} \ No newline at end of file
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.