summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/AdvancedSettings.css95
-rw-r--r--app/components/AdvancedSettings.js84
-rw-r--r--app/components/AdvancedSettingsStyles.js144
-rw-r--r--package.json2
-rw-r--r--yarn.lock6
5 files changed, 192 insertions, 139 deletions
diff --git a/app/components/AdvancedSettings.css b/app/components/AdvancedSettings.css
deleted file mode 100644
index 5a071004d5..0000000000
--- a/app/components/AdvancedSettings.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.advanced-settings {
- background: #192E45;
- height: 100%;
-}
-
-.advanced-settings__container {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-.advanced-settings__main {
- margin-bottom: 24px;
-}
-
-.advanced-settings__header {
- flex: 0 0 auto;
- padding: 40px 24px 24px;
- position: relative; /* anchor for close button */
-}
-
-.advanced-settings__content {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.advanced-settings__section-title {
- background-color:rgb(41, 71, 115);
- padding: 15px 24px;
- font-family: DINPro;
- font-size: 20px;
- font-weight: 900;
- line-height: 26px;
- color: #fff;
-}
-
-.advanced-settings__title {
- font-family: DINPro;
- font-size: 32px;
- font-weight: 900;
- line-height: 40px;
- color: #FFFFFF;
-}
-
-.advanced-settings__cell {
- background-color:rgb(41, 71, 115);
- padding: 15px 24px;
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.advanced-settings__cell--dimmed {
- background-color: rgb(36, 57, 84);
-}
-
-.advanced-settings__cell--dimmed:hover {
- background-color: rgba(41, 71, 115, 0.9);
-}
-
-.advanced-settings__cell--selected,
-.advanced-settings__cell--selected:hover {
- background-color: #44AD4D;
-}
-
-.advanced-settings__cell--active:hover {
- background-color: rgba(41, 71, 115, 0.9);
-}
-
-.advanced-settings__section-title + .advanced-settings__cell,
-.advanced-settings__cell + .advanced-settings__cell {
- margin-top: 1px;
-}
-
-.advanced-settings__cell-label {
- font-family: DINPro;
- font-size: 20px;
- font-weight: 900;
- line-height: 26px;
- color: #FFFFFF;
- flex: 1 0 auto;
-}
-
-.advanced-settings__cell-icon {
- width: 24px;
- flex: 0 0 auto;
- margin-right: 8px;
- color: #fff;
-}
-
-.advanced-settings__cell-spacer {
- height: 24px;
-}
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 9898d4b02e..5e7bce4ba1 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -1,12 +1,13 @@
// @flow
import React from 'react';
-import { Layout, Container, Header } from './Layout';
+import { Component, Text, Button, View } from 'reactxp';
+import { Layout, Container } from './Layout';
import CustomScrollbars from './CustomScrollbars';
+import styles from './AdvancedSettingsStyles';
+import Img from './Img';
-import TickSVG from '../assets/images/icon-tick.svg';
-
-export class AdvancedSettings extends React.Component {
+export class AdvancedSettings extends Component {
props: {
protocol: string,
@@ -35,7 +36,7 @@ export class AdvancedSettings extends React.Component {
this.props.onUpdate(protocol, 'Automatic');
}}/>
- <div className="advanced-settings__cell-spacer"></div>
+ <View style={ styles.advanced_settings__cell_spacer }></View>
{ portSelector }
@@ -58,7 +59,6 @@ export class AdvancedSettings extends React.Component {
}
}
-
class Selector extends React.Component {
props: {
@@ -68,14 +68,23 @@ class Selector extends React.Component {
onSelect: (*) => void,
}
+ constructor(props) {
+ super(props);
+ this.state = { hoveredButtonIndex: -1 };
+ }
+
+ handleButtonHover = (value) => {
+ this.setState({ hoveredButtonIndex: value });
+ }
+
render() {
- return <div>
- <div className="advanced-settings__section-title">
+ return <View>
+ <View style={ styles.advanced_settings__section_title }>
{ this.props.title }
- </div>
+ </View>
{ this.props.values.map(value => this._renderCell(value)) }
- </div>;
+ </View>;
}
_renderCell(value) {
@@ -88,48 +97,43 @@ class Selector extends React.Component {
}
_renderSelectedCell(value) {
- return <div
- key={ value }
- className="advanced-settings__cell advanced-settings__cell--selected"
- onClick={ () => this.props.onSelect(value) } >
- <div className="advanced-settings__cell-icon"><TickSVG /></div>
- <div className="advanced-settings__cell-label">{ value }</div>
- </div>;
+ return <Button style={[ styles.advanced_settings__cell, value === this.state.hoveredButtonIndex ? styles.advanced_settings__cell_selected_hover : null ]} onPress={ () => this.props.onSelect(value) } onHoverStart={() => this.handleButtonHover(value)} onHoverEnd={() => this.handleButtonHover(-1)} key={ value }>
+ <Img style={ styles.advanced_settings__cell_icon } source='icon-tick' tintColor='currentColor'/>
+ <Text style={ styles.advanced_settings__cell_label }>{ value }</Text>
+ </Button>;
}
_renderUnselectedCell(value) {
- return <div
- key={ value }
- className="advanced-settings__cell advanced-settings__cell--dimmed"
- onClick={ () => this.props.onSelect(value) }>
- <div className="advanced-settings__cell-icon"></div>
- <div className="advanced-settings__cell-label">{ value }</div>
- </div>;
+ return <Button style={[ styles.advanced_settings__cell_dimmed, value === this.state.hoveredButtonIndex ? styles.advanced_settings__cell_hover : null ]} onPress={ () => this.props.onSelect(value) } onHoverStart={() => this.handleButtonHover(value)} onHoverEnd={() => this.handleButtonHover(-1)} key={ value }>
+ <View style={ styles.advanced_settings__cell_icon }></View>
+ <Text style={ styles.advanced_settings__cell_label }>{ value }</Text>
+ </Button>;
}
}
function BaseLayout(props) {
return <Layout>
- <Header hidden={ true } style={ 'defaultDark' } />
<Container>
- <div className="advanced-settings">
- <div className="support__close" onClick={ props.onClose }>
- <img className="support__close-icon" src="./assets/images/icon-back.svg" />
- <span className="support__close-title">Settings</span>
- </div>
- <div className="advanced-settings__container">
- <div className="advanced-settings__header">
- <h2 className="advanced-settings__title">Advanced</h2>
- </div>
+ <View style={ styles.advanced_settings }>
+ <Button style={ styles.advanced_settings__close } cursor='default' onPress={ props.onClose } testName='closeButton'>
+ <View style={ styles.advanced_settings__close_content }>
+ <Img style={ styles.advanced_settings__close_icon } source="icon-back" />
+ <Text style={ styles.advanced_settings__close_title }>Settings</Text>
+ </View>
+ </Button>
+ <View style={ styles.advanced_settings__container }>
+ <View style={ styles.advanced_settings__header }>
+ <Text style={ styles.advanced_settings__title }>Advanced</Text>
+ </View>
<CustomScrollbars autoHide={ true }>
- <div className="advanced-settings__content">
- <div className="advanced-settings__main">
+ <View style={ styles.advanced_settings__content }>
+ <View style={ styles.advanced_settings__main }>
{ props.children }
- </div>
- </div>
+ </View>
+ </View>
</CustomScrollbars>
- </div>
- </div>
+ </View>
+ </View>
</Container>
</Layout>;
}
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
new file mode 100644
index 0000000000..8e2898c2f2
--- /dev/null
+++ b/app/components/AdvancedSettingsStyles.js
@@ -0,0 +1,144 @@
+// @flow
+
+import { createViewStyles, createTextStyles } from '../lib/styles';
+
+export default {
+ ...createViewStyles({
+ advanced_settings: {
+ backgroundColor: '#192E45',
+ overflow: 'visible',
+ },
+ advanced_settings__container: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ advanced_settings__main: {
+ marginBottom: 24,
+ },
+ advanced_settings__header: {
+ flexGrow: 0,
+ flexShrink: 0,
+ flexBasis: 'auto',
+ paddingTop: 16,
+ paddingRight: 24,
+ paddingLeft: 24,
+ paddingBottom: 24,
+ },
+ advanced_settings__close: {
+ cursor: 'default',
+ },
+ advanced_settings__close_content: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingLeft: 12,
+ paddingTop: 24,
+ },
+ advanced_settings__close_icon: {
+ width: 24,
+ height: 24,
+ opacity: 0.6,
+ marginRight: 8,
+ },
+ advanced_settings__content: {
+ flexDirection: 'column',
+ flexGrow: 1,
+ flexShrink: 1,
+ flexBasis: 'auto',
+ },
+ advanced_settings__cell: {
+ backgroundColor: '#44AD4D',
+ flexDirection: 'row',
+ paddingTop: 15,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ paddingRight: 24,
+ marginBottom: 1,
+ justifyContent: 'flex-start',
+ },
+ advanced_settings__cell_hover: {
+ backgroundColor: 'rgba(41, 71, 115, 0.9)',
+ },
+ advanced_settings__cell_selected_hover: {
+ backgroundColor: '#44AD4D',
+ },
+ advanced_settings__cell_spacer: {
+ height: 24,
+ },
+ advanced_settings__cell_icon: {
+ width: 24,
+ height: 24,
+ marginRight: 8,
+ flex: 0,
+ overflow: 'visible',
+ color: 'rgba(255, 255, 255, 0.8)',
+ },
+ advanced_settings__cell_dimmed: {
+ paddingTop: 15,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ paddingRight: 24,
+ marginBottom: 1,
+ backgroundColor: 'rgb(36, 57, 84)',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ },
+ advanced_settings__cell_footer: {
+ paddingTop: 8,
+ paddingRight: 24,
+ paddingBottom: 24,
+ paddingLeft: 24,
+ },
+ advanced_settings__cell_label_container: {
+ paddingTop: 15,
+ paddingRight: 12,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ flexGrow: 1,
+ },
+ }),
+ ...createTextStyles({
+ advanced_settings__section_title: {
+ backgroundColor: 'rgb(41, 71, 115)',
+ paddingTop: 15,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ paddingRight: 24,
+ marginBottom: 1,
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ color: '#fff',
+ },
+ advanced_settings__close_title: {
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: '600',
+ color: 'rgba(255, 255, 255, 0.6)',
+ },
+ advanced_settings__title: {
+ fontFamily: 'DINPro',
+ fontSize: 32,
+ fontWeight: '900',
+ lineHeight: 40,
+ color: '#fff',
+ },
+ advanced_settings__cell_label: {
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ letterSpacing: -0.2,
+ color: '#fff',
+ flex: 0,
+ },
+ advanced_settings__cell_footer_label: {
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: '600',
+ lineHeight: 20,
+ letterSpacing: -0.2,
+ color: 'rgba(255,255,255,0.8)'
+ }
+ })
+}; \ No newline at end of file
diff --git a/package.json b/package.json
index 8f1a5d70be..b058edf1e7 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
"react-router-redux": "5.0.0-alpha.6",
"react-simple-maps": "^0.10.1",
"react-transition-group": "^1.2.0",
- "reactxp": "^0.46.5",
+ "reactxp": "^0.51.1",
"redux": "^3.0.0",
"redux-thunk": "^2.2.0",
"shell-escape": "^0.2.0",
diff --git a/yarn.lock b/yarn.lock
index feaf643384..ad1e9dc6c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6298,9 +6298,9 @@ react@^16.0.0:
object-assign "^4.1.1"
prop-types "^15.6.0"
-reactxp@^0.46.5:
- version "0.46.6"
- resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.46.6.tgz#166a503a7147f3a1e29efc4469bda32603471a5f"
+reactxp@^0.51.1:
+ version "0.51.3"
+ resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.51.3.tgz#3762a87ec7709a6a35ebbefd02164e1a71409af1"
dependencies:
"@types/lodash" "^4.14.78"
"@types/react" "^16.0.0"
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.