summaryrefslogtreecommitdiffhomepage
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-rw-r--r--app/components/Account.css7
-rw-r--r--app/components/SelectLocation.css2
-rw-r--r--app/components/Settings.css3
-rw-r--r--app/components/Settings.js22
-rw-r--r--app/components/Support.css134
-rw-r--r--app/components/Support.js108
6 files changed, 256 insertions, 20 deletions
diff --git a/app/components/Account.css b/app/components/Account.css
index 21aefef292..ab94518034 100644
--- a/app/components/Account.css
+++ b/app/components/Account.css
@@ -24,8 +24,7 @@
margin: 0;
top: 24px;
left: 12px;
- z-index: 1; /* part of .account__container convers the button */
-
+ z-index: 1; /* part of .account__container covers the button */
}
.account__close-icon {
@@ -35,8 +34,8 @@
.account__close-title {
font-family: "Open Sans";
- font-size: 13px;
- font-weight: 600;
+ font-size: 13px;
+ font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css
index 72684711a1..cb63f61115 100644
--- a/app/components/SelectLocation.css
+++ b/app/components/SelectLocation.css
@@ -28,7 +28,7 @@
background-color: transparent;
background-image: url(../assets/images/icon-close.svg);
opacity: 0.6;
- z-index: 1; /* part of .select-location__container convers the button */
+ z-index: 1; /* part of .select-location__container covers the button */
}
.select-location__title {
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 4bd2de5929..7bb3dfcec7 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -35,7 +35,7 @@
background-color: transparent;
background-image: url(../assets/images/icon-close.svg);
opacity: 0.6;
- z-index: 1; /* part of .settings__container convers the button */
+ z-index: 1; /* part of .settings__container covers the button */
}
.settings__title {
@@ -95,6 +95,7 @@
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;
}
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 9dddb2267d..4c906a9dc1 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,21 +14,15 @@ export type SettingsProps = {
onQuit: () => void,
onClose: () => void,
onViewAccount: () => void,
- onExternalLink: (type: string) => void,
- onUpdateSettings: (update: $Shape<SettingsReduxState>) => void
+ onViewSupport: () => void,
+ onExternalLink: (type: string) => void
};
export default class Settings extends Component {
props: SettingsProps;
- onClose = () => this.props.onClose();
-
- onExternalLink(type: string) {
- this.props.onExternalLink(type);
- }
-
- render(): React.Element<*> {
+ render() {
const isLoggedIn = this.props.account.status === 'ok';
let isOutOfTime = false, formattedExpiry = '';
let expiryIso = this.props.account.expiry;
@@ -44,7 +38,7 @@ export default class Settings extends Component {
<Header hidden={ true } style={ 'defaultDark' } />
<Container>
<div className="settings">
- <button className="settings__close" onClick={ this.onClose } />
+ <button className="settings__close" onClick={ this.props.onClose } />
<div className="settings__container">
<div className="settings__header">
<h2 className="settings__title">Settings</h2>
@@ -80,17 +74,17 @@ export default class Settings extends Component {
</If>
<div className="settings__external">
- <div className="settings__cell settings__cell--active" onClick={ this.onExternalLink.bind(this, 'faq') }>
+ <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'faq') }>
<div className="settings__cell-label">FAQs</div>
<img className="settings__cell-icon" src="./assets/images/icon-extLink.svg" />
</div>
- <div className="settings__cell settings__cell--active" onClick={ this.onExternalLink.bind(this, 'guides') }>
+ <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'guides') }>
<div className="settings__cell-label">Guides</div>
<img className="settings__cell-icon" src="./assets/images/icon-extLink.svg" />
</div>
- <div className="settings__cell settings__cell--active" onClick={ this.onExternalLink.bind(this, 'supportEmail') }>
+ <div className="settings__view-support settings__cell settings__cell--active" onClick={ this.props.onViewSupport }>
<div className="settings__cell-label">Contact support</div>
- <img className="settings__cell-icon" src="./assets/images/icon-email.svg" />
+ <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
</div>
</div>
</div>
diff --git a/app/components/Support.css b/app/components/Support.css
new file mode 100644
index 0000000000..58f4df3a20
--- /dev/null
+++ b/app/components/Support.css
@@ -0,0 +1,134 @@
+.support {
+ background: #192E45;
+ height: 100%;
+}
+
+.support__container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.support__header {
+ flex: 0 0 auto;
+ padding: 40px 24px 24px;
+ position: relative; /* anchor for close button */
+}
+
+.support__close {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ top: 24px;
+ left: 12px;
+ z-index: 1; /* part of .support__container covers the button */
+}
+
+.support__close-icon {
+ opacity: 0.6;
+ margin-right: 8px;
+}
+
+.support__close-title {
+ font-family: "Open Sans";
+ font-size: 13px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.support__title {
+ font-family: DINPro;
+ font-size: 32px;
+ font-weight: 900;
+ line-height: 40px;
+ color: #FFFFFF;
+ margin-bottom: 16px;
+}
+
+.support__subtitle {
+ font-family: "Open Sans";
+ font-size: 13px;
+ font-weight: 600;
+ line-height: normal;
+ color: rgba(255,255,255,0.8);
+}
+
+.support__content {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.support__form {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+}
+
+.support__form-row {
+ padding: 0 24px;
+}
+
+.support__form-row + .support__form-row {
+ margin-top: 8px;
+}
+
+.support__form-row--description {
+ display: flex;
+ flex: 1 1 auto;
+}
+
+.support__form-email {
+ width: 100%;
+ border-radius: 4px;
+ border: 0;
+ overflow: hidden;
+ padding: 10px 12px 12px 12px;
+ font-family: "Open Sans";
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 26px;
+ color: #294D73;
+ background-color: #fff;
+}
+
+.support__form-email::-webkit-input-placeholder {
+ color: rgba(41,77,115,0.4);
+}
+
+.support__form-description-scroll-wrap {
+ width: 100%;
+ display: flex;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.support__form-description {
+ width: 100%;
+ border: 0;
+ overflow-y: scroll;
+ resize: none;
+ padding: 10px 12px 12px 12px;
+ font-family: "Open Sans";
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 1.4em;
+ color: #294D73;
+ background-color: #fff;
+}
+
+.support__form-description::-webkit-input-placeholder {
+ color: rgba(41,77,115,0.4);
+}
+
+.support__footer {
+ padding: 16px 24px 24px;
+}
+
+.support__footer .button + .button {
+ margin-top: 16px;
+} \ No newline at end of file
diff --git a/app/components/Support.js b/app/components/Support.js
new file mode 100644
index 0000000000..783133568f
--- /dev/null
+++ b/app/components/Support.js
@@ -0,0 +1,108 @@
+// @flow
+import React, { Component } from 'react';
+import { Layout, Container, Header } from './Layout';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
+
+export type SupportReport = {
+ email: string,
+ description: string
+};
+
+export type SupportState = SupportReport;
+export type SupportProps = {
+ onClose: () => void;
+ onViewLogs: () => void;
+ onSend: (report: SupportReport) => void;
+};
+
+export default class Support extends Component {
+ props: SupportProps;
+ state: SupportState = {
+ email: '',
+ description: ''
+ }
+
+ validate() {
+ return this.state.description.trim().length > 0;
+ }
+
+ onChangeEmail = (e: Event) => {
+ const input = e.target;
+ if(!(input instanceof HTMLInputElement)) {
+ throw new Error('input must be an instance of HTMLInputElement');
+ }
+ this.setState({ email: input.value });
+ }
+
+ onChangeDescription = (e: Event) => {
+ const input = e.target;
+ if(!(input instanceof HTMLTextAreaElement)) {
+ throw new Error('input must be an instance of HTMLTextAreaElement');
+ }
+ this.setState({ description: input.value });
+ }
+
+ onSend = () => {
+ this.props.onSend(this.state);
+ }
+
+ render() {
+ return (
+ <Layout>
+ <Header hidden={ true } style={ 'defaultDark' } />
+ <Container>
+ <div className="support">
+ <div className="support__close" onClick={ this.props.onClose }>
+ <img className="support__close-icon" src="./assets/images/icon-back.svg" />
+ <span className="support__close-title">Settings</span>
+ </div>
+ <div className="support__container">
+
+ <div className="support__header">
+ <h2 className="support__title">Contact support</h2>
+ <div className="support__subtitle">
+ { `To help you more effectively, your app's log file will be attached to this message.
+ Your data will remain secure and private, as it is encrypted & anonymised before sending.` }
+ </div>
+ </div>
+
+ <div className="support__content">
+ <div className="support__form">
+ <div className="support__form-row">
+ <input className="support__form-email"
+ type="email"
+ placeholder="Your email"
+ value={ this.state.email }
+ onChange={ this.onChangeEmail }
+ autoFocus={ true } />
+ </div>
+ <div className="support__form-row support__form-row--description">
+ <div className="support__form-description-scroll-wrap">
+ <textarea className="support__form-description"
+ placeholder="Describe your problem"
+ value={ this.state.description }
+ onChange={ this.onChangeDescription } />
+ </div>
+ </div>
+ <div className="support__footer">
+ <button type="button"
+ className="button button--primary"
+ onClick={ this.props.onViewLogs }>
+ <span className="support__form-view-logs button-label">View app logs</span>
+ <ExternalLinkSVG className="button-icon button-icon--16" />
+ </button>
+ <button type="button"
+ className="support__form-send button button--positive"
+ disabled={ !this.validate() }
+ onClick={ this.onSend }>Send</button>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </Container>
+ </Layout>
+ );
+ }
+}
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.